PWA學習筆記-2:workbox CLI

PWA學習筆記-2:workbox CLI

workbox CLI在做些什麼

繼前一篇的PWA學習筆記-1:cache、workbox基本使用,研究完workbox的基本使用之後,這篇要記錄的是workbox CLI。

workbox CLI的說明文件,只有短短一頁,而且一半以上都是demo code,因此實作起來很快。

workbox CLI專門處理一件事,就是幫你製作要存進cache裡的檔案清單。

要存進cache,code就是那樣,google一下就會找到很多範例可以複製貼上,比較麻煩的是,要把每一個要快取的檔案給整理出來,以及每一次有更新像css、js的檔案時,要給個版本號。

workbox CLI就是幫你解決這個麻煩。

而且,列出來的檔案清單,還會加入亂數的版本碼,這樣瀏覽器在讀sw.js時,會去抓新的檔案存進cache storage裡。


實作:用workbox CLI建立sw.js

開始實作前,先附上官方說明文件的連結:

Precache Files with Workbox CLI

Workbox CLI參數說明


workbox CLI的使用流程如下:

  1. 安裝workbox CLI
  2. 存一支sw-config.js檔(看需求可跳過)
  3. 使用workbox小精靈,生成workbox-config.js檔
  4. 用workbox-config.js檔,生出sw.js

1 安裝workbox CLI

安裝方式很簡單,首先電腦要先裝Node.js,官網就可以下載了:Node.js download

裝完Node後,開啟終端機,輸入:

npm install workbox-cli --global

用mac的話,在npm之前要多輸入sudo,之後會確認密碼,確認完就開始安裝。

裝完以後,要看有沒有安裝成功,就在終端機輸入:

workbox -h

成功的話就會顯示workbox CLI可以用的語法,如下圖:

workbox CLI可用語法
workbox CLI可用語法

2 存一支sw-config.js檔(看需求可跳過)

這步驟,如果是單純要用存取cache功能,不用其他推播、檔案分類等功能的話,可以跳過。

先來說明一下,workbox CLI產出的sw.js,按照需求分為2種:

generateSW / injectManifest

簡單的分類就是:基礎版跟進階版。

generateSW:基礎版,只是想單純的用存取cache功能,選這就對了。

injectManifest:進階版,除了基本的cache功能,如果還想要推播功能,cache分類存的功能,就要用這個。

官方上也有列出這兩個的適用時機:When to use XXX || NOT to use XXX

開始進行sw-config.js的說明。

sw-config.js這個檔名是我自己取的,一開始看文件,還不清楚它的功用,後來實際用了才發現它的地位就像git裡的master一樣,依賴它生成的sw.js就像它的分支。

最上面說了,workbox CLI主要就是負責幫忙抓要存去cache裡的檔案清單,除了檔案清單,其它的部份都要先寫進sw-config.js裡,因為workbox CLI在生成sw.js時,除了檔案清單,其它的設定都是直接複製sw-config.js檔的。

因為是一種整體設定的概念,因此檔名上我取作sw-config.js,避免跟其它sw.js檔產生誤會。

sw-config.js裡,最少要有2行code:

這兩行是一定要有的,line2是讓sw.js可以執行workbox,line5是讓CLI可以把檔案清單放進陣列裡。

sw-config.js建立好後,就可以進行下一步。


3 使用workbox小精靈,生成workbox-config.js檔

一般在工具類型的網站,常會有個「精靈」,像是表單精靈、資料庫精靈等,主要功用就是藉由問答的方式,來產出一個檔案或是設定,讓使用者不用一個字一個字的把code給刻出來。

workbox CLI的精靈也是做一樣的事。

註解一下,說明文件裡單字是用「wizard」,就是巫師,但是在一般的始用習慣上,用「精靈」來形容比較好懂,也比較好記,所以這篇是用精靈來形容。

以下說明生成這2種workbox-config.js的命令。

generateSW

在想生出js檔的資料夾內,開啟終端機,輸入:

workbox wizard

精靈會問四個問題:

What is the root of your web app (i.e. which directory do you deploy)?
你的根目錄是哪一個資料夾?

Which file types would you like to precache?
哪一些檔案類型要存進cache裡?

Where would you like your service worker file to be saved?
serviec-worker檔要存在哪?直接按enter就行,預設會是第一題你回答的地方。

Where would you like to save these configuration options?
workbox-config.js要存在哪裡?

都答完了以後,就會看見資料夾裡多了一個workbox-config.js的檔案:

用workbox wizard生出的workbox-config.js
用workbox wizard生出的workbox-config.js

injectManifest

在想生出js檔的資料夾內,開啟終端機,輸入:

workbox wizard --injectManifest

精靈就會問一些問題,大部份跟generateSW一樣,但會新增一題:

What is the root of your web app (i.e. which directory do you deploy)?
你的根目錄是哪一個資料夾?

Which file types would you like to precache?
哪一些檔案類型要存進cache裡?

Where’s your existing service worker file? To be used with injectManifest, it should include a call to ‘workbox.precaching.precacheAndRoute([])’
這題是新增的,就是上一步,有「workbox.precaching.precacheAndRoute([])」這一行code的檔案名稱是什麼?如果照著上一步存,那這邊就可以填sw-config.js。

Where would you like your service worker file to be saved?
要存成serviec-worker檔嗎?直接按enter就行,預設檔名就會是sw.js。

Where would you like to save these configuration options?
workbox-config.js要存在哪裡?

都回答完了以後,資料夾裡多了一個「workbox-config.js」的檔,點開後就會看到workbox的設定值:

workbox-config.js
workbox-config.js

跟generateSW不一樣的地方,就是多了一個swSrc。

精靈會生出的是基本的config檔,如果要再加上workbox裡的其它功能,還有很多參數可以用,詳細可以看官方說明文件


4 用workbox-config.js檔生出sw.js

有了workbox-config.js後,接下來就好辦了。

一樣分為generateSW / injectManifest這兩種。

generateSW

在資料夾開啟終端機,輸入:

workbox generateSW

按下enter,不用1秒,sw.js檔會建好並放到swDest指定的那個位置。

然後開啟頁面,開啟開發人員工具 → Application → Service Workers,就會看見sw.js註冊了,Cache Storage裡也有了檔案。

injectManifest

在資料夾開啟終端機,輸入:

workbox injectManifest

按下enter,sw.js檔就會出現在swDest指定的位置。

開啟頁面 →開發人員工具 →Application → Service Workers,就會看見sw.js註冊了,Cache Storage裡也有了檔案。


workbox CLI的筆記就記錄到這邊,之後會開始看workbox其他功能的部份,像是route跟其他參數等。

如果有寫錯的地方,請不吝指教。覺得對你/妳有幫助的話,也請點個讚鼓勵。


PWA學習筆記系列


Summary
PWA學習筆記-2:workbox CLI
Article Name
PWA學習筆記-2:workbox CLI
Description
本篇大綱:workbox CLI在做些什麼、用workbox CLI建立sw.js -1 安裝workbox CLI -2 存一支sw-config.js檔(看需求可跳過) -3 使用workbox小精靈,生成workbox-config.js檔 -4 用workbox-config.js檔,生出sw.js
Augustus
Let's Write
Let's Write
Publisher Logo

2
留言

avatar
  訂閱  
最新 最舊
通知
Sophie
Sophie

超棒的~

謝謝你