Service Workers （PWA 初體驗）

twohappy 發布于2019-08-02 15:23 / 721人閱讀

摘要：是一個注冊在指定源和路徑下的事件驅動。可以提供有效有效的離線體驗，攔截網絡請求。出于安全原因，要求必須在下才能運行。返回一個對象，的結果是對象值對象組成的數組。當事件的處理程序執行完畢后，可以認為安裝完成了。

在前端越來越重的這個時代，頁面加載速度成為了一個重要的指標。對于這個問題，業界也有一些解決方案。

瀏覽器緩存、協議緩存、強緩存

懶加載（首屏）

CDN 多域名突破下載并發限制。

其實在兩年前內部就對這塊內容做過調研了。appCache方案？PWA方案？但是最后都沒選擇。
之前看代碼，發現是 localstroage 存代碼，如果有就拿 localstroage 去用。省去了這一部分加載的時間。
上個同事離職了。當時的調研結果我也忘了。只能再開始新一輪的調研，我選擇的是 PWA 方案。（如果說是網速拖慢了加載速度，那么我的網頁可以離線訪問不就速度起飛了？）
網上的資料很少。我希望我可以寫一篇幫助下一個想使用 PWA 方案的人。

Service Workers

Service worker是一個注冊在指定源和路徑下的事件驅動worker。

Service worker運行在worker上下文，因此它不能訪問DOM。不同于主線程，它運行在其他線程中，所以不會造成主線程阻塞。它設計為完全異步，同步API（如XHR和localStorage）不能在service worker中使用。

Service workers 本質上充當Web應用程序(服務端)與瀏覽器(客戶端)之間的代理服務器。
可以提供有效有效的離線體驗，攔截網絡請求。還可以推送通知。

Service Workers 需要注意的地方

需要支持 HTTPS 訪問你的頁面。出于安全原因，Service Workers 要求必須在 HTTPS 下才能運行。（其實好多API都需要HTTPS的支持）

資源路徑為根目錄的絕對路徑。最大作用域 (scope)，為資源路徑。
https://www.lilnong.top/static/js/sw-20190621.js的最大作用路徑為/static/js/

為了便于本地開發，localhost 也被瀏覽器認為是安全源。

在已經支持 serivce workers 的瀏覽器的版本中，很多特性沒有默認開啟。如果你發現示例代碼在當前版本的瀏覽器中怎么樣都無法正常運行，你可能需要開啟一下瀏覽器的相關配置：
Firefox Nightly: 訪問 about:config 并設置 dom.serviceWorkers.enabled 的值為 true; 重啟瀏覽器；
Chrome Canary: 訪問 chrome://flags 并開啟 experimental-web-platform-features; 重啟瀏覽器 (注意：有些特性在Chrome中沒有默認開放支持)；
Opera: 訪問 opera://flags 并開啟 ServiceWorker 的支持; 重啟瀏覽器。

service worker 聲明周期

下載

首次訪問service worker控制的網站或頁面時，service worker會立刻被下載。

至少每24小時它會被下載一次。

安裝

首次下載會嘗試安裝，

下載的文件是新的，嘗試進行安裝

激活

安裝成功后它會被激活

如果現有service worker已啟用，新版本會在后臺安裝，但不會被激活，這個時序稱為worker in waiting

直到所有已加載的頁面不再使用舊的service worker才會激活新的service worker。新的service worker會被激活（成為active worker）。

我們頁面引入sw.js內容為a。當我們修改為b。
這時候a和b都是已經安裝完畢的，但是a是當前正在用的。b需要等沒有頁面在用a，才會進入激活狀態。

Cache

Cache 為緩存的 Request/Response 對象對提供存儲機制。
當前我們作為 ServiceWorker 生命周期的一部分。盡管它被定義在 service worker 的標準中, 但是它不必一定要配合 service worker 使用。也暴露在 window 作用域下的。

Cache.add(request)
request 是一個字符串類型的 URL。如cache.add("https://www.lilnong.top/static/css/normalize-8.0.0.css")
功能上等于調用 fetch(), 然后使用 Cache.put()將 response 添加到 cache 中。

Cache.addAll(requests)
功能同上，只不過入參為字符串數組

Cache.match(request, options)
返回一個 Promise 對象，resolve 的結果是跟 Cache 對象匹配已經緩存的請求。
requres 同上，是要匹配的 URL
options 如下

ignoreSearch: 設置是否忽略url中的query。該選項默認為 false。

ignoreMethod: true匹配時就不會驗證 Request 對象的 http 方法 (通常只允許是 GET 或 HEAD 。) 該參數默認值為 false。

ignoreVary: 為 true 時匹配不進行 VARY 部分的匹配。例如，如果一個URL匹配，此時無論Response對象是否包含VARY頭部，都會認為是成功匹配。該參數默認為 false。

cacheName: 一個 DOMString ，代表一個具體的要被搜索的緩存。注意該選項被 Cache.match()方法忽略。

Cache.matchAll(request, options)
同上，返回一個Promise 對象，resolve的結果是跟Cache對象匹配的所有請求組成的數組。

