-
创建主屏幕入口
<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离线缓存是提高用户体验的利器。