初探PWA
引言
PWA(Progressive web apps, 漸進式Web應用)，近兩年被炒的十分火爆，它有什么優點呢？
- 可以生成桌面小圖標，不需要打開瀏覽器，方便用戶訪問
- 通過網絡緩存提升頁面訪問速度，達到漸進式的頁面甚至離線訪問，提升用戶體驗
- 實現類似app的推送功能，生成系統通知推送給用戶
上面的這些優點足以讓它吸引大量的開發者來探索和應用，畢竟對于web應用來說，用戶體驗才是檢驗web應用的好壞的至高標準，而PWA的這些優點恰恰是開發者在開發時一直追求的
Service Worker
service worker是實現PWA的核心，service worker是一個獨立的瀏覽器線程，不會對當前程序的執行線程造成阻塞，通過service worker可以實現頁面離線訪問、用戶消息推送等功能
生命周期
service worker生命周期完全獨立于網頁，因此，要想網頁中使用service worker，需要先注冊，注冊后瀏覽器會在后臺啟動相關的安裝步驟，一般情況下，我們需要service worker緩存一些靜態文件，因此安裝過程中會對指定的靜態文件進行緩存，若緩存成功，則service worker安裝成功，若中間有任何一個文件緩存失敗，則service worker安裝失敗，會在下次重啟時再次嘗試，下面來看一個具體的生命周期圖（來源developer.mozilla.org/zh-CN/docs/…）：
簡單應用
看來上面的介紹，是不是躍躍欲試呢？接下來將用代碼來簡單使用一下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> 復制代碼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)})) }); // 監聽service worker fetch self.addEventListener('fetch', function (event) {event.respondWith(caches.match(event.request).then(function(response) {// 在緩存中查找到匹配的請求，就從緩存返回if (response) {console.log(response)return response;}// 緩存中沒有查找到對應請求，繼續網絡請求return fetch(event.request);})); }) 復制代碼如上例所示，利用service worker緩存了頁面請求中cache1.js、cache1.css，然后再刷新一下網頁，網頁請求就會變成下圖這樣：
在網絡請求面版可以很清楚看到這兩個文件是從ServiceWorker中請求出來的，可能有些人對caches這個緩存對象還不是很了解，這有一篇文章可以幫助大家理解：傳送門vue-cli3中的pwa
vue最新腳手架中集成了pwa的插件，將pwa的實現變得更加的簡單，只需要在vue.config.js文件中配置pwa屬性就可以自動生成對應的service-worker.js配置文件，配置參考：傳送門，這里面最核心的就是集成了google團隊開發的Workbox，因此關于更加詳細的pwa配置可以參考：傳送門，這里面包含workbox所有配置項，這里面需要關注的是runtimeCaching屬性，這個屬性提供五種緩存策略：
- CacheFirst：優先取緩存中的數據，若沒有則請求網絡，請網絡也失敗就會報錯
- CacheOnly：只從緩存中獲取，若沒有則報錯
- NetworkFirst：優先從網絡獲取，若沒有則從緩存中獲取，緩存獲取失敗則報錯
- NetworkOnly：只從網絡獲取，若沒有則報錯
- StaleWhileRevalidate：同時從網絡與緩存獲取，如果緩存可用，取緩存數據，否則從網絡中請求，同時緩存會隨著網絡請求而更新
更加詳細的緩存策略可以參考傳送門，這里的緩存策略還需要注意的一個問題就是同源策略的問題，一般情況下workbox不會緩存跨域的資源請求，因為在緩存跨域資源時，workbox無法檢測跨域請求是否成功，如果失敗，用戶將無法獲取響應數據，但是在NetworkFirst和StaleWhileValidate策略下，可以緩存跨域資源，因為這兩個策略的緩存會定期更新，即便出現失敗請求，緩存的時間也是短暫的，具體詳情可以參考傳送門
兼容性
ServiceWorker這么牛，是不是就沒有什么問題了呢，它最大的問題應該就是它的兼容性問題了，iOS11.3之前都不支持，具體詳情參考：傳送門，因此vue腳手架在集成時默認在ios下是關閉的
總結
PWA確實是當下很熱門的技術，因為它提升了web應用的體驗，甚至達到可以和原生app體驗相提并論，但是它的問題就是兼容性問題，相信如果兼容性問題得到解決，這種技術一定會被大面積推廣到實際應用，希望通過這篇文章能對大家了解這門技術有一定的幫助。如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊。
總結
- 上一篇： 用nrm一键切换npm源
- 下一篇： SD卡格式化怎么恢复？只需要五个步骤