Cache.put(request, response)
人為的，為一個URL設置response

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

Cache.keys(request, options)
返回一個Promise對象，resolve的結果是Cache對象key值(request 對象)組成的數組。

ServiceWorker 的使用

serviceWorkerContainer.register() 來注冊

注冊成功的話，會開啟另一個線程來做這件事。與我們的網頁是互不相干的。

service worker 現在可以接收事件。

service worker 控制的頁面打開后會嘗試去安裝 service worker。

最先發送給 service worker 的事件是安裝事件(在這個事件里可以開始進行填充 IndexDB和緩存站點資源)，讓所有資源可離線訪問。

當 oninstall 事件的處理程序執行完畢后，可以認為 service worker 安裝完成了。

當 service worker 安裝完成后，會接收到一個激活事件 onactivate 主要用途是清理先前版本的 service worker 腳本中使用的資源。

Service Worker 現在可以控制頁面了，但僅是在 register() 成功后的打開的頁面。

ServiceWorker 的注冊

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw-test/sw.js", { scope: "/sw-test/" }).then(function(reg) {
    // registration worked
    console.log("Registration succeeded. Scope is " + reg.scope);
  }).catch(function(error) {
    // registration failed
    console.log("Registration failed with " + error);
  });
}

微信公眾號

總結

測試路徑
https://www.lilnong.top/stati...

https

SW 通過fetch來實現代理瀏覽器請求。

SW 注冊之后會嘗試安裝。但是激活需要等下次（沒有再用的資源了）

SW 要注意他限制的域

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); 是一個封裝包

vue-cli也有一些webpack支持的工具

@vue/pwa

@vue/cli-plugin-pwa

參數中的request可以是

url 比如"https://www.lilnong.top/static/project/pwa-20190625/index.5.html"

也可以是Request對象。

可以直接用于保存（put），查找(match)，添加（add）

可以用于fetch

資料

Service_Worker_API --mdn

Service Workers --mdn

cache --mdn

AppCache --mdn
這個內容我覺得不用再關心了

前端每周清單半年盤點之 PWA 篇 ---王下邀月熊_Chevalier

傻傻分不清的Manifest

PWA之 workbox 學習

初探PWA

GPU云服務器云服務器初體驗 PWA Workers web workers

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

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

Service Workers （PWA 初體驗）

摘要：是一個注冊在指定源和路徑下的事件驅動。可以提供有效有效的離線體驗，攔截網絡請求。出于安全原因，要求必須在下才能運行。返回一個對象，的結果是對象值對象組成的數組。當事件的處理程序執行完畢后，可以認為安裝完成了。在前端越來越重的這個時代，頁面加載速度成為了一個重要的指標。對于這個問題，業界也有一些解決方案。瀏覽器緩存、協議緩存、強緩存懶加載（首屏） CDN 多域名突破下載并發限制。...

劉厚水 2019-08-23 18:18 評論0 收藏0
構建離線web應用（一）

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

Sanchi 2019-08-21 17:31 評論0 收藏0
[譯]介紹一下漸進式 Web App(離線) - Part 1

摘要：基本上是使用現代技術構建的網站但是體驗上卻像一個移動，在年，谷歌工程師和創造了。此后谷歌就一直致力于讓能給用戶像原生一般的體驗。檢查谷歌瀏覽器的和現在重載你的并且打開，到選項去查看面板，確保這個選項是勾選的。 Web開發多年來有了顯著的發展。它允許開發人員部署網站或Web應用程序并在數分鐘內為全球數百萬人服務。只需一個瀏覽器，用戶可以輸入URL就可以訪問Web應用程序了。隨著 Prog...

Wildcard 2019-08-02 16:00 評論0 收藏0
[譯]介紹一下漸進式 Web App(離線) - Part 1

摘要：基本上是使用現代技術構建的網站但是體驗上卻像一個移動，在年，谷歌工程師和創造了。此后谷歌就一直致力于讓能給用戶像原生一般的體驗。檢查谷歌瀏覽器的和現在重載你的并且打開，到選項去查看面板，確保這個選項是勾選的。 Web開發多年來有了顯著的發展。它允許開發人員部署網站或Web應用程序并在數分鐘內為全球數百萬人服務。只需一個瀏覽器，用戶可以輸入URL就可以訪問Web應用程序了。隨著 Prog...

gaara 2019-08-22 11:17 評論0 收藏0
[譯]介紹一下漸進式 Web App(離線) - Part 1

摘要：基本上是使用現代技術構建的網站但是體驗上卻像一個移動，在年，谷歌工程師和創造了。此后谷歌就一直致力于讓能給用戶像原生一般的體驗。檢查谷歌瀏覽器的和現在重載你的并且打開，到選項去查看面板，確保這個選項是勾選的。 Web開發多年來有了顯著的發展。它允許開發人員部署網站或Web應用程序并在數分鐘內為全球數百萬人服務。只需一個瀏覽器，用戶可以輸入URL就可以訪問Web應用程序了。隨著 Prog...

wenshi11019 2019-08-29 14:02 評論0 收藏0