PWA 学习小结

  1. 创建主屏幕入口

<link rel="manifest" href="manifest.json" />

manifest.json文件大概是这样的

{
  "name": "微博Lite",
  "short_name": "微s博",
  "description": "随时随地分享新鲜事",
  "icons": [{
      "src": "https://luoyongjie.cn/lab/pwa/icon/weibologo.png",
      "sizes": "606x606",
      "type": "image/png"
    }],
  "start_url": "/static/pwa/",
  "scope": "/static/pwa/",
  "display": "browser",
  "orientation": "portrait",
  "background_color": "#F3F3F3",
  "theme_color": "#F3F3F3",
  "related_applications": [],
  "prefer_related_applications": false
}

 

这里我是抄m.weibo.com/beta的manifest.json

内容太多,不一一称述,无非就是设置logo图片,访问地址,app打开的屏幕,是否显示导航栏,就像一个HirdApp一样

这里说一下关键问题

  1. 设置主入口的交互是如何的?

image.png

image.png

点击添加之后就会在桌面出现icon入口了

感觉这样的交互,用户几乎不会这样做,太鸡肋了,那么有没有可以用js控制提醒用户是否需要添加到主屏幕的方式呢?没有。。。。。

于是我带着怀疑的态度,尝试了

chrome IOS版本 居然没有开放这个操作

chrome Android版 操作有了,确认添加到主屏幕了,但是屏幕就是找不到icon入口

2.server worker 离线缓存

入口文件处载入如下代码:

<script>
function registerServiceWorker(){
    return navigator.serviceWorker.register('./sw.js').then(registration => {
        alert('注册成功');
        return registration;
    })
    .catch(err => {
        alert('注册失败', err);
    });
}
window.onload = function () {
    if (!('serviceWorker' in navigator)) {
        return;
    }
    registerServiceWorker()
}
</script>
const CURCACHE = 'CURCACHE_test_1'
const RUNTIME = 'runtime';
var CURCACHE_URLS = [
  '/lab/pwa/index.html',
  '/lab/pwa/main.css'
];

self.addEventListener('install',e=>{
    e.waitUntil(
      //存储缓存路径对应的资源
        caches.open(CURCACHE).then(cache=>{
            cache.addAll(CURCACHE_URLS)
        }).then(
            self.skipWaiting()
        )
    )
})
 
 
   
  //代理请求,使用缓存,请求发送之前
  self.addEventListener('fetch', e => {
    e.respondWith(
      //缓存是否匹配 
      caches.match(e.request).then(function(response) {
        if (response != null) {
          //命中缓存返回缓存,结束请求
          return response
        }
        //未命中缓存,正常请求
        return fetch(e.request.url)
      })
    )
  });

 image.png

只要caches设置了缓存,就能在离线状态下访问页面,同时可以在sw中控制缓存哪些内容。

sw.js文件每次都会请求服务器获取最新的server worker文件

注意:如果浏览器本身对sw.js进行缓存的话,也不会得到最新代码,所有代码会变成死代码,无法更新。所以对sw文件最好配置成cache-control: no-cache

经过测试,ios safair,chrome 都支持,但是微信页面不支持 navigator.serviceWorker == undefined,估计是微信为了推广小程序,故意封掉的

3.消息推送

https://firebase.google.com/docs/web/setup

按照这里的教程可以利用firebase的安装包,可以做出一个消息推送的demo。不过必需要翻墙。

实际体验如下:

需要在服务器环境模拟一个请求到google的推送服务器

比如

curl -X POST -H "Authorization: key=YOUR-SERVER-KEY" -H "Content-Type: application/json" -d '{
  "notification": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-logo.png",
    "click_action": "http://localhost:8081"
  },
  "to": "YOUR-IID-TOKEN"
}' "https://fcm.googleapis.com/fcm/send"

然后在安装好firebaseSDK的页面上打开

电脑端:焦点在当前窗口的话,会即使调用当前页面的js messaging.onMessage 方法收到msg

            如果焦点不在当前窗口,则启动ServerWorker后台的self.registration.showNotification

        image.png

        浏览器就会在系统层发出一个消息通知。

        如果断网的情况下,等到网络恢复,这个消息会自动弹出来

手机端:ios的 微信,safair,chrome 完全不兼容

            android的chrome 比较乐观

            1541054402791967.png

           可是只是收到几次,突然就不行了,不知道是不是系统做了限制,卸载再安装又可以收到几次。

            如果把chrome进程杀掉,也是收不到推送的,这一点挺坑的。

          如果要关注兼容问题,可随时关注 

            https://caniuse.com/#search=Push%20API

            https://caniuse.com/#search=Notifications 这个API的兼容情况

小结:

注意以上所有环境都需要在https或localhost或127.0.0.1进行,因为server worker规定了只能在这些调节下才能开启。如果是用手机做测试,那你必需拥有一个https的站点才能测试,这一点非常坑,于是我把站点升级成https了。

实际情况:PWA最重要的一点是离线缓存,(首屏入口和消息推送用的场景不是刚需)提高用户首屏加载体验,可是这么关键的一点,居然被微信封杀了,在中国h5的流量几乎都在微信,场景限制非常大。如果某个h5不是在h5推广的,我觉得pwa离线缓存是提高用户体验的利器。

评论关闭。