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

資訊專欄INFORMATION COLUMN

Service Worker 淺析

The question / 3036人閱讀

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

引言

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

什么是 Service Worker

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

開始編寫一個簡單的 SW 注冊 Service Worker

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

// 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 存在作用域的概念，上面注冊的作用域為 "/"，如果注冊的 js 文件地址為 "a/sw.js"，則 sw 的作用域為 "/a"

開始緩存

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

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

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


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

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

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)部通過事件監(jiān)聽的方式執(zhí)行對應(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 更方便~
開啟后臺同步功能

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

// 請求
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(...)
})
工作周期

圖片來源，侵刪

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

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

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

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

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

Firebase 云信息傳遞 (FCM)

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

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

傳動門

參考鏈接：

Push Companion

Goole 官方文檔

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

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

掘金 - 使用Service Worker進行后臺同步

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

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

相關(guān)文章

  • React Native Debug原理淺析

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

    senntyou 評論0 收藏0

  • React Native Debug原理淺析

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

    avwu 評論0 收藏0

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

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

    Clect 評論0 收藏0

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

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

    warkiz 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<