初探PWA
引言
PWA(Progressive web apps, 漸進式Web應(yīng)用)，近兩年被炒的十分火爆，它有什么優(yōu)點呢？
- 可以生成桌面小圖標(biāo)，不需要打開瀏覽器，方便用戶訪問
- 通過網(wǎng)絡(luò)緩存提升頁面訪問速度，達到漸進式的頁面甚至離線訪問，提升用戶體驗
- 實現(xiàn)類似app的推送功能，生成系統(tǒng)通知推送給用戶
上面的這些優(yōu)點足以讓它吸引大量的開發(fā)者來探索和應(yīng)用，畢竟對于web應(yīng)用來說，用戶體驗才是檢驗web應(yīng)用的好壞的至高標(biāo)準(zhǔn)，而PWA的這些優(yōu)點恰恰是開發(fā)者在開發(fā)時一直追求的
Service Worker
service worker是實現(xiàn)PWA的核心，service worker是一個獨立的瀏覽器線程，不會對當(dāng)前程序的執(zhí)行線程造成阻塞，通過service worker可以實現(xiàn)頁面離線訪問、用戶消息推送等功能
生命周期
service worker生命周期完全獨立于網(wǎng)頁，因此，要想網(wǎng)頁中使用service worker，需要先注冊，注冊后瀏覽器會在后臺啟動相關(guān)的安裝步驟，一般情況下，我們需要service worker緩存一些靜態(tài)文件，因此安裝過程中會對指定的靜態(tài)文件進行緩存，若緩存成功，則service worker安裝成功，若中間有任何一個文件緩存失敗，則service worker安裝失敗，會在下次重啟時再次嘗試，下面來看一個具體的生命周期圖（來源developer.mozilla.org/zh-CN/docs/…）：
簡單應(yīng)用
看來上面的介紹，是不是躍躍欲試呢？接下來將用代碼來簡單使用一下service worker，緩存頁面中的css、js文件，具體例子：
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" type="text/css" href="/cache1.css"><title>pwa</title></head><body><div id="app">test1</div><!-- built files will be auto injected --><script src='/cache1.js'></script><script>if ('serviceWorker' in navigator) {window.addEventListener('load', function () {navigator.serviceWorker.register('/sw.js').then((registration) => {console.log('Service Worker Registration')}, (err) => {console.log(err)})})}self.addEventListener('fetch', () => {console.log('ss')})</script></body> </html> 復(fù)制代碼sw.js：
var cacheName = 'my-cache' var cacheList = ['/cache1.css', '/cache1.js'] self.addEventListener('install', function(event) {event.waitUntil(// 安裝成功后向caches中存入需要緩存的文件 caches.open(cacheName).then(function (cache) {return cache.addAll(cacheList)})) }); // 監(jiān)聽service worker fetch self.addEventListener('fetch', function (event) {event.respondWith(caches.match(event.request).then(function(response) {// 在緩存中查找到匹配的請求，就從緩存返回if (response) {console.log(response)return response;}// 緩存中沒有查找到對應(yīng)請求，繼續(xù)網(wǎng)絡(luò)請求return fetch(event.request);})); }) 復(fù)制代碼如上例所示，利用service worker緩存了頁面請求中cache1.js、cache1.css，然后再刷新一下網(wǎng)頁，網(wǎng)頁請求就會變成下圖這樣：
在網(wǎng)絡(luò)請求面版可以很清楚看到這兩個文件是從ServiceWorker中請求出來的，可能有些人對caches這個緩存對象還不是很了解，這有一篇文章可以幫助大家理解：傳送門vue-cli3中的pwa
vue最新腳手架中集成了pwa的插件，將pwa的實現(xiàn)變得更加的簡單，只需要在vue.config.js文件中配置pwa屬性就可以自動生成對應(yīng)的service-worker.js配置文件，配置參考：傳送門，這里面最核心的就是集成了google團隊開發(fā)的Workbox，因此關(guān)于更加詳細的pwa配置可以參考：傳送門，這里面包含workbox所有配置項，這里面需要關(guān)注的是runtimeCaching屬性，這個屬性提供五種緩存策略：
- CacheFirst：優(yōu)先取緩存中的數(shù)據(jù)，若沒有則請求網(wǎng)絡(luò)，請網(wǎng)絡(luò)也失敗就會報錯
- CacheOnly：只從緩存中獲取，若沒有則報錯
- NetworkFirst：優(yōu)先從網(wǎng)絡(luò)獲取，若沒有則從緩存中獲取，緩存獲取失敗則報錯
- NetworkOnly：只從網(wǎng)絡(luò)獲取，若沒有則報錯
- StaleWhileRevalidate：同時從網(wǎng)絡(luò)與緩存獲取，如果緩存可用，取緩存數(shù)據(jù)，否則從網(wǎng)絡(luò)中請求，同時緩存會隨著網(wǎng)絡(luò)請求而更新
更加詳細的緩存策略可以參考傳送門，這里的緩存策略還需要注意的一個問題就是同源策略的問題，一般情況下workbox不會緩存跨域的資源請求，因為在緩存跨域資源時，workbox無法檢測跨域請求是否成功，如果失敗，用戶將無法獲取響應(yīng)數(shù)據(jù)，但是在NetworkFirst和StaleWhileValidate策略下，可以緩存跨域資源，因為這兩個策略的緩存會定期更新，即便出現(xiàn)失敗請求，緩存的時間也是短暫的，具體詳情可以參考傳送門
兼容性
ServiceWorker這么牛，是不是就沒有什么問題了呢，它最大的問題應(yīng)該就是它的兼容性問題了，iOS11.3之前都不支持，具體詳情參考：傳送門，因此vue腳手架在集成時默認在ios下是關(guān)閉的
總結(jié)
PWA確實是當(dāng)下很熱門的技術(shù)，因為它提升了web應(yīng)用的體驗，甚至達到可以和原生app體驗相提并論，但是它的問題就是兼容性問題，相信如果兼容性問題得到解決，這種技術(shù)一定會被大面積推廣到實際應(yīng)用，希望通過這篇文章能對大家了解這門技術(shù)有一定的幫助。如果有錯誤或不嚴(yán)謹(jǐn)?shù)牡胤?#xff0c;歡迎批評指正，如果喜歡，歡迎點贊。
總結(jié)
- 上一篇： 用nrm一键切换npm源
- 下一篇： SD卡格式化怎么恢复？只需要五个步骤