PWA技术深入学习

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