国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Service Worker 淺析

The question / 3019人閱讀

摘要：可以發(fā)送通知消息以再次吸引用戶并留住他們。在即時(shí)通訊等使用情形中，一條消息可將最多的有效負(fù)載傳送至客戶端應(yīng)用。瀏覽器的的消息推送主要依賴，服務(wù)端消息推送傳遞到，然后再由推送到客戶端。

引言

Progressive Web App, 簡(jiǎn)稱 PWA，是提升 Web App 的體驗(yàn)的一種新方法，能給用戶原生應(yīng)用的體驗(yàn)。Service Worker 是 PWA 中的重要一部分。Service Worker 可以監(jiān)聽當(dāng)前域下的功能性事件，比如攔截和處理網(wǎng)絡(luò)請(qǐng)求、推送通知（push）、后臺(tái)同步（sync），今天我們來(lái)了解一下 Service Worker

什么是 Service Worker

Service worker (簡(jiǎn)稱 SW) 是一個(gè)注冊(cè)在指定源和路徑下的事件驅(qū)動(dòng) Worker。它采用 JavaScript 控制關(guān)聯(lián)的頁(yè)面或者網(wǎng)站，攔截并修改訪問(wèn)和資源請(qǐng)求，細(xì)粒度地緩存資源。你可以完全控制應(yīng)用在特定情形（最常見的情形是網(wǎng)絡(luò)不可用）下的表現(xiàn)。

開始編寫一個(gè)簡(jiǎn)單的 SW 注冊(cè) Service Worker

首先，我們通過(guò) js 代碼調(diào)用瀏覽器的 api，注冊(cè) SW，告訴瀏覽器 SW 文件的位置，Service Worker 支持 promise，所以寫起來(lái)非常方便

// main.js
if (navigator.serviceWorker) {
  window.addEventListener("DOMContentLoaded", () => {
    navigator.serviceWorker
      .register("sw.js")
      .then(function(swReg) {
        console.log("sucess ~", swReg);
      })
      .catch(function(error) {
        console.error("fail !", error);
      })
  }) 
}

sw 存在作用域的概念，上面注冊(cè)的作用域?yàn)?"/"，如果注冊(cè)的 js 文件地址為 "a/sw.js"，則 sw 的作用域?yàn)?"/a"

開始緩存

接下來(lái)的代碼編寫主要集中在 sw.js (sw 加載的 js 文件) 文件中，在 Service Worker 安裝過(guò)程中，我們進(jìn)行數(shù)據(jù)的緩存。緩存文件的重要角色是瀏覽器的 Cache API，將數(shù)據(jù)緩存下來(lái)。

const cacheName = "myCache"
const cacheArray = [
  "/index.html",
  "/index.css",
  "/main.js"
]

self.addEventListener("install", function(event) {
  // Perform install steps
  event.waitUntil(
    // 打開一個(gè) Cache 對(duì)象
    caches.open(CACHE_NAME)
      .then(function(cache) {
        // 緩存數(shù)組中的內(nèi)容
        return cache.addAll(urlsToCache);
      })
  )
})
因?yàn)橐粋€(gè) Worker是使用一個(gè)構(gòu)造函數(shù)創(chuàng)建的一個(gè)對(duì)象運(yùn)行一個(gè)命名的JavaScript文件。這個(gè)文件包含將在工作線程中運(yùn)行的代碼，運(yùn)行在另一個(gè)全局上下文中，不同于當(dāng)前的window。在 sw.js 中，無(wú)法使用 window、操作 DOM 等，使用 self 關(guān)鍵字，來(lái)實(shí)引用 DedicatedWorkerGlobalScope。
如果所有文件都成功緩存，則將安裝 Service Worker。 如有任何文件無(wú)法下載，則安裝步驟將失敗。也意味著 Service Worker 啟動(dòng)失敗


event.waitUntil 確保瀏覽器關(guān)閉也仍然能夠執(zhí)行
緩存和代理請(qǐng)求

Service Worker 能夠?qū)崿F(xiàn)離線功能，主要是擁有代理請(qǐng)求的功能，我們能夠在請(qǐng)求的時(shí)候有自己的操作空間，請(qǐng)求優(yōu)先，請(qǐng)求失敗從 Cache 讀取緩存；請(qǐng)求成功，更新緩存。

self.addEventListener("fetch", (event) => {
  if (event.request.mode === "navigate") {
    return event.respondWith(
      fetch(event.request).catch(() =>                            
      caches.match(OFFLINE_URL))
    )
  }
})
event.respondWith
接收推送消息

在 sw.js 的內(nèi)部通過(guò)事件監(jiān)聽的方式執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)，接收外部的推送信息，只需要添加 push 事件監(jiān)聽即可

self.addEventListener("push", function(event) {
  const options = {
    body: "Yay it works.",
    icon: "images/icon.png",
    badge: "images/badge.png"
  }

  self.registration.showNotification(title, options);
})
消息推送，配合 Web Server For Chrome 更方便~
開啟后臺(tái)同步功能

在瀏覽器無(wú)網(wǎng)絡(luò)請(qǐng)情況下，服務(wù)端推送消息，瀏覽器無(wú)法接收到，但是當(dāng)網(wǎng)絡(luò)連通時(shí)，瀏覽器就可以接收到服務(wù)端推送的信息。瀏覽器的請(qǐng)求也可以實(shí)現(xiàn)同樣的功能，通過(guò)特殊的方式發(fā)送請(qǐng)求，網(wǎng)絡(luò)連通時(shí)，請(qǐng)求才會(huì)發(fā)出去。

