PWA技术

PWA全称Progressive Web App，即渐进式WEB应用。

解决的问题

实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
实现了消息推送

service worker

必须要https,除了127.0.0.1
html要设置为每次都response.clone(),这样html每次更新可以及时生效
除了配置的每次会更新外,其他的不设置,如果配置文件发生修改(例如manifest.json)要修改sw的版本号

更新缓存

manifest.json

当manifest.json更新的时候需要更新sw的版本号,

手机上操作不流畅,经常出现不能添加到桌面,Chrome浏览器,华为手机(未来会变好)

主屏幕上添加的快速入口能够及时随页面更新

推送

依赖的GCM服务在国内无法使用

注册push

 const subscribeOptions = {

    userVisibleOnly: true,

    applicationServerKey: urlBase64ToUint8Array(

        'BEl62iUYgUivxIkv69yViEuiBIa-Ib9-SkvMeAtA3LFgDzkrxZJjSgSnfckjBJuBkr3qBUYIHBQFLXYp5Nksh8U'

    )

};

registration.pushManager.subscribe(subscribeOptions);

web-push

推荐Service Worker配置:https://www.cnblogs.com/yiyi17/p/10975301.html

巴特西

PWA技术深入学习

PWA技术

解决的问题

service worker

更新缓存

manifest.json

推送

最新文章

热门文章