摘要:在服務工作線程中,延長事件的壽命從而阻止瀏覽器在事件中的異步操作完成之前終止服務工作線程。在事件中,它延遲將視為已激活的,直到傳遞的被成功地。這主要用于確保任何功能事件不會被分派到對象,直到它升級數據庫模式并刪除過期的緩存條目。
看了很多介紹Service Worker的,看得都挺模糊的,所以決定自己寫一篇文件整理一下思路。
一、Service Worker API 名詞區分1、ServiceWorkerContainer:navigator.serviceWorker返回的就是Service WorkerContainer對象,主要是用戶在頁面注冊serviceWorker,調用方法:
navigator.serviceWorker.register(scriptURL, options) .then(function(ServiceWorkerRegistration) { ... })
2、ServiceWokrerGlobalScope:主要是用戶在sw.js文件的全局變量,即this的指向
3、ServiceWorkerRegistration:在頁面調用serviceWorker.register注冊返回一個Promise對象,當resolve時傳遞給then的函數參數就是ServiceWorkerRegistration.
4、ServiceWorker:表示ServiceWorkerRegistration.installing || ServiceWorkerRegistration.waiting || ServiceWorkerRegistration.active
1、index.html
2、sw.js
var CACHE_NAME = "sw-test-v1"; this.addEventListener("install",function(event){ console.log("installing..."); event.waitUntil(caches.open(CACHE_NAME).then(function(cache){ cache.addAll([ "images/resource01.jpg", "images/resource02.jpg", .... ]); })); }); this.addEventListener("fetch", function(event) { event.respondWith( caches.match(event.request) .then(function(response) { if (response) { // 緩存命中,返回緩存 return response; } // 請求是stream數據,只能使用一次,所以需要拷貝,一次用于緩存,一次用于瀏覽器請求 var fetchRequest = event.request.clone(); return fetch(fetchRequest) .then(function(response) { if(!response || response.status !== 200) { return response; } // 響應也是stream,只能使用一次,一次用于緩存,一次用于瀏覽器響應 var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; }); }) ); });
sw.js工作內容:首先監聽install事件,調用cache.addAll()方法將靜態資源加入緩存中。然后監聽fetch事件,判斷當前請求的url是否在緩存中,如果在則返回內容,如果不在,則向服務端發起請求數據,將返回的數據放入緩存中并且返回給瀏覽器。
代碼中的方法解析:
1、caches.match():檢查給定的Request對象或url字符串是否是一個已存儲的 Response對象的key. 該方法針對 Response 返回一個 Promise ,如果沒有匹配則返回 undefined 。cache對象按創建順序查詢,等同于在每個緩存上調用 cache.match() 方法 (按照caches.keys()返回的順序) 直到返回Response 對象。語法如下:
caches.match(request, options).then(function(response) { // Do something with the response });
參數解析:
options: 可選,配置對象中的屬性控制在匹配操作中如何進行匹配選擇,具體屬性如下:
ignoreSearch: Boolean值, 指定匹配過程是否應該忽略url中查詢參數,默認 false。
ignoreMethod: Boolean 值,當被設置為 true 時,將會阻止在匹配操作中對 Request請求的 http 方式的驗證 (通常只允許 GET 和 HEAD 兩種請求方式)。該參數默認為 false.
ignoreVary: Boolean 值,當該字段被設置為 true, 告知在匹配操作中忽略對VARY頭信息的匹配。換句話說,當請求 URL 匹配上,你將獲取匹配的 Response 對象,無論請求的 VARY 頭存在或者沒有。該參數默認為 false.
cacheName: DOMString 值, 表示所要搜索的緩存名稱。
2、caches.open():返回一個resolve為匹配 cacheName 的 cache 對象的 Promise .如果指定的 cache 不存在,則使用該 cacheName 創建一個新的cache并返回。
caches.open(cacheName).then(function(cache) {});
3、cache.addAll():將靜態資源加入緩存中
cache.addAll(requests[]).then(function() { // 已加入緩存 });
該方法會覆蓋掉以前存儲在緩存中的匹配的健值對,但是后面監聽對fetch事件中調用cache.put()方法又會覆蓋掉之前在cache.addAll()中添加到緩存中所匹配的健值對。
4、cache.put():允許將鍵/值對添加到當前的 Cache 對象中.它將覆蓋先前存儲在匹配請求的cache中的任何鍵/值對。
注意: Cache.add/Cache.addAll 不會緩存 Response.status 值不在200范圍內的響應,而 Cache.put 允許你存儲任何請求/響應對。因此,Cache.add/Cache.addAll 不能用于不透明的響應,而 Cache.put 可以。
cache.put(request, response).then(function() { // request/response pair has been added to the cache });
5、event.waitUntil():擴展了事件的生命周期。在服務工作線程中,延長事件的壽命從而阻止瀏覽器在事件中的異步操作完成之前終止服務工作線程。
在install事件中,它延遲將被安裝的worker視為 installing ,直到傳遞的 Promise 被成功地resolve。主要用于確保:服務工作線程在所有依賴的核心cache被緩存之前都不會被安裝。
在activate事件中,它延遲將 active worker視為已激活的,直到傳遞的 Promise 被成功地resolve。這主要用于確保:任何功能事件不會被分派到 ServiceWorkerGlobalScope 對象,直到它升級數據庫模式并刪除過期的緩存條目。
當該方法運行時,如果 Promise 是resolved,任何事情都不會發生;如果 Promise 是rejected,installing 或者 active worker的 state 會被設置為redundant。
語法:event.waitUntil(promise)
6、event.respondWith():阻止瀏覽器默認的fetch處理方法,允許用戶自己提供一個promise對象作為response返回。
fetchEvent.respondWith( // Promise that resolves to a Response. ?)
Parameters:A Promise for a Response.
上面的sw.js只是一個最基本的serviceWorker,在日常工作中,我們還需要考慮更新。
三、Service Worker更新 (一)自動更新this.addEventListener("install",function(event){ this.skipWaiting(); }); this.addEventListener("activate", function (event) { this.clients.claim(); });
skipWaiting(): 強制等待中的service worker跳過等待成為激活的service worker。雖然該方法在任何時候都是可以調用的,但是只有在新安裝的service worker仍然處于等待狀態時才會起作用;所以在install事件里面調用是非常常見的。與clients.claim()一起調用以確保更新當前的client和其他激活的clients。
clients.claim(): 允許一個激活的service worker將其設置為其他同scope下的clients的controller。該方法會觸發要被該service worker控制的其他任何clients的navigator.serviceWorker上的"controllerchange"事件。
當一個service worker初始注冊時并不會使用該service worker,直到下次加載頁面時。該方法會讓這些頁面直接被控制,注意,這將導致你的service worker將控制定期加載的頁面,也有可能控制其他service worker加載的頁面。
手動更新主要是調用在index.html注冊serviceWorker時的registration的update()方法:ServiceWorkerRegistration.update();
它會獲取worker的腳本URL,如果新的worker與當前的worker并不是完全相同的(byte-by-byte identical)則安裝新的worker;如果前一次worker獲取發生在24小時之前,則worker的獲取將繞過任何瀏覽器緩存。
navigator.serviceWorker.register("./sw.js").then(function(registration){ registration.update(); });
參考學習鏈接:
https://developer.mozilla.org...
https://developers.google.cn/...
https://lavas.baidu.com/pwa/o...
https://segmentfault.com/a/11...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/62098.html
摘要:二簡要介紹是一段腳本,在后臺運行。作為一個獨立的線程,不會對頁面造成阻塞。本質上充當應用程序與瀏覽器之間的代理服務器。可以做到離線使用消息推送后臺自動更新,的出現是正是為了使得也可以具有類似的能力。在我們的例子例,是在,的根目錄是。 一、背景 taro框架轉的h5,想在無網絡狀態下可以控制展示給用戶的界面,使用客戶端離線緩存可以達到目的,并且可以將靜態資源進行緩存,從而減少白屏時間,加...
摘要:引言這個是針對的。一般結合使用,因為請求級別的緩存與具有頁面攔截功能的最配。本周精讀的文章是,介紹了瀏覽器緩存接口的基本語法。包含任意命名空間,可以通過創建或訪問。精讀筆者利用實現了純瀏覽器端的后端渲染。前端精讀幫你篩選靠譜的內容。 1 引言 caches 這個 API 是針對 Request Response 的。caches 一般結合 Service Worker 使用,因為請求級...
摘要:的本質是一個,它獨立于主線程,因此它不能直接訪問,也不能直接訪問對象,但是,可以訪問對象,也可以通過消息傳遞的方式與主線程進行通信。的最佳用法其實就是配合做離線緩存。 什么是Service Worker Service Worker本質上充當Web應用程序與瀏覽器之間的代理服務器,也可以在網絡可用時作為瀏覽器和網絡間的代理。它們旨在(除其他之外)使得能夠創建有效的離線體驗,攔截網絡請...
摘要:是瀏覽器和服務器之間的腳本,主要作用是攔截請求,修改響應,以及一些其他的作用。這是出于安全因素的考慮。這個注冊的過程是發生在之外的。在安裝完成,激活之前,它不會攔截任何請求。將會始終攔截請求,重啟頁面也是為了這個。 pwa-之service worker 基本概念pwa-之service worker 離線文件處理 學習service worker 基本概念 在本章,將涵蓋以下內容 ...
摘要:是瀏覽器和服務器之間的腳本,主要作用是攔截請求,修改響應,以及一些其他的作用。這是出于安全因素的考慮。這個注冊的過程是發生在之外的。在安裝完成,激活之前,它不會攔截任何請求。將會始終攔截請求,重啟頁面也是為了這個。 pwa-之service worker 基本概念pwa-之service worker 離線文件處理 學習service worker 基本概念 在本章,將涵蓋以下內容 ...
閱讀 1754·2021-10-13 09:39
閱讀 1323·2019-08-30 13:58
閱讀 1415·2019-08-29 16:42
閱讀 3565·2019-08-29 15:41
閱讀 2997·2019-08-29 15:11
閱讀 2484·2019-08-29 14:10
閱讀 3414·2019-08-29 13:29
閱讀 2096·2019-08-26 13:27