一開始會註冊 Service Worker，接著會進到 install 事件，通常我們會在這個事件裡面去快取網站的靜態檔案（App Shell），實作本篇文章的主題 - Setting up the Default Cache。

在開始實作 install 階段之前，我們先來了解 install Event 以及 Cache Storage。

Install Event

我們在上一篇文章有去監聽 install 事件，當 install 事件被觸發時，就會執行我們定義的 callback function 並傳入 install 的 event 物件。

// sw.js 
// install
self.addEventListener('install', event => {
	// 這裡的 event 就是 install 的 event
	console.log('installing…');
});

我們來了解一下 install 的 event 物件（InstallEvent）是什麼？

首先 InstallEvent 繼承自 ExtendableEvent

ExtendableEvent 有一個方法叫做 waitUntil 需要傳入 promise 物件，Syntax 如下：

event.waitUntil(promise)

這個 event 會等到 waitUntil 傳入的 promise 物件成功後，才會結束這個事件並進入到下一個階段。

以 InstallEvent 來說，就是當 promise 物件成功 resolve 後，才會真的進到 activate 階段。

在 install 裡面要透過 Cache Storage（非同步）把所有靜態檔案 Cache 到瀏覽器中，所以我們接著看 Cache Storage。

Cache Storage 簡介

CacheStorage 是 cache 的儲存介面，提供一個目錄讓我們能夠存取當前瀏覽器所有的 cache 物件，可以在 Service Worker 或是其他類型的 Worker 甚至是在 window scope 使用。

雖然 CacheStorage 是定義在 Service Worker 中，但實際上我們可以在全域或任何類型的 Worker 中都可以存取。

我們會先使用 CacheStorage(caches) 的 open 方法，我們可以透過這個方法來取得 cache 物件。

首先這個方法需要傳入我們自定的 cache 的名稱，之後就會返回一個 Promise 物件

caches.open('mycachename') // return promise

接著我們就可以等這個 promise 成功後，取得 cache object

caches.open('mycachename')
.then(cache => {
	// 取得 cache object
	// 可以針對 cache object 做資料操作
})

這裡取得的 cache 物件，如果瀏覽器內原本就有儲存，則會取得原本的，如果沒有則會建立一個新的 cache 物件並取得。

可以把 CacheStorage 想像成一個資料庫，而 Cache 則是資料表，我們需要先取得我們要的資料表再把資料寫入。

接下來講 Cache 物件的 addAll 方法，會傳入 request URL 的陣列並返回一個 Promise 物件。

cache.addAll(requests[]) // 返回 Promise 物件

例如：

cache.addAll(['/', '/index.html', '/images/test.png']) // 返回 Promise 物件

cache.addAll 會去取得所有 URL 的 response object 並儲存到該 cache 中，把 URL 當作 key，response object 當作 value。

完成 install 要做的事

先建立一個陣列，名稱為 filesToCache，這個陣列中會存放所有靜態檔案的 URL。

const filesToCache = [
	'/',
	'/index.html'
];

接著我們在 install 階段去 cache 靜態檔案，這邊使用 waitUntil 方法去等待 cache 成功後再進入到下一個階段。

// install
self.addEventListener('install', event => {
	event.waitUntil(
		caches.open('static-v1').then(cache => {
			return cache.addAll(filesToCache);
		})
	);
});

我們自訂一個 cache 名稱為 static-v1，透過 caches.open 取得 static-v1 的 cache object，再把我們前面定義的陣列(filesToCache) 存入 cache object。

這時就可以透過 chrome 的 devtools （Application > Cache Storage）看到我們儲存的資料，如下圖：

今日小結

本篇文章分享在 install 階段要做的事情，介紹了 Install Event 並透過 CacheStorage 和 cache 的方法去儲存靜態資源。

參考文件

• Install Event
• ExtendableEvent.waitUntil()
• CacheStorage
• CacheStorage.open()
• Cache.addAll()

本人小小筆記，如有錯誤或需要改進的部分，歡迎給予回饋。
我將會用最快的速度修正，m(_ _)m。謝謝