Service Worker 淺析

The question 發布于2019-08-26 13:38 / 3030人閱讀

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

引言

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

什么是 Service Worker

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

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

首先，我們通過 js 代碼調用瀏覽器的 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 安裝過程中，我們進行數據的緩存。緩存文件的重要角色是瀏覽器的 Cache API，將數據緩存下來。

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) {
        // 緩存數組中的內容
        return cache.addAll(urlsToCache);
      })
  )
})

因為一個 Worker是使用一個構造函數創建的一個對象運行一個命名的JavaScript文件。這個文件包含將在工作線程中運行的代碼，運行在另一個全局上下文中，不同于當前的window。在 sw.js 中，無法使用 window、操作 DOM 等，使用 self 關鍵字，來實引用 DedicatedWorkerGlobalScope。

如果所有文件都成功緩存，則將安裝 Service Worker。如有任何文件無法下載，則安裝步驟將失敗。也意味著 Service Worker 啟動失敗

event.waitUntil 確保瀏覽器關閉也仍然能夠執行

緩存和代理請求

Service Worker 能夠實現離線功能，主要是擁有代理請求的功能，我們能夠在請求的時候有自己的操作空間，請求優先，請求失敗從 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 的內部通過事件監聽的方式執行對應的回調函數，接收外部的推送信息，只需要添加 push 事件監聽即可

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 更方便~

開啟后臺同步功能

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

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

// 事件監聽
// sw.js
self.addEventListener("sync", function (e) {
  console.log(e.tag === "tag")  // true
  e.waitUntil(...)
})

工作周期

圖片來源，侵刪

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

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

工作階段：監聽各種事件，執行工作

待機階段：網頁關閉，Service Worker 在瀏覽器處于"靜默"的狀態，有事件同送等重新開始，隨后再次"靜默"

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

Firebase 云信息傳遞 (FCM)

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

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

傳動門

參考鏈接：

Push Companion

Goole 官方文檔

掘金 - 使用Service Worker發送Push推送

知乎 - PWA 入門: 理解和創建 Service Worker 腳本

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109225.html

React Native Debug原理淺析

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

senntyou 2019-08-22 15:17 評論0 收藏0
React Native Debug原理淺析

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

avwu 2019-08-01 18:40 評論0 收藏0
淺析k8s service的應用

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

Clect 2019-07-01 16:41 評論0 收藏0
cas工作原理淺析與總結

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

warkiz 2019-08-15 15:48 評論0 收藏0