本文是一個PWA的入門教程，也算是一個introduction(導讀)，不會太深入
主要聊聊三個重點: PWA的本質，構成PWA的兩個檔案，PWA APP如何更新
PWA的本質
Q: 網站和原生app在存盤上的本質區別是什么？
A: 網站中使用的素材都是通過請求實時獲取的, app中使用的素材都是本機中存盤的，在離線或者素材過大的情況下，前者每次訪問都要加載，加載過慢的缺點就暴露了出來，離線使用體驗永遠大于在線使用體驗
有了這個前置知識之后，補充一個事實: chrome在版本43, 2015年5月的時候提供了chache API
而cache API就是PWA的魔法： 通過預先下載素材快取到cache里，下次打開就不用經過網路請求，實作離線的效果
個人感覺這樣解釋應該很清晰了，所以下面進入實際操作環節:
兩個檔案
從表面上看，要將一個網站轉成PWA網站，只需要添加兩個檔案: manifest.json和service-worker.js
前者是對APP的說明，后者是我們進行cache操作的地方
manifest.json
在這個組態檔里我們可以定義:
- name: APP的名稱
- short_name: 被添加到桌面(相當于安裝)后, app圖示下面的名稱
- start_url: 打開應用時所處URL
- display: 指定成standlone就能顯示的跟原生APP一樣(沒有瀏覽器導航欄之類的東西)
其他還有背景顏色和圖示之類的，都是些簡單的屬性在MDN上查一下就完事了: https://developer.mozilla.org/en-US/docs/Web/Manifest
service-worker.js(簡稱sw)
要用sw，首先要在index.html里對sw進行注冊
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('service worker registered'))
.catch(err => console.log('service worker not registered', err));
sw相當于一個安裝器+攔截器，簡單說下這個安裝程序是怎么實作的: 每次執行navigator.serviceWorker.register('/sw.js')都會重新下載sw.js這個檔案，就像每次打開網路游戲都要先檢查更新登陸器一樣, 然后登陸器會告訴我們是不是要下載安裝補丁包，如果新下載的sw.js跟之前稍微有點不一樣，我們的網站都會被認為是一個新版本，然后重新觸發install事件(在sw.js里面監聽), 反之如果檔案完全一樣就不會觸發install事件. 就像更新結束之后網游會要求用戶重啟游戲一樣, install結束之后，我們進入一個等待狀態，只有用戶重新打開網站，我們才會進入激活狀態觸發activate事件(和install事件一樣activate事件一個版本只觸發一次).
請仔細閱讀上面這個描述，我已經盡可能用簡單易懂的方式去描述了，上面提到的兩個事件install和activate是最重要的，前者我們通常新建一個cache，然后預加載素材，用戶重啟網站后，在activate事件里我們通常洗掉上個版本的cache，
下面是無聊的代碼(占了整個sw檔案的三分之二)，就是做了上述的兩件事情, 不想看就跳過吧
const staticCacheName = 'site-static-v1';
const assets = [
'/',
'/index.html?v=4',
'/assets/js/ui.js',
'/assets/css/main.css',
'/assets/images/background-home.jpg',
'https://fonts.googleapis.com/css?family=Lato:300,400,700',
];
// install event
self.addEventListener('install', evt => {
evt.waitUntil(
caches.open(staticCacheName).then((cache) => {
console.log('caching shell assets');
cache.addAll(assets);
})
);
});
// activate event
self.addEventListener('activate', evt => {
evt.waitUntil(
caches.keys().then(keys => {
return Promise.all(keys
.filter(key => key !== staticCacheName)
.map(key => caches.delete(key))
);
})
);
});
在sw里，我們主要做的事情有兩件:
- 管理cache(增刪查改)
- 攔截網路請求, 從而實作像動態cache之類的騷操作
攔截網路請求就是剩下的三分之一代碼, 針對一個請求我們先檢查cache里面有沒有，如果有就直接回傳，沒有就繼續請求:
self.addEventListener('fetch', evt => {
evt.respondWith(
caches.match(evt.request).then(cacheRes => {
return cacheRes || fetch(evt.request);
})
);
});
上面就是整個sw的代碼和作業原理
用谷歌教程上的話來說，sw的生命周期是pwa最大的難點, 全部的作業原理我都在上面說明了, 如果看明白了那你就是掌握了pwa最難的部分，接下來我再總結一下(三個狀態):
- 預加載素材時的安裝中狀態installing
- install完之后, 新的sw + chache沒有立即生效，而是進入等待用戶重新打開網站的waiting狀態
- 用戶重新打開網站之后，進入激活狀態activate
PWA APP如何更新
從上面sw的作業原理部分可以得知，sw.js是每次打開網站都會重新加載的！
所以想要更新網站很簡單，只要更改sw.js(比如加上一行新的素材路徑), 然后在install事件里新開一個cache，然后在activate事件里洗掉舊版本cache就OK了
比如上面的代碼, activate事件里已經做了洗掉舊cache的操作(如果cache和當前版本cache名不一樣就刪掉)，所以只要更改staticCacheName就可以了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/2360.html
標籤：HTML5
上一篇：uniapp無痛重繪token