Service Worker的應用

WindrunnerMax發表於2021-12-13

Service Worker的應用

Service worker本質上充當Web應用程式、瀏覽器與網路(可用時)之間的代理伺服器，這個API旨在建立有效的離線體驗，它會攔截網路請求並根據網路是否可用來採取適當的動作、更新來自伺服器的的資源，它還提供入口以推送通知和訪問後臺同步API。

描述

Service Worker本質上也是瀏覽器快取資源用的，只不過他不僅僅是Cache，也是通過worker的方式來進一步優化，其基於h5的web worker，所以不會阻礙當前js執行緒的執行，其最主要的工作原理，1是後臺執行緒，是獨立於當前網頁執行緒，2是網路代理，在網頁發起請求時代理攔截，來返回快取的檔案。簡單來說Service Worker就是一個執行在後臺的Worker執行緒，然後它會長期執行，充當一個服務，很適合那些不需要獨立的資源資料或使用者互動的功能，最常見用途就是攔截和處理網路請求，以下是一些細碎的描述：

基於web worker(一個獨立於JavaScript主執行緒的獨立執行緒，在裡面執行需要消耗大量資源的操作不會堵塞主執行緒)。
在web worker的基礎上增加了離線快取的能力。
本質上充當Web應用程式(伺服器)與瀏覽器之間的代理伺服器(可以攔截全站的請求，並作出相應的動作->由開發者指定的動作)。
建立有效的離線體驗(將一些不常更新的內容快取在瀏覽器，提高訪問體驗)。
由事件驅動的，具有生命週期。
可以訪問cache和indexDB。
支援推送。
可以讓開發者自己控制管理快取的內容以及版本。

Service worker還有一些其他的使用場景，以及service worker的標準能夠用來做更多使web平臺接近原生應用的事情：

後臺資料同步。
響應來自其它源的資源請求。
集中接收計算成本高的資料更新，比如地理位置和陀螺儀資訊，這樣多個頁面就可以利用同一組資料。
在客戶端進行CoffeeScript、LESS、CJS/AMD等模組編譯和依賴管理(用於開發目的)。
後臺服務鉤子。
自定義模板用於特定URL模式。效能增強，比如預取使用者可能需要的資源，比如相簿中的後面數張圖片。
可以配合App Manifest和Service Worker來實現PWA的安裝和離線等功能。
後臺同步，啟動一個service worker即使沒有使用者訪問特定站點，也可以更新快取。
響應推送，啟動一個service worker向使用者傳送一條資訊通知新的內容可用。
對時間或日期作出響應。
進入地理圍欄(LBS的一種應用)。

示例

實現一個簡單的Service worker應用示例，這個示例可以在斷網的時候同樣可以使用，相關的程式碼在https://github.com/WindrunnerMax/webpack-simple-environment/tree/simple--service-worker，在這裡就是用原生的Service Worker寫一個簡單示例，直接寫原生的Service Worker比較繁瑣和複雜，所以可以藉助一些庫例如Workbox等，在使用Service Worker之前有一些注意事項：

Service worker執行在worker上，也就表明其不能訪問DOM。
其設計為完全非同步，同步API(如XHR和localStorage)不能在service worker中使用。
出於安全考量，Service workers只能由HTTPS承載，localhost本地除錯可以使用http。
在Firefox瀏覽器的使用者隱私模式，Service Worker不可用。
其生命週期與頁面無關(關聯頁面未關閉時，它也可以退出，沒有關聯頁面時，它也可以啟動)。

首先使用Node啟動一個基礎的web伺服器，可以使用anywhere這個包，當然使用其他伺服器都是可以的，執行完命令後訪問http://localhost:7890/即可。另外寫完相關程式碼後建議重啟一下服務，之前我就遇到了無法快取的問題，包括disk cache和memory cache，要重啟服務才解決。還有要開啟的連結為localhost，自動開啟瀏覽器可能並不是localhost所以需要注意一下。如果要清理快取的話，可以在瀏覽器控制檯的Application專案中Storage點選Clear site data就能清理在網站中的所有快取了。如果使用express或者koa等伺服器環境，還可以嘗試使用Service Worker來快取資料請求，同樣提供資料請求的path即可。

