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 模式上會看到完整的訊息，官方文件提供以下對照圖：
開啟 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 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 程式碼如下：
不過實測結果，有兩個問題待解決：
- 第一次會先在 Cache 裡存 precache 的檔案，到第二次進到頁面時，才會照 route requests 的設定去存，但這樣會造成每個檔案都存了 2 次。
- 當 HTML 有更新的時候，即便 sw.js 裡，clientsClaim、skipWaiting 兩個都是
true，使用都不重整頁面，或重新開啟頁面，還是會看到舊的檔案。但不把 HTML 存進 Cache 裡，又無法離線存取。只能說，要存 HTML 的話，開發就要走前後端分離才適合。
第 1 點的問題待解，如果有對 Workbox 很熟的高手，敬請告知解法。
PWA 學習筆記系列
- PWA 學習筆記 – 1：Cache、Workbox 基本使用
- PWA 學習筆記 – 2：Workbox CLI
- PWA 學習筆記 – 3：Workbox 參數
- PWA 學習筆記 – 4：manifest.json
- PWA 學習筆記 – 5：用 Firebase 做 Web Push
