JavaScriptAPI中ServiceWorke簡(jiǎn)介是怎樣的

Service Worker JavaScript API簡(jiǎn)介是怎樣的，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

我們提供的服務(wù)有：成都網(wǎng)站制作、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、包河ssl等。為上千余家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的包河網(wǎng)站制作公司

service worker 是什么

Service Worker 是 Chrome 團(tuán)隊(duì)提出和力推的一個(gè) WEB API，用于給 web 應(yīng)用提供高級(jí)的可持續(xù)的后臺(tái)處理能力。該 WEB  API 標(biāo)準(zhǔn)起草于 2013 年，于 2014 年納入 W3C WEB 標(biāo)準(zhǔn)草案，當(dāng)前還在草案階段。

Service Worker 最主要的特點(diǎn)是：在頁(yè)面中注冊(cè)并安裝成功后，運(yùn)行于瀏覽器后臺(tái)，不受頁(yè)面刷新的影響，可以監(jiān)聽和截?cái)r作用域范圍內(nèi)所有頁(yè)面的  HTTP 請(qǐng)求。

類似一個(gè)服務(wù)器與瀏覽器之間的中間人角色，如果網(wǎng)站中注冊(cè)了service worker  那么它可以攔截當(dāng)前網(wǎng)站所有的請(qǐng)求，進(jìn)行判斷(需要編寫相應(yīng)的判斷程序)，如果需要向服務(wù)器發(fā)起請(qǐng)求的就轉(zhuǎn)給服務(wù)器，如果可以直接使用緩存的就直接返回緩存不再轉(zhuǎn)給服務(wù)器。從而大大提高瀏覽體驗(yàn)。

Service Worker 可以啟用以前原生應(yīng)用程序?qū)Ｓ械囊唤M功能。Service Worker  的初稿已于2014年發(fā)布，現(xiàn)在所有主流瀏覽器都支持它們。

就像已經(jīng)指出的定義一樣，Service Worker  是網(wǎng)絡(luò)代理。這意味著它們可以控制頁(yè)面中的所有網(wǎng)絡(luò)請(qǐng)求，并且可以對(duì)其進(jìn)行編程，使用緩存的進(jìn)行響應(yīng)。

Service Worker 特點(diǎn)

• 網(wǎng)站必須使用 HTTPS。除了使用本地開發(fā)環(huán)境調(diào)試時(shí)(如域名使用 localhost)

• 運(yùn)行于瀏覽器后臺(tái)，可以控制打開的作用域范圍下所有的頁(yè)面請(qǐng)求

• 單獨(dú)的作用域范圍，單獨(dú)的運(yùn)行環(huán)境和執(zhí)行線程

• 不能操作頁(yè)面 DOM。但可以通過(guò)事件機(jī)制來(lái)處理

如何注冊(cè) Service Worker

注冊(cè) Service Worker 不需要太多代碼，只需要一個(gè)用于Service Worker 代碼的 JS 文件，一般取名為  service-worker.js

// 首先檢查瀏覽器是否支持 Service Worker if ('serviceWorker' in navigator) {   navigator.serviceWorker     .register('/sw/service-worker.js')     .then(function(registration) {       console.log(registration);     })     .catch(function(err) {       console.log(err);     }); }

其實(shí)關(guān)鍵代碼只有一行：

navigator.serviceWorker.register('/sw/service-worker.js')

注意：

Service Worker 的注冊(cè)路徑?jīng)Q定了其 scope 默認(rèn)作用范圍。示例中 service-worker.js 是在 /sw 路徑下，這使得該  Service Worker 默認(rèn)只會(huì)收到 /sw 路徑下的 fetch事件。如果存放在網(wǎng)站的根路徑下，則將會(huì)收到該網(wǎng)站的所有 fetcg事件。

如果希望改變它的作用域，可在第二個(gè)參數(shù)設(shè)置 scope范圍。示例中將其改為了根目錄，即對(duì)整個(gè)站點(diǎn)生效。

另外應(yīng)意識(shí)到這一點(diǎn)：Service Worker 沒有頁(yè)面作用域的概念，作用域范圍內(nèi)的所有頁(yè)面請(qǐng)求都會(huì)被當(dāng)前激活的 Service Worker  所監(jiān)控。

Service Worker 可以啟用哪些功能?