$ npm install -g anywhere
$ anywhere 7890 # http://localhost:7890/

編寫一個index.html檔案和sw.js檔案，以及引入相關的資原始檔，目錄結構如下，可以參考https://github.com/WindrunnerMax/webpack-simple-environment/tree/simple--service-worker，當然直接clone下來執行一個靜態檔案伺服器就可以直接使用了。

simple--service-worker
├── static
│   ├── avatar.png
│   └── cache.js
├── index.html
└── sw.js

在html中引入相關檔案即可，主要是為了藉助瀏覽器環境，而關注的位置是js。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Service Worker</title>
    <style type="text/css">
        .avatar{
            width: 50px;
            height: 50px;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <img class="avatar" src="./static/avatar.png">
    <script type="text/javascript">
        navigator.serviceWorker
            .register("sw.js")
            .then(() => {
                console.info("註冊成功");
            })
            .catch(() => {
                console.error("註冊失敗");
            });
    </script>
    <script src="./static/cache.js"></script>
</body>
</html>

使用Service worker的第一步，就是告訴瀏覽器，需要註冊一個Service worker指令碼，在這裡我們直接將其寫到了index.html檔案中了。預設情況下，Service worker只對根目錄/生效，如果要改變生效範圍可以在register時加入第二個引數{ scope: "/xxx"}，也可以直接在註冊的時候就指定路徑/xxx/sw.js。

navigator.serviceWorker
.register("sw.js")
.then(() => {
    console.info("註冊成功")
}).catch(err => {
    console.error("註冊失敗")
})

一旦登記成功，接下來都是Service worker指令碼的工作，下面的程式碼都是寫在service worker指令碼里面的，登記後，就會觸發install事件，service worker指令碼需要監聽這個事件。首先定義這個cache的名字，相當於是標識這一個快取物件的鍵值，之後的urlsToCache陣列是即將要快取的資料，只要給定了相關的path，連資料請求也是同樣能夠快取的，而不僅僅是資原始檔，當然這邊必須是Get的請求下使用，這是Cache這個API決定的。之後便是進行install，關於event.waitUntil可以理解為new Promise的作用，是要等待serviceWorker執行起來才繼續後邊的程式碼，其接受的實際引數只能是一個Promise。在MDN的解釋是因為oninstall和onactivate完成前需要一些時間，service worker標準提供一個waitUntil方法，當oninstall或者onactivate觸發時被呼叫，接受一個promise，在這個promise被成功resolve以前，功能性事件不會分發到service worker。之後便是從caches取出這個CACHE_NAME的key標識的cache，之後使用cache.addAll將陣列中的path告訴cache，在第一次開啟的時候，Service worker會自動去請求相關的資料並且快取起來，使用Service worker去請求的資料，在Chrome控制檯的Network中會顯示一個小小的齒輪圖示，很好辨認。

const CACHE_NAME = "service-worker-demo";
const urlsToCache = ["/", "/static/avatar.png", "/static/cache.js"];

this.addEventListener("install", event => {
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => {
            console.log("[Service Worker]", urlsToCache);
            return cache.addAll(urlsToCache);
        })
    );
});

之後是activated階段，如果是第一次載入sw，在安裝後，會直接進入activated階段，而如果sw進行更新，情況就會顯得複雜一些，流程如下:首先老的sw為A，新的sw版本為B, B進入install階段，而A還處於工作狀態，所以B進入waiting階段，只有等到A被terminated後，B才能正常替換A的工作。這個terminated的時機有如下幾種方式，1、關閉瀏覽器一段時間。2、手動清除Service Worker。3、在sw安裝時直接跳過waiting階段。然後就進入了activated階段，啟用sw工作，activated階段可以做很多有意義的事情，比如更新儲存在Cache中的key和value。在下邊的程式碼中，實現了不在白名單的CACHE_NAME就清理，可以在這裡實現一個version也就是版本的控制，之前的版本就要清理等，另外還檢視了一下目前的相關快取。

