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配置:http://www.javashuo.com/article/p-ysclzcze-o.html