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