日本xxxx18视频在线观看-日本xxxx1819-日本xxxwww在线观看-日本xxx-日本xx-日本www在线视频

背景

隨著 Web 技術的飛速發展，用戶對網站的要求越來越高，為了達到用戶期望，開發者使出了渾身解數來做性能優化，包括 CDN 內容分發、圖片合并、資源文件壓縮、異步加載等等手段，這些手段絕大部分都是在干一件事情，那就是加快資源的加載速度，盡量減少白屏時間。而 service worker 的出現不僅能使頁面達到秒開的效果，還能讓網站在弱網甚至無網的情況下依然能做出很好的響應。讓從前只有原生 APP 才可以做到的離線使用功能。在web頁面上也能實現。

Service Worker是什么？

官方解釋：Service Worker是一種特殊的 Web worker，是瀏覽器運行在后臺與網頁主線程獨立的另一個線程，這種工作子線程的出現通常都是為了做一些比較耗費性能的計算，有需要的時候再跟主線程通信，告知主線程它的計算結果，這樣將計算和渲染獨立開來，從而就避免了阻塞的情況。

通俗理解：

Service Worker 是一種能夠在后臺運行的獨立于網頁的腳本，它能夠攔截和處理網絡請求，然后根據一些條件來決定是請求本地的緩存還是云端的服務，再把請求到的內容寫入本地的緩存來管理，所以即使在突然斷網的情況下它也能向用戶顯示內容。

特點

1. 獨立于主線程：運行在獨立的線程中，不會阻塞或干擾主線程的運行。

2. 生命周期：有明確的生命周期，包括安裝、激活、運行等狀態。

3. 攔截網絡請求：可以攔截網頁的網絡請求，并通過編程接口處理這些請求，比如返回緩存的數據或發起新的網絡請求。

4. 離線緩存：通過緩存管理，可以讓應用在離線狀態下仍然能正常工作。

5. 推送通知：支持接收和展示推送通知，即使用戶沒有打開相關網頁。

6. 不能直接訪問/操作DOM

7. 需要時直接喚醒，不需要時休眠

Service Worker的生命周期

1. 安裝（Installation）:

   瀏覽器首先下載并解析編譯 Service Worker 的腳本文件。一旦解析和編譯成功，Service Worker 進入安裝階段。在此階段，可以通過監聽 install 事件來執行初始化操作，例如預加載和緩存資源。

2. 激活（Activation）:

   安裝完成后，Service Worker 會被激活。在此階段，可以監聽 activate 事件來執行必要的清理操作，例如刪除舊版本的緩存資源。

3. 運行（Running）:

   激活后，Service Worker 持續運行在瀏覽器后臺，等待處理來自網頁的請求。它可以攔截和處理網絡請求、提供離線支持等。

4. 終止（Termination）:

   當所有包含該 Service Worker 的頁面被關閉時，Service Worker 會被終止。瀏覽器可以根據資源利用情況隨時中止它，以節省內存。

Service Worker 的基本用法

1. 注冊 Service Worker

首先需要在主線程中注冊 Service Worker：

self.addEventListener('install', function(event) { // 監聽 Service Worker 的安裝事件
  event.waitUntil( // 使用 event.waitUntil 來確保 Service Worker 在完成任務前不會終止
    caches.open('my-cache-v1').then(function(cache) { // 打開一個名為 'my-cache-v1' 的緩存空間
      return cache.addAll([ // 將指定的資源列表添加到緩存中
        '/', // 緩存網站的根路徑
        '/index.html', // 緩存主頁文件
        '/styles.css', // 緩存樣式表文件
        '/script.js', // 緩存 JavaScript 腳本文件
        '/image.png' // 緩存圖片文件
      ]);
    })
  );
});

3. 激活階段

在激活階段，我們可以清理舊的緩存。每當資源更新時，我們都需要清除掉的緩存的數據，以節省存儲空間，并確保用戶獲取到的是最新資源。在 activate 事件中處理緩存的管理，可以防止舊的緩存干擾新的應用邏輯。

self.addEventListener('activate', function(event) { // 監聽 Service Worker 的激活事件
  event.waitUntil( // 使用 event.waitUntil 確保任務在 Service Worker 激活前完成
    caches.keys().then(function(cacheNames) { // 獲取所有緩存的名稱
      return Promise.all( // 等待所有刪除舊緩存的操作完成
        cacheNames.filter(function(cacheName) { // 過濾出不是當前版本緩存的名稱
          return cacheName !== 'my-cache-v1'; // 當前版本緩存的名稱為 'my-cache-v1'
        }).map(function(cacheName) { // 映射每個不需要的緩存名稱
          return caches.delete(cacheName); // 刪除不再需要的緩存
        })
      );
    })
  );
});

self.addEventListener('fetch', function(event) { // 監聽頁面的網絡請求事件
  event.respondWith( // 使用 event.respondWith 來提供自定義的響應
    caches.match(event.request).then(function(response) { // 在緩存中查找請求匹配的資源
      return response || fetch(event.request); // 如果緩存中有匹配的資源，則返回緩存資源；否則發起網絡請求
    })
  );
});

5. 推送通知

我們還可以通過Service Worker來處理推送通知，他的優點是即使用戶不在網站上也可以收到通知。當收到推送事件時，Service Worker 可以顯示一條通知，通知內容可以根據推送數據或默認設置來決定。

self.addEventListener('push', function(event) { // 監聽推送通知事件
  const title = '推送通知'; // 定義通知的標題
  const options = { // 定義通知的選項
    body: event.data ? event.data.text() : '您有新消息', // 如果推送消息有數據，使用數據內容作為通知正文；否則顯示默認消息
    icon: '/icon.png', // 通知的圖標
    badge: '/badge.png' // 通知的徽章圖標
  };
  event.waitUntil( // 確保在顯示通知前完成任務
    self.registration.showNotification(title, options) // 顯示通知
  );
});

來源：https://juejin.cn/post/7398789000222097447 作者：zayyo