PWA 學習筆記 – 3:Workbox 參數

/

Workbox 可用的參數設定

Route Requests

說明文件:Route Requests

Route Requests,是把要存進 Cache Storage 裡的檔案,在瀏覽器發出 Request 時做不同的使用方式。文件裡面用Strategy(策略)來形容。

Strategy 總共有 5 種策略:

Stale While Revalidate

如果 Cache Storage 裡有檔案,那 Request 會用 Cache 裡的檔案作 Response。但不論 Cache 裡有沒有檔案,Request 都會發出去。Request 出去後,從 Network 拿到的 Response 會更新到 Cache 裡。

Network First

Request 發出去後,優先從 Network 拿到的檔案作 Response,並且將 Response 的檔案存到 Cache 裡。如果Network 的 Response 出現錯誤,則會拿 Cache 裡的檔案當作 Response。

Cache First

跟 Network First 相反,優先從 Cache 裡先找檔案當作 Response。如果 Cache Storage 裡沒,才會從 Network 裡去拿檔案,並把拿到的檔案存到 Cache 裡。

Network Only

強制 Request 只能從 Network 裡拿檔案。

Cache Only

強制 Request 只能從 Cache 裡拿檔案。


Route Requests + 自訂 Cache 名稱

設定策略時,可以一併定義 Cache 的名稱,如下:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝


改成 debug 模式

說明文件:Configure Debug Builds vs Production Builds

用不用 debug 模式,差別在於 Console 上會看到的樣子,debug 模式上會看到完整的訊息,官方文件提供以下對照圖:

https://developers.google.com/web/tools/workbox/images/guides/configure-workbox/debug-vs-prod.png?hl=zh-TW

開啟 debug 模式,只需加入以下:

workbox.setConfig({ debug: true });

用成 false 就是關閉。


Cache 來自於別的網域時

說明文件:Handle Third Party Requests

網站用的檔案,有時會是別的網域來源,像是引用的 CSS、JS 來自於 CDN 時。

Cache 可以存別的網域的檔案,如果遇到無法存的狀況,就在引用的 CSS 或 JS 加入 crossorigin="anonymous",如下:

<link crossorigin="anonymous" rel="stylesheet" href="https://example.com/path/to/style.css">
<img crossorigin="anonymous" src="https://example.com/path/to/image.png">
<script crossorigin="anonymous" src="https://example.com/path/to/main.js">

另外,這種跨網域的檔案,在使用策略時,用 networkFirst、staleWhileRevalidate,這 2 個比較保險。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝


快取的檔案加入檔案數量、期限的限制

以下是將 Google Font 存入 Cache 裡的範例:


離線時也能向 GA 發送請求

說明文件:Enable Offline Google Analytics

加入以下程式碼即可。

workbox.googleAnalytics.initialize();

不過,GA 都是處理收到的數據,不會主動去分來的請求是不是離線狀態。

如果要區分,要加入自訂維度才行,說明文件如下:

Workbox Google Analytics


在 Workbox CLI 上使用參數

Workbox 在使用 wizard 生出的 workbox-config.js,裡面是一些基本設定,背後有很多未寫上去的參數都是預設值,以下先提供 workbox-config.js 要用參數時的 Demo:

程式碼裡的 runtimeCaching 就是參數之一。

Workbox 依用途分為 generateSW、injectManifest 這兩種,因此可以參數也分這兩種,大部份參數都是給 generateSW用的。

原官方文件的說明在這:

Generate a Complete Service Worker with Workbox CLI

覺得實際上看得懂又會使用到的,是以下這三個:

skipWaiting、clientsClaim

預設值:false
可用值:true、false
這兩個要改就會同時改,這 2 項跟 sw.js 的生命周期有關。如果 sw.js 有更新,就會觸發 activate 這個事件,然後在使用者重新開啟頁籤時,才會用更新過的 sw.js 並去抓新的檔案進 Cache。改成 true 的話則會直接用新的 sw.js 檔。

runtimeCaching

預設值:[]

這個是除了 workbox-config.js 裡預設要 Cache 的檔案外,如果有另外的檔案也要存的話可以用的。

以上這3個參數都是給generateSW用。


結論:實際上會怎麼使用

因為之後會來研究 Web Push,因此在 Workbox 上,先 Workbox CLI 的 injectManifest,生出一個 workbox-cofig.js,再針對不同的檔案設定不同的策略。

註:使用 Workbox CLI 的教學請參考「PWA 學習筆記 – 2:Workbox CLI

用 Workbox wizard 生成 workbox-config.js 後,對 sw-config.js 檔案作以下設定:

HTML 設為 networkFirst。

套件的 CSS、JS 用 cacheFirst。

自己手刻的 CSS、JS,依更新頻率來判斷,剛上線很常要修改時,用 networkFirst,上線一陣子隱定後改用 cacheFirst。

Images 的話,除了 logo 或是 icon 等固定圖片用 cacheFirst,其它的用 networkFirst,並加上存放期限。

整理以上,sw-config.js 程式碼如下:

不過實測結果,有兩個問題待解決:

  1. 第一次會先在 Cache 裡存 precache 的檔案,到第二次進到頁面時,才會照 route requests 的設定去存,但這樣會造成每個檔案都存了 2 次。
  2. 當 HTML 有更新的時候,即便 sw.js 裡,clientsClaim、skipWaiting 兩個都是 true,使用都不重整頁面,或重新開啟頁面,還是會看到舊的檔案。但不把 HTML 存進 Cache 裡,又無法離線存取。只能說,要存 HTML 的話,開發就要走前後端分離才適合。

第 1 點的問題待解,如果有對 Workbox 很熟的高手,敬請告知解法。


PWA 學習筆記系列

Summary
PWA 學習筆記 - 3:Workbox 參數
Article Name
PWA 學習筆記 - 3:Workbox 參數
Description
本篇大綱:列出workbox可用的參數設定 -1 Route Requests -2 Route Requests + 自訂cache名稱 -3 改成debug模式 -4 cache來自於別的網域時 -5 快取的檔案加入檔案數量、期限的限制 -6 離線時也能向GA發送請求
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Vue

用 VuePress 製作說明文件頁面 – 2:config.js 基本設定

Front-End

製作 RWD email 工具:MJML,如何使用及注意事項

Bot Telegram

Telegram Bot 學習筆記 – 3:鍵盤 Keyboard

Google Others

Google Top Heavy 演算法

Vue

Vue.js 用 computed 跟 filter 做一個簡易搜尋功能

API

Instagram Embedding 抓 iframe 高度及 3 種大小圖片

Forms Google

Google 表單 用網址改變題目預設值

Bot LINE

LIFF v2 基本使用筆記及範例

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:上篇 – 前置作業

Vue

用 VuePress 製作說明文件頁面 – 4:佈景主題、外掛

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

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

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

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

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

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

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

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

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