PWA學習筆記-6:實際使用整體流程範例

PWA學習筆記-6:實際使用整體流程範例

本篇要解決的問題

上次在前端的社群中看到有人在問網站加 PWA 的問題,就想起幾年前有看了 PWA 的東西,還寫了幾篇文章。

但文章寫歸寫,倒是真的沒實際拿來套到哪個站上,就想說不然直接在本站加上 PWA 好了。畢竟直接拿公司的案子來套,一個不小心把網站玩壞就只好引咎辭職了(咦?)

本篇就是寫為本站加入 PWA 的過程,順便整理了一下必要的步驟。

這次加入 PWA,主要是 Cache 跟能離線瀏覽。

Web Push 的部份因為目前還不支援 iPhone,就先不加,不然手邊沒 Andriod 手機也無法測試。

另外因為 Augustus 也是第一次真的使用,如果文章內有錯誤的地方請各位大大們留言指正。

本篇參考資源:The Net NinjaMDN


1 建立 icon 的圖檔

首先必需要有一個主要的 icon 圖,這樣使用者存到手機的桌面上,或是未來加入了 Web Push 後,才會有個主圖可以用。

參考教學影片,以及 AMP 官網,他們的 icon 都準備了以下尺寸:

72, 96, 128, 144, 152, 192, 384, 512

實際上必備的是加了粗體的 192、512 這二個尺寸,本站只是想說圖用都用了,不如所有要的尺寸都一併處理好。

放個廣告賺點養主機的$$,謝謝

需要的圖片處理好後就傳到主機上,第一步完成。


2 建立 manifest.json

第二步是新增必備的 manifest.json 檔案,關於各項參數的說明可看這篇:

PWA學習筆記-4: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」的頁籤,點擊後會出現選項,選擇我們要檢查哪些項目:

點 Lighthouse,確認後點 Generate report
點 Lighthouse,確認後點 Generate report

我們這邊只檢查 PWA 的部份,在「Categories」中留「Progressive Web App」,選好後按下「Generate report」,就會開始執行測試。

以下是本站的測試結果截圖:

Let's Write PWA 測試結果
Let’s Write PWA 測試結果

可以看到除了第一項因為速度太慢被嫌棄以外,其它都是綠燈。

以上就是本站使用 PWA 的一個過程,載入的速度第二次以後確實有比以往快,但第一次還是太慢了,慢到被 Lighthouse 嫌棄,以後再來想辦法做 WordPress 上的速度優化。

Summary
PWA學習筆記-6:實際使用整體流程範例
Article Name
PWA學習筆記-6:實際使用整體流程範例
Description
本篇大綱:本篇要解決的問題。1 建立 icon 的圖檔。2 建立 manifest.json。3 建立 sw.js。4 註冊 Service Worker。5 檢查,Lighthouse 看 PWA 使用狀況。本篇就是寫為本站加入PWA的過程,順便整理了一下必要的步驟。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言