PWA學習筆記-3:workbox 參數

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
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言