在本節(jié)中，我將進(jìn)一步詳細(xì)介紹Service Worker的功能，包括一些小代碼示例。

服務(wù)工作者啟用以下功能，這些功能也是 PWA的核心：

• 離線功能

• 定期后臺(tái)同步

• 推送通知

離線功能

Service Worke 通過(guò)緩存資源和攔截網(wǎng)絡(luò)請(qǐng)求來(lái)提供離線功能，這些請(qǐng)求可以與先前緩存的資源一起使用，而不是重新請(qǐng)求服務(wù)器。

我們可以從中得出兩個(gè)步驟：

• 預(yù)緩存

• 從緩存中處理請(qǐng)求

這兩個(gè)步驟都利用了Cache API，它由 Web Workers 和瀏覽器使用，并且為我們提供了用于網(wǎng)絡(luò)請(qǐng)求的存儲(chǔ)機(jī)制。

對(duì) Web 和服務(wù)工作人員上下文的 localStorage 訪問(wèn)被阻止，以防止并發(fā)性問(wèn)題。作為一種替代方案，IndexedDB  可以用于存儲(chǔ)大量數(shù)據(jù)。

預(yù)緩存

預(yù)緩存是一個(gè)術(shù)語(yǔ)，描述了在 Service Worker 處于激活狀態(tài)之前下載和緩存文件。它是在 Service Worker 生命周期的“install  ”步驟中完成的。一旦 Service Worker 處于激活狀態(tài)，它將準(zhǔn)備為緩存中的文件提供服務(wù)。

通常，我們要緩存 Application  Shell，這是運(yùn)行網(wǎng)站所需的最少代碼量。如果開發(fā)了本機(jī)應(yīng)用程序，那么這就是您將上傳到應(yīng)用程序商店的代碼包。這包括所有必需的基本JavaScript，HTML和圖片。

self.addEventListener('install', function(event) {   event.waitUntil(     caches.open(currentCache.offline).then(function(cache) {       return cache.addAll([         '/static/images/offline.svg',         '/static/html/offline.html',       ]);     });   ); });

從緩存中處理請(qǐng)求

在此階段，我們已經(jīng)將所有應(yīng)用程序代碼存儲(chǔ)在緩存中，并且Service Worker 已處于激活即運(yùn)行于瀏覽器后臺(tái)。

現(xiàn)在唯一缺少的是監(jiān)聽 fetch 事件并從緩存中返回結(jié)果?？梢酝ㄟ^(guò) fetch 事件可以攔截到當(dāng)前作用域范圍內(nèi)的 http/https  請(qǐng)求，并且給出自己的響應(yīng)。結(jié)合 Fetch API ，可以簡(jiǎn)單方便地處理請(qǐng)求響應(yīng)，實(shí)現(xiàn)對(duì)網(wǎng)絡(luò)請(qǐng)求的控制。

self.addEventListener('fetch', function(event) {   event.respondWith(     caches.match(event.request).then(function(response) {       return response || fetch(event.request);     })   ); });

在本例中，我們盡可能使用緩存的內(nèi)容進(jìn)行響應(yīng)。作為回退，我們發(fā)出一個(gè)網(wǎng)絡(luò)請(qǐng)求。

這里實(shí)現(xiàn)了一個(gè)緩存優(yōu)先、降級(jí)處理的策略邏輯：監(jiān)控所有 http 請(qǐng)求，當(dāng)請(qǐng)求資源已經(jīng)在緩存里了，直接返回緩存里的內(nèi)容;否則使用 fetch API  繼續(xù)請(qǐng)求，如果是 圖片或 css、js 資源，請(qǐng)求成功后將他們加入緩存中;如果是離線狀態(tài)或請(qǐng)求出錯(cuò)，則降級(jí)返回預(yù)緩存的離線內(nèi)容。

定期后臺(tái)同步

正如在引言中已經(jīng)提到的那樣，Service Worker  與其他服務(wù)工作者在一個(gè)單獨(dú)的線程上運(yùn)行，所以即使關(guān)閉頁(yè)面，它們也可以執(zhí)行其代碼。此功能對(duì)于執(zhí)行后臺(tái)同步和提供推送通知很重要。

后臺(tái)同步

