用Service Worker實現離線應用

jindong 發布于2019-08-21 17:28 / 3190人閱讀

摘要：同時抓取一個請求及其響應，并將其添加到給定的。返回一個對象，的結果是對象值組成的數組。代碼以下是一個實現離線應用的這個是一個簡陋的離線應用，會緩存所有靜態資源請求，即使你修改了和文件，刷新頁面還是沒有變化。

開始有興趣了解Service Worker，是因為學習react時使用create-react-app創建的應用，src下面會有一個registerServiceWorker.js文件。后來在了解PWA時也看到了它的身影。于是就打算寫一篇筆記詳細了解一下。

什么是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

翻譯過來就是：Service workers 本質上充當Web應用程序與瀏覽器之間的代理服務器，也可以在網絡可用時作為瀏覽器和網絡間的代理。它們旨在（除其他之外）使得能夠創建有效的離線體驗，攔截網絡請求并基于網絡是否可用以及更新的資源是否駐留在服務器上來采取適當的動作。他們還允許訪問推送通知和后臺同步API。

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

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

生命周期

盜用MDN的一張圖。

離線應用相關接口

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

在caches上調用 open 方法就可以異步地得到一個Cache對象的引用。

Cache.match(request, options)

返回一個Promise對象，resolve的結果是跟Cache對象匹配的第一個已經緩存的請求。

Cache.matchAll(request, options)

返回一個Promise 對象，resolve的結果是跟Cache對象匹配的所有請求組成的數組。

Cache.add(request)

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

Cache.addAll(requests)

抓取一個URL數組，檢索并把返回的response對象添加到給定的Cache對象。

Cache.put(request, response)

同時抓取一個請求及其響應，并將其添加到給定的cache。

Cache.delete(request, options)

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

Cache.keys(request, options)

返回一個Promise對象，resolve的結果是Cache對象key值組成的數組。

代碼

以下是一個實現離線應用的demo - ServiceWorkerDemo

這個demo是一個簡陋的離線應用，會緩存所有靜態資源請求，即使你修改了index.js和index.css文件，刷新頁面還是沒有變化。要想看到新的變化，必須更改CACHE_KEY或者修改fetch事件的處理邏輯。

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


self.addEventListener("install", function(event) { // 監聽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) { // 監聽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) { // 攔截資源請求
    event.respondWith( // 返回資源請求
        caches.match(event.request).then(function(res) { // 判斷是否命中緩存
            if (res) {  // 返回緩存的資源
                return res;
            }
            fallback(event); // 執行請求備份操作
        })
    )
});

function fallback(event) {  // 恢復原始請求
    const url = event.request.clone();
    return fetch(url).then(function(res) { // 請求資源
        //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;
    })
}

其他用途

消息推送

后臺消息傳遞

網絡代理，轉發請求，偽造響應

GPU云服務器云服務器 service worker service-worker 離線應用離線應用功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89545.html

【PWA學習與實踐】(3) 讓你的WebApp離線可用

摘要：學習與實踐系列文章已整理至學習手冊，文字內容已同步至。本文是學習與實踐系列的第三篇文章。引言其中一個令人著迷的能力就是離線可用。但是，如果你注意到文章開頭的圖片就會發現，離線時我們不僅可以訪問，還可以使用搜索功能。《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊，文字內容已同步至learning-pwa-ebook。轉載請注明作者與出處。本文是《PWA學習與實...

since1986 2019-08-23 12:46 評論0 收藏0
用Service Worker實現離線應用

摘要：同時抓取一個請求及其響應，并將其添加到給定的。返回一個對象，的結果是對象值組成的數組。代碼以下是一個實現離線應用的這個是一個簡陋的離線應用，會緩存所有靜態資源請求，即使你修改了和文件，刷新頁面還是沒有變化。開始有興趣了解Service Worker，是因為學習react時使用create-react-app創建的應用，src下面會有一個registerServiceWorker.js...

2json 2019-08-01 17:56 評論0 收藏0
構建離線web應用（一）

摘要：我喜歡移動，而且也是那些堅持使用技術構建移動應用程序的人之一。我們準備做這樣的一個漸進式應用是典型的旨在提高用戶離線體驗的應用。當我們開始構建應用時，你就能理解上面的場景了。的作用范圍是針對相對路徑的。最佳的做法是在應用的入口。我喜歡移動app，而且也是那些堅持使用Web技術構建移動應用程序的人之一。經過技術的不斷迭代（可能還有一些其它的東西），移動體驗設計愈來愈平易近人，給予用戶...

Sanchi 2019-08-21 17:31 評論0 收藏0
前端應該知曉的PWA

摘要：對來說主要兩個事件。是當前的變量，執行該方法表示強制當前處在狀態的進入狀態。頁面關閉之后，老的會被干掉，新的接管頁面新的生效后會觸發事件。一、傳統web 應用當前web應用在移動時代并沒有達到其在桌面設備上流行的程度，下面有張圖來對比與原生應用之間的差別。 showImg(https://segmentfault.com/img/bVbaD44?w=1920&h=1080)...

GT 2019-08-22 17:11 評論0 收藏0
[翻譯]Service workers：PWA背后的英雄

摘要：如果返回的被拒，另一個同步事件被自動地開始重試操作，直到返回一個成功狀態的。推送機制使得服務器能夠向發送信息，然后將信息展示給用戶才是消息通知。然后它們可以發送消息通知，或者是更新的狀態。原文地址：https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-...

snifes 2019-08-22 14:48 評論0 收藏0