-
创建主屏幕入口
<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一样
这里说一下关键问题
-
设置主入口的交互是如何的?
点击添加之后就会在桌面出现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) }) ) });
只要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
浏览器就会在系统层发出一个消息通知。
如果断网的情况下,等到网络恢复,这个消息会自动弹出来
手机端:ios的 微信,safair,chrome 完全不兼容
android的chrome 比较乐观
可是只是收到几次,突然就不行了,不知道是不是系统做了限制,卸载再安装又可以收到几次。
如果把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不是在wx推广的,我觉得pwa离线缓存是提高用户体验的利器。