用Service Worker實(shí)現(xiàn)離線應(yīng)用

2json 發(fā)布于2019-08-01 17:56 / 1249人閱讀

摘要：同時(shí)抓取一個(gè)請(qǐng)求及其響應(yīng)，并將其添加到給定的。返回一個(gè)對(duì)象，的結(jié)果是對(duì)象值組成的數(shù)組。代碼以下是一個(gè)實(shí)現(xiàn)離線應(yīng)用的這個(gè)是一個(gè)簡(jiǎn)陋的離線應(yīng)用，會(huì)緩存所有靜態(tài)資源請(qǐng)求，即使你修改了和文件，刷新頁(yè)面還是沒(méi)有變化。

開始有興趣了解Service Worker，是因?yàn)閷W(xué)習(xí)react時(shí)使用create-react-app創(chuàng)建的應(yīng)用，src下面會(huì)有一個(gè)registerServiceWorker.js文件。后來(lái)在了解PWA時(shí)也看到了它的身影。于是就打算寫一篇筆記詳細(xì)了解一下。

什么是Service Worker

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.

— from MDN

翻譯過(guò)來(lái)就是：Service workers 本質(zhì)上充當(dāng)Web應(yīng)用程序與瀏覽器之間的代理服務(wù)器，也可以在網(wǎng)絡(luò)可用時(shí)作為瀏覽器和網(wǎng)絡(luò)間的代理。它們旨在（除其他之外）使得能夠創(chuàng)建有效的離線體驗(yàn)，攔截網(wǎng)絡(luò)請(qǐng)求并基于網(wǎng)絡(luò)是否可用以及更新的資源是否駐留在服務(wù)器上來(lái)采取適當(dāng)?shù)膭?dòng)作。他們還允許訪問(wèn)推送通知和后臺(tái)同步API。

service worker運(yùn)行在非主線程的其他線程上，所以不會(huì)阻塞主線。，有自己獨(dú)立的上下文，不能訪問(wèn)DOM。只能使用異步api。并且為了安全，service worker只能運(yùn)行在https之上。部分瀏覽器的隱私模式也無(wú)法使用。

由于service workers是由chrome提出推廣的技術(shù)，所以chrome支持最好。其他瀏覽器的支持情況就參考Can I Use了:

生命周期

盜用MDN的一張圖。

離線應(yīng)用相關(guān)接口

CacheStorage 在瀏覽器上的引用名叫 caches，CacheStorage 是多個(gè) Cache 的集合，而每個(gè) Cache 可以存儲(chǔ)多個(gè) Response 對(duì)象。雖然它是被定義在 ServiceWorker 的規(guī)范中，但可以在其他worker和window中使用。

在caches上調(diào)用 open 方法就可以異步地得到一個(gè)Cache對(duì)象的引用。

Cache.match(request, options)

返回一個(gè)Promise對(duì)象，resolve的結(jié)果是跟Cache對(duì)象匹配的第一個(gè)已經(jīng)緩存的請(qǐng)求。

Cache.matchAll(request, options)

返回一個(gè)Promise 對(duì)象，resolve的結(jié)果是跟Cache對(duì)象匹配的所有請(qǐng)求組成的數(shù)組。

Cache.add(request)

抓取這個(gè)URL, 檢索并把返回的response對(duì)象添加到給定的Cache對(duì)象.這在功能上等同于調(diào)用 fetch(), 然后使用 Cache.put() 將response添加到cache中.

Cache.addAll(requests)

抓取一個(gè)URL數(shù)組，檢索并把返回的response對(duì)象添加到給定的Cache對(duì)象。

Cache.put(request, response)

同時(shí)抓取一個(gè)請(qǐng)求及其響應(yīng)，并將其添加到給定的cache。

Cache.delete(request, options)

搜索key值為request的Cache條目。如果找到，則刪除該Cache條目，并且返回一個(gè)resolve為true的Promise對(duì)象；如果未找到，則返回一個(gè)resolve為false的Promise對(duì)象。

Cache.keys(request, options)

返回一個(gè)Promise對(duì)象，resolve的結(jié)果是Cache對(duì)象key值組成的數(shù)組。

代碼

以下是一個(gè)實(shí)現(xiàn)離線應(yīng)用的demo - ServiceWorkerDemo

這個(gè)demo是一個(gè)簡(jiǎn)陋的離線應(yīng)用，會(huì)緩存所有靜態(tài)資源請(qǐng)求，即使你修改了index.js和index.css文件，刷新頁(yè)面還是沒(méi)有變化。要想看到新的變化，必須更改CACHE_KEY或者修改fetch事件的處理邏輯。

const CACHE_KEY = "demo";
const CACHE_FILES = [
    "/",
    "bg.jpg",
    "index.js",
    "index.css"
];


self.addEventListener("install", function(event) { // 監(jiān)聽worker的install事件
    event.waitUntil( // 延遲install事件直至緩存初始化完成
        caches.open(CACHE_KEY)
            .then(function(cache) {
                console.log("Cache created");
                return cache.addAll(CACHE_FILES);
            })
    );
});

self.addEventListener("activate", function(event) { // 監(jiān)聽worker的activate事件
    event.waitUntil( // 延遲activate事件直到cache初始化完成
        caches.keys().then(function(keys) {
            return Promise.all(keys.map(function(key, i) { // 清除舊版本緩存
                if (key !== CACHE_KEY) {
                    return caches.delete(keys[i]);
                }
            }))
        })
    )
});

self.addEventListener("fetch", function(event) { // 攔截資源請(qǐng)求
    event.respondWith( // 返回資源請(qǐng)求
        caches.match(event.request).then(function(res) { // 判斷是否命中緩存
            if (res) {  // 返回緩存的資源
                return res;
            }
            fallback(event); // 執(zhí)行請(qǐng)求備份操作
        })
    )
});

function fallback(event) {  // 恢復(fù)原始請(qǐng)求
    const url = event.request.clone();
    return fetch(url).then(function(res) { // 請(qǐng)求資源
        //if not a valid response send the error
        if (!res || res.status !== 200 || res.type !== "basic") {
            return res;
        }

        const response = res.clone();

        caches.open(CACHE_KEY).then(function(cache) { // 緩存從剛剛下載的資源
            cache.put(event.request, response);
        });

        return res;
    })
}

其他用途

消息推送

后臺(tái)消息傳遞

網(wǎng)絡(luò)代理，轉(zhuǎn)發(fā)請(qǐng)求，偽造響應(yīng)