this.addEventListener("activate", event => {
    // 不在白名單的`CACHE_NAME`就清理
    const cacheWhitelist = ["service-worker-demo"];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
    // 檢視一下快取
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => cache.keys().then(res => console.log(res)))
    );
});

之後便是攔截請求的階段了，該階段是sw關鍵的一個階段，用於攔截代理所有指定的請求，並進行對應的操作，所有的快取部分，都是在該階段。首先我們直接攔截掉所有的請求，在最前邊的判斷操作是為了防止所有的請求都被攔截從而都在worker裡邊發起請求，當然不進行判斷也是可以使用的。然後對於請求如果匹配到了快取，那麼就直接從快取中取得資料，否則就使用fetch去請求新的。另外如果有需要的話我們不需要在事件響應時進行匹配可以直接將所有發起過的請求快取。

this.addEventListener("fetch", event => {
    const url = new URL(event.request.url);
    if (url.origin === location.origin && urlsToCache.indexOf(url.pathname) > -1) {
        event.respondWith(
            caches.match(event.request).then(resp => {
                if (resp) {
                    console.log("fetch ", event.request.url, "有快取，從快取中取");
                    return resp;
                } else {
                    console.log("fetch ", event.request.url, "沒有快取，網路獲取");
                    return fetch(event.request);
                    // // 如果有需要的話我們不需要在事件響應時進行匹配 可以直接將所有發起過的請求快取
                    // return fetch(event.request).then(response => {
                    //     return caches.open(CACHE_NAME).then(cache => {
                    //         cache.put(event.request, response.clone());
                    //         return response;
                    //     });
                    // });
                }
            })
        );
    }
});

第一次開啟時控制檯的輸出：

cache.js loaded
[Service Worker] (3) ['/', '/static/avatar.png', '/static/cache.js']
註冊成功
(3) [Request, Request, Request]

第二次及之後開啟的控制檯輸出：

fetch  http://localhost:7811/static/avatar.png 有快取，從快取中取
fetch  http://localhost:7811/static/cache.js 有快取，從快取中取
註冊成功
cache.js loaded

至此我們就完成了一個簡單的示例，在第二次開啟頁面的時候，我們可以將瀏覽器的網路連線斷開，例如關閉檔案伺服器或者在控制檯的Network中選擇Offline，而我們也可以看到頁面依舊正常載入，不需要網路服務，另外也可以在Network的相關的資料的Size列會出現(ServiceWorker)這個資訊，說明資源是從ServiceWorker載入的快取資料。可以在https://github.com/WindrunnerMax/webpack-simple-environment/tree/simple--service-worker中clone下來後執行這個示例。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Service Worker</title>
    <style type="text/css">
        .avatar{
            width: 50px;
            height: 50px;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <img class="avatar" src="./static/avatar.png">
    <script type="text/javascript">
        navigator.serviceWorker
            .register("sw.js")
            .then(() => {
                console.info("註冊成功");
            })
            .catch(() => {
                console.error("註冊失敗");
            });
    </script>
    <script src="./static/cache.js"></script>
</body>
</html>

// sw.js
const CACHE_NAME = "service-worker-demo";
const urlsToCache = ["/", "/static/avatar.png", "/static/cache.js"];

this.addEventListener("install", event => {
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => {
            console.log("[Service Worker]", urlsToCache);
            return cache.addAll(urlsToCache);
        })
    );
});

this.addEventListener("activate", event => {
    // 不在白名單的`CACHE_NAME`就清理
    const cacheWhitelist = ["service-worker-demo"];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
    // 檢視一下快取
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => cache.keys().then(res => console.log(res)))
    );
});