用戶離開頁(yè)面后，后臺(tái)同步通常用于同步數(shù)據(jù)。

例如，在手機(jī)上編輯文檔后，我們寫完會(huì)點(diǎn)擊“保存”并離開頁(yè)面。如果在編輯文檔期間連接斷開，我們必須等待連接恢復(fù)才能保存文檔。

后臺(tái)同步的目的是解決這個(gè)問(wèn)題，一旦連接重新建立，自動(dòng)發(fā)送數(shù)據(jù)。

來(lái)看一個(gè)示例：

app.js

navigator.serviceWorker.ready.then((registration) => {   return registration.sync.register('sync-save-document'); });

service-worker.js

self.addEventListener('sync', (event) => {   if (event.tag === 'sync-save-document') {     event.waitUntil(saveDocument());   } });

saveDocument是一個(gè)返回 Promise，如果被拒絕(例如由于網(wǎng)絡(luò)問(wèn)題)，同步將自動(dòng)重試。

要注意的一件事是，同步標(biāo)記必須是唯一的。例如，如果我要安排5個(gè)“message”類型的后臺(tái)同步，則只有最后一個(gè)會(huì)通過(guò)。因此，在這種情況下，每個(gè)標(biāo)簽都應(yīng)具有唯一的標(biāo)識(shí)符。

定期后臺(tái)同步

定期后臺(tái)同步解決與正常后臺(tái)同步不同的問(wèn)題。該API可用于在后臺(tái)更新數(shù)據(jù)，而不必等待用戶。

這對(duì)很多應(yīng)用程序都很有用。有了這項(xiàng)技術(shù)，用戶可以在沒有互聯(lián)網(wǎng)連接的情況下閱讀最新的新聞文章。

為了防止濫用這一功能，同步的頻率取決于瀏覽器為每個(gè)網(wǎng)站設(shè)置的站點(diǎn)參與度分?jǐn)?shù)。如果你經(jīng)常打開一個(gè)網(wǎng)頁(yè)應(yīng)用，這個(gè)頻率最多可以達(dá)到12個(gè)小時(shí)。

要實(shí)現(xiàn)此目的一個(gè)要求是，該網(wǎng)站已作為移動(dòng)設(shè)備上的 PWA 安裝并添加到主屏幕。

推送通知

Service Worker另一個(gè)類似本機(jī)的特性是推送通知。我們通常通過(guò)手機(jī)短信或社交媒體通知的形式知道它們，但它們也可以在臺(tái)式電腦上使用。

除Safari之外，所有主流瀏覽器都支持它們，而Safari對(duì)桌面應(yīng)用程序有自己的實(shí)現(xiàn)。

要使用推送通知，需要設(shè)置一臺(tái)服務(wù)器，該服務(wù)器會(huì)將通知推送給所有客戶端。由于Service  Worker在后臺(tái)在另一個(gè)線程上運(yùn)行，因此即使頁(yè)面當(dāng)前未打開，用戶也可以看到推送通知。

推送的實(shí)現(xiàn)有兩步：

不同瀏覽器需要用不同的推送消息服務(wù)器。以 Chrome 上使用 Google Cloud Messaging作為推送服務(wù)為例，第一步是注冊(cè)  applicationServerKey(通過(guò) GCM  注冊(cè)獲取)，并在頁(yè)面上進(jìn)行訂閱或發(fā)起訂閱。每一個(gè)會(huì)話會(huì)有一個(gè)獨(dú)立的端點(diǎn)(endpoint)，訂閱對(duì)象的屬性(PushSubscription.endpoint)  即為端點(diǎn)值。將端點(diǎn)發(fā)送給服務(wù)器后，服務(wù)器用這一值來(lái)發(fā)送消息給會(huì)話的激活的 Service Worker (通過(guò) GCM 與瀏覽器客戶端溝通)。

瀏覽器支持情況

除了 Safari 和 IE/Edge，大部分現(xiàn)代瀏覽器都已經(jīng)得到了支持。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

網(wǎng)頁(yè)名稱：JavaScriptAPI中ServiceWorke簡(jiǎn)介是怎樣的
本文鏈接：http://muchs.cn/article12/pdpdgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、軟件開發(fā)、品牌網(wǎng)站設(shè)計(jì)、域名注冊(cè)、搜索引擎優(yōu)化、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)