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

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

加入以下code即可。

workbox.googleAnalytics.initialize();

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

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

Workbox Google Analytics


在workbox CLI上使用參數

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

code裡的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。

image的話,除了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

隨選筆記文

Front-End

一些有趣的 CSS 選擇器

Front-End

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

API

ML5.js 神經網路 開發圖像辨識

PWA

PWA 學習筆記 – 5:用 Firebase 做 Web Push

Front-End

Netlify + GitLab 建一個免費靜態網站

Vue

Vue.js 3 Composition API 基本學習筆記-1:Ref、Props、watch、生命週期

Front-End

用原生 JS 做一個簡單的手風琴 Accordion / Collapse 功能

Analytics Google

GA 工具 Google Analytics Debugger 介紹及使用

Front-End

第100篇:起點、轉折、then()

Vue

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

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

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

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

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

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

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

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

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

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

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.