this.addEventListener("fetch", event => {
    const url = new URL(event.request.url);
    if (url.origin === location.origin && urlsToCache.indexOf(url.pathname) > -1) {
        event.respondWith(
            caches.match(event.request).then(resp => {
                if (resp) {
                    console.log("fetch ", event.request.url, "有快取，從快取中取");
                    return resp;
                } else {
                    console.log("fetch ", event.request.url, "沒有快取，網路獲取");
                    return fetch(event.request);
                    // // 如果有需要的話我們不需要在事件響應時進行匹配 可以直接將所有發起過的請求快取
                    // return fetch(event.request).then(response => {
                    //     return caches.open(CACHE_NAME).then(cache => {
                    //         cache.put(event.request, response.clone());
                    //         return response;
                    //     });
                    // });
                }
            })
        );
    }
});

// cache.js
console.log("cache.js loaded");
// avatar.png
// [byte]png

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://github.com/mdn/sw-test/
https://zhuanlan.zhihu.com/p/25459319
https://zhuanlan.zhihu.com/p/115243059
https://zhuanlan.zhihu.com/p/161204142
https://github.com/youngwind/service-worker-demo
https://mp.weixin.qq.com/s/3Ep5pJULvP7WHJvVJNDV-g
https://developer.mozilla.org/zh-CN/docs/Web/API/Cache
https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API
https://www.bookstack.cn/read/webapi-tutorial/docs-service-worker.md

Service Worker 在 PWA 中的應用
2023-01-23
關於 Service Worker 和 Web 應用對應關係的討論
2024-02-14
Web
Service Worker初探
2020-03-22
Angular 裡的 Service Worker
2022-08-04
Angular
使用Service Worker做一個PWA離線網頁應用
2017-10-04
網頁
Service Worker入門
2015-03-26
Angular 應用要啟用 Service Worker 所需滿足的一些前提條件
2022-08-04
Angular
漸進式web應用開發---service worker 原理及介紹(一)
2019-07-06
Web
PWA 應用 Service Worker 快取的一些可選策略和使用場景
2022-08-04
快取
謹慎處理 Service Worker 的更新
2018-12-06
Service Worker Cache 和 HTTP Cache 的區別
2022-08-04
HTTP
來看看Service Worker的專案實戰
2018-06-06
利用service worker破解防盜鏈
2017-03-30
Service Worker 從入門到出門
2019-07-11
.Net core Worker Service 擴充套件庫
2021-05-26
套件
PWA進階：Service Worker一問一答
2019-02-26
在專案中使用Service Worker 與 PWA
2023-09-28
Service Worker （Web）推送不完全實踐
2022-11-27
Web
.NET 6學習筆記(2)——通過Worker Service建立Windows Service
2022-03-20
筆記Windows
Service Worker cache 相比 HTTP cache 的一些優點
2022-08-04
HTTP
Service Worker 圖片載入失敗處理
2019-01-16
service worker 對靜態資源進行快取
2020-03-29
快取
Service Worker學習與實踐（二）——PWA簡介
2019-03-01
Service Worker學習與實踐（三）——訊息推送
2018-11-20
前端日拱一卒D3——Service Worker
2018-07-19
前端
前端快取機制提升網站效能 - Service Worker
2022-03-17
前端快取網站
Service Worker讓Web應用也能離線、即時載入（Google開發者大會演講PPT&視訊）
2017-01-24
WebGo
Service Worker Cache 和 HTTP Cache 聯合使用的場景討論
2022-08-04
HTTP
JavaScript 是如何工作的：Service Worker 的生命週期及使用場景
2019-01-08
JavaScript
【應用服務 App Service】App Service 新手資料包
2020-11-16
APP
微軟Azure Container Service的容器化應用
2019-03-04
微軟AI
Android基礎及應用 Service的使用
2018-04-29
Android
Service Worker學習與實踐（一）——離線快取
2018-09-18
快取
[譯] JavaScript 是如何工作的：Service Worker 的生命週期與使用場景
2018-05-31
JavaScript
PWA：Service worker生命週期事件對網路資源的處理
2021-01-02
事件
Re0：在Vue裡用Service Worker來搞箇中間層（React同理）（超詳細）
2018-07-07
VueReact
HTTP/1.x 及 Service Worker 快取實踐小結
2018-12-17
HTTP快取
濫用Accessibility service自動安裝應用
2020-08-19

Service Worker的應用

Service Worker的應用

描述

示例

每日一題

參考

相關文章