成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Service Workers （PWA 初體驗）

劉厚水 / 3434人閱讀

摘要：是一個注冊在指定源和路徑下的事件驅(qū)動?？梢蕴峁┯行в行У碾x線體驗，攔截網(wǎng)絡(luò)請求。出于安全原因，要求必須在下才能運行。返回一個對象，的結(jié)果是對象值對象組成的數(shù)組。當(dāng)事件的處理程序執(zhí)行完畢后，可以認(rèn)為安裝完成了。

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

瀏覽器緩存、協(xié)議緩存、強緩存

懶加載（首屏）

CDN 多域名突破下載并發(fā)限制。

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

Service Workers

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

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

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

Service Workers 需要注意的地方

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

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

為了便于本地開發(fā)，localhost 也被瀏覽器認(rèn)為是安全源。

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

service worker 聲明周期

下載

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

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

安裝

首次下載會嘗試安裝，

下載的文件是新的，嘗試進(jìn)行安裝

激活

安裝成功后它會被激活

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

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

我們頁面引入sw.js內(nèi)容為a。當(dāng)我們修改為b。
這時候a和b都是已經(jīng)安裝完畢的，但是a是當(dāng)前正在用的。b需要等沒有頁面在用a，才會進(jìn)入激活狀態(tài)。

Cache

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

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

Cache.addAll(requests)
功能同上，只不過入?yún)?strong>字符串?dāng)?shù)組

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

ignoreSearch: 設(shè)置是否忽略url中的query。該選項默認(rèn)為 false。

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

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

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

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

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

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

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

ServiceWorker 的使用

serviceWorkerContainer.register() 來注冊

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

service worker 現(xiàn)在可以接收事件。

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

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

當(dāng) oninstall 事件的處理程序執(zhí)行完畢后，可以認(rèn)為 service worker 安裝完成了。

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

Service Worker 現(xiàn)在可以控制頁面了，但僅是在 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);
  });
}
微信公眾號

總結(jié)

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

https

SW 通過fetch來實現(xiàn)代理瀏覽器請求。

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

參數(shù)中的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
這個內(nèi)容我覺得不用再關(guān)心了

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

傻傻分不清的Manifest

PWA之 workbox 學(xué)習(xí)

初探PWA

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105011.html

相關(guān)文章

  • Service Workers （PWA 初體驗）

    摘要：是一個注冊在指定源和路徑下的事件驅(qū)動?？梢蕴峁┯行в行У碾x線體驗，攔截網(wǎng)絡(luò)請求。出于安全原因，要求必須在下才能運行。返回一個對象，的結(jié)果是對象值對象組成的數(shù)組。當(dāng)事件的處理程序執(zhí)行完畢后，可以認(rèn)為安裝完成了。 在前端越來越重的這個時代，頁面加載速度成為了一個重要的指標(biāo)。對于這個問題，業(yè)界也有一些解決方案。 瀏覽器緩存、協(xié)議緩存、強緩存 懶加載（首屏） CDN 多域名突破下載并發(fā)限制。...

    twohappy 評論0 收藏0

  • 構(gòu)建離線web應(yīng)用（一）

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

    Sanchi 評論0 收藏0

  • [譯]介紹一下漸進(jìn)式 Web App(離線) - Part 1

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

    Wildcard 評論0 收藏0

  • [譯]介紹一下漸進(jìn)式 Web App(離線) - Part 1

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

    gaara 評論0 收藏0

  • [譯]介紹一下漸進(jìn)式 Web App(離線) - Part 1

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

    wenshi11019 評論0 收藏0

發(fā)表評論

0條評論

劉厚水

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<