iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 15
1
Modern Web

30 天 Progressive Web App 學習筆記系列 第 15

Day 15 - 30 天 Progressive Web App 學習筆記 - Service Worker - Setting up the Default Cache

一開始會註冊 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 的方法去儲存靜態資源。


參考文件


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

上一篇
Day 14 - 30 天 Progressive Web App 學習筆記 - 實作 Registering the Service Worker
下一篇
Day 16 - 30 天 Progressive Web App 學習筆記 - Service Worker - Clearing Old Cache
系列文
30 天 Progressive Web App 學習筆記30

尚未有邦友留言

立即登入留言