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

/

2021.06.03 公告:今天開始本站的 PWA 是直接用第三方工具,因此這篇就變成是研究筆記,而沒有實際用在本站上囉。

本篇要解決的問題

上次在前端的社群中看到有人在問網站加 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

隨選筆記文

Forms Google

完全客製 Google 表單,美化表單樣式

WordPress

WordPress:埋 Google AdSense 廣告

API Front-End

WebSocket 基本介紹及使用筆記

Google Maps

Google Maps API 學習筆記 – 3:用熱圖 / Heat map 製作全台 12 小時雨量分佈圖

Bot Telegram

Telegram Bot 學習筆記 – 5:取得使用者大頭照

Bot LINE

用 LINE Bot API 建立 LINE@ 圖文選單

Apps Script Google

Google Apps Script 基本使用:跨網域 AJAX、接 Firebase

Front-End

一個簡單的卡片樣式 Simple Card UI

Vue

用 Storybook 做一個 UI 整理集

Front-End

滿版圖片背景、影音背景

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言