// 請(qǐng)求
navigator.serviceWorker.ready.then((registration) => {
  // 區(qū)分不同的事件
  const tag = "tag";
  registration.sync.register(tag).then(() => {
    // do something...
  })
})

// 事件監(jiān)聽
// sw.js
self.addEventListener("sync", function (e) {
  console.log(e.tag === "tag")  // true
  e.waitUntil(...)
})
工作周期

圖片來(lái)源，侵刪

初始化階段: 頁(yè)面加載、解析 Service Worker 的 js 文件

安裝階段: 安裝 Service Worker ，通常在安裝中執(zhí)行緩存

工作階段：監(jiān)聽各種事件，執(zhí)行工作

待機(jī)階段：網(wǎng)頁(yè)關(guān)閉，Service Worker 在瀏覽器處于"靜默"的狀態(tài)，有事件同送等重新開始，隨后再次"靜默"

更新階段：新的 sw 觸發(fā) install 事件，舊的 sw 出發(fā) activate 事件

Firebase 云信息傳遞 (FCM)

Firebase 云信息傳遞 (FCM) 是一種跨平臺(tái)消息傳遞解決方案，可供您免費(fèi)、可靠地傳遞消息。可以發(fā)送通知消息以再次吸引用戶并留住他們。在即時(shí)通訊等使用情形中，一條消息可將最多 4KB 的有效負(fù)載傳送至客戶端應(yīng)用。

瀏覽器的 Service Worker 的消息推送主要依賴 FCM，服務(wù)端消息推送傳遞到 FCM，然后再由 FCM 推送到客戶端。

傳動(dòng)門

參考鏈接：

Push Companion

Goole 官方文檔

掘金 - 使用Service Worker發(fā)送Push推送

知乎 - PWA 入門: 理解和創(chuàng)建 Service Worker 腳本

掘金 - 使用Service Worker進(jìn)行后臺(tái)同步

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/109225.html

相關(guān)文章

  • React Native Debug原理淺析

    摘要：過(guò)程涉及到三個(gè)對(duì)象，一個(gè)是或，一個(gè)是，另外一個(gè)就是瀏覽器或或其他。在中進(jìn)行配置了，也就是會(huì)執(zhí)行腳本。然后會(huì)給這個(gè)注冊(cè)一些監(jiān)聽在收到消息時(shí)會(huì)回調(diào)。發(fā)出一個(gè)消息讓瀏覽器準(zhǔn)備的運(yùn)行環(huán)境在收到消息會(huì)調(diào)用。 第一次在segmentfault寫博客，很緊張~~~公司項(xiàng)目上ReactNative,之前也是沒(méi)有接觸過(guò)，所以也是一邊學(xué)習(xí)一邊做項(xiàng)目了，最近騰出手來(lái)更新總結(jié)了一下RN的Debug的一個(gè)小知識(shí)...

    senntyou 評(píng)論0 收藏0

  • React Native Debug原理淺析

    摘要：過(guò)程涉及到三個(gè)對(duì)象，一個(gè)是或，一個(gè)是，另外一個(gè)就是瀏覽器或或其他。在中進(jìn)行配置了，也就是會(huì)執(zhí)行腳本。然后會(huì)給這個(gè)注冊(cè)一些監(jiān)聽在收到消息時(shí)會(huì)回調(diào)。發(fā)出一個(gè)消息讓瀏覽器準(zhǔn)備的運(yùn)行環(huán)境在收到消息會(huì)調(diào)用。 第一次在segmentfault寫博客，很緊張~~~公司項(xiàng)目上ReactNative,之前也是沒(méi)有接觸過(guò)，所以也是一邊學(xué)習(xí)一邊做項(xiàng)目了，最近騰出手來(lái)更新總結(jié)了一下RN的Debug的一個(gè)小知識(shí)...

    avwu 評(píng)論0 收藏0

  • 淺析k8s service的應(yīng)用

    摘要：前言最近在產(chǎn)品新版本的服務(wù)發(fā)現(xiàn)和負(fù)載均衡方案上遇到了一個(gè)問(wèn)題，在盡量不改動(dòng)原生使用方式和代碼前提下，對(duì)又重新復(fù)習(xí)了一遍，略有體會(huì)。所有訪問(wèn)該的請(qǐng)求，都會(huì)被轉(zhuǎn)發(fā)到后端的中。使用這種方案的原因，不外乎是外部無(wú)法訪問(wèn)容器服務(wù)。 前言 最近在產(chǎn)品新版本的服務(wù)發(fā)現(xiàn)和負(fù)載均衡方案上遇到了一個(gè)問(wèn)題，在盡量不改動(dòng)原生k8s使用方式和代碼前提下，對(duì)service又重新復(fù)習(xí)了一遍，略有體會(huì)。 Servic...

    Clect 評(píng)論0 收藏0

  • cas工作原理淺析與總結(jié)

    摘要：是大學(xué)發(fā)起的一個(gè)企業(yè)級(jí)的開源的項(xiàng)目，旨在為應(yīng)用系統(tǒng)提供一種可靠的單點(diǎn)登錄解決方法屬于。實(shí)現(xiàn)原理是先通過(guò)的認(rèn)證，然后向申請(qǐng)一個(gè)針對(duì)于的，之后在訪問(wèn)時(shí)把申請(qǐng)到的針對(duì)于的以參數(shù)傳遞過(guò)去。后面的流程與上述流程步驟及以后步驟類似 CAS（ Central Authentication Service ）是 Yale 大學(xué)發(fā)起的一個(gè)企業(yè)級(jí)的、開源的項(xiàng)目，旨在為 Web 應(yīng)用系統(tǒng)提供一種可靠的單點(diǎn)登...

    warkiz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<