2023.01.14 更新：今天幫本站裝 PWA 時，看見一個報錯，參考 Issues 上的說明，修改了「建立 sw.js」上的程式碼。
本篇要解決的問題
上次在前端的社群中看到有人在問網站加 PWA 的問題，就想起幾年前有看了 PWA 的東西，還寫了幾篇文章。
但文章寫歸寫，倒是真的沒實際拿來套到哪個站上，就想說不然直接在本站加上 PWA 好了。畢竟直接拿公司的案子來套，一個不小心把網站玩壞就只好引咎辭職了（咦？）
本篇就是寫為本站加入 PWA 的過程，順便整理了一下必要的步驟。
這次加入 PWA，主要是 Cache 跟能離線瀏覽。
Web Push 的部份因為目前還不支援 iPhone，就先不加，不然手邊沒 Andriod 手機也無法測試。
另外因為 August 也是第一次真的使用，如果文章內有錯誤的地方請各位大大們留言指正。
本篇參考資源：The Net Ninja、MDN。
1 建立 icon 的圖檔
首先必需要有一個主要的 icon 圖，這樣使用者存到手機的桌面上，或是未來加入了 Web Push 後，才會有個主圖可以用。
參考教學影片，以及 AMP 官網，他們的 icon 都準備了以下尺寸：
72, 96, 128, 144, 152, 192, 384, 512
實際上必備的是加了粗體的 192、512 這二個尺寸，本站只是想說圖用都用了，不如所有要的尺寸都一併處理好。
需要的圖片處理好後就傳到主機上，第一步完成。
2 建立 manifest.json
第二步是新增必備的 manifest.json 檔案，關於各項參數的說明可看這篇：
HTML 上要引用 manifest.json，只要在 <head> 加上一行：
<link rel="manifest" href="/manifest.json">
manifest.json 檔案內容：
在 IOS 上要另外寫 HTML 來放 icon 的圖片路徑，一樣寫在 <head> 中：
因為本站是用 WordPress 架的，要新增 HTML 的部份是直接用佈景主題編輯器來修改原始碼。
要注意的是，本站用的佈景主題不太常更新，如果主題很常更新的話，更新後上面這些 HTML 都要再重放一次。
3 建立 sw.js
以前 sw.js 的檔案是用 Workbox 來寫，但當時寫筆記文時是 3.6.3，現在看文件是 5.1.2，一些寫法都變了，不想再花時間去重頭學，再加上在 WordPress 上也不知道怎麼用他們的 Wizard，就決定改用原生 JavaScript 來寫。
本站實作時，存進 Cache Storage 的分成二部份。
第一個是「preCacheFile」，主要是存頁面上沒有發出 request，但在離線時仍需要有的檔案，像是 icon。
第二個是當頁面發出 request 時，把每個 request 都存下來，限制的數量目前是限 200 個。
以下的程式碼也加上註解，下次回頭看才會記得每個部份是為了什麼：
存進 Cache Storage 中的名稱之所以寫了版本號，是為了在有新文章發佈後，可以藉由更新版本號讓 Service Worker 抓新的檔案進 Cache Storage，避免使用者每次來首頁都是看到舊的頁面。
4 註冊 Service Worker
最後，就是在每一個頁面上加入 <script> 去註冊 Service Worker。
這部份本站是用 GTM 埋：
5 檢查，Lighthouse 看 PWA 使用狀況
以上 4 步完成後，網站上就有 PWA 了，最後就是來檢查是不是有成功。
用 Chrome 打開首頁，點滑鼠右鍵按下「檢查」，出現的面版上有一個「Lighthouse」的頁籤，點擊後會出現選項，選擇我們要檢查哪些項目：
我們這邊只檢查 PWA 的部份，在「Categories」中留「Progressive Web App」，選好後按下「Generate report」，就會開始執行測試。
以下是本站的測試結果截圖：
可以看到除了第一項因為速度太慢被嫌棄以外，其它都是綠燈。
以上就是本站使用 PWA 的一個過程，載入的速度第二次以後確實有比以往快，但第一次還是太慢了，慢到被 Lighthouse 嫌棄，以後再來想辦法做 WordPress 上的速度優化。
