狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

背景

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

Service Worker是什么？

官方解釋：Service Worker是一種特殊的 Web worker，是瀏覽器運(yùn)行在后臺(tái)與網(wǎng)頁(yè)主線程獨(dú)立的另一個(gè)線程，這種工作子線程的出現(xiàn)通常都是為了做一些比較耗費(fèi)性能的計(jì)算，有需要的時(shí)候再跟主線程通信，告知主線程它的計(jì)算結(jié)果，這樣將計(jì)算和渲染獨(dú)立開(kāi)來(lái)，從而就避免了阻塞的情況。

通俗理解：

Service Worker 是一種能夠在后臺(tái)運(yùn)行的獨(dú)立于網(wǎng)頁(yè)的腳本，它能夠攔截和處理網(wǎng)絡(luò)請(qǐng)求，然后根據(jù)一些條件來(lái)決定是請(qǐng)求本地的緩存還是云端的服務(wù)，再把請(qǐng)求到的內(nèi)容寫入本地的緩存來(lái)管理，所以即使在突然斷網(wǎng)的情況下它也能向用戶顯示內(nèi)容。

特點(diǎn)

1. 獨(dú)立于主線程：運(yùn)行在獨(dú)立的線程中，不會(huì)阻塞或干擾主線程的運(yùn)行。

2. 生命周期：有明確的生命周期，包括安裝、激活、運(yùn)行等狀態(tài)。

3. 攔截網(wǎng)絡(luò)請(qǐng)求：可以攔截網(wǎng)頁(yè)的網(wǎng)絡(luò)請(qǐng)求，并通過(guò)編程接口處理這些請(qǐng)求，比如返回緩存的數(shù)據(jù)或發(fā)起新的網(wǎng)絡(luò)請(qǐng)求。

4. 離線緩存：通過(guò)緩存管理，可以讓應(yīng)用在離線狀態(tài)下仍然能正常工作。

5. 推送通知：支持接收和展示推送通知，即使用戶沒(méi)有打開(kāi)相關(guān)網(wǎng)頁(yè)。

6. 不能直接訪問(wèn)/操作DOM

7. 需要時(shí)直接喚醒，不需要時(shí)休眠

Service Worker的生命周期

1. 安裝（Installation）:

   瀏覽器首先下載并解析編譯 Service Worker 的腳本文件。一旦解析和編譯成功，Service Worker 進(jìn)入安裝階段。在此階段，可以通過(guò)監(jiān)聽(tīng) install 事件來(lái)執(zhí)行初始化操作，例如預(yù)加載和緩存資源。

2. 激活（Activation）:

   安裝完成后，Service Worker 會(huì)被激活。在此階段，可以監(jiān)聽(tīng) activate 事件來(lái)執(zhí)行必要的清理操作，例如刪除舊版本的緩存資源。

3. 運(yùn)行（Running）:

   激活后，Service Worker 持續(xù)運(yùn)行在瀏覽器后臺(tái)，等待處理來(lái)自網(wǎng)頁(yè)的請(qǐng)求。它可以攔截和處理網(wǎng)絡(luò)請(qǐng)求、提供離線支持等。

4. 終止（Termination）:

   當(dāng)所有包含該 Service Worker 的頁(yè)面被關(guān)閉時(shí)，Service Worker 會(huì)被終止。瀏覽器可以根據(jù)資源利用情況隨時(shí)中止它，以節(jié)省內(nèi)存。

Service Worker 的基本用法

1. 注冊(cè) Service Worker

首先需要在主線程中注冊(cè) Service Worker：

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

3. 激活階段

在激活階段，我們可以清理舊的緩存。每當(dāng)資源更新時(shí)，我們都需要清除掉的緩存的數(shù)據(jù)，以節(jié)省存儲(chǔ)空間，并確保用戶獲取到的是最新資源。在 activate 事件中處理緩存的管理，可以防止舊的緩存干擾新的應(yīng)用邏輯。

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

self.addEventListener('fetch', function(event) { // 監(jiān)聽(tīng)頁(yè)面的網(wǎng)絡(luò)請(qǐng)求事件
  event.respondWith( // 使用 event.respondWith 來(lái)提供自定義的響應(yīng)
    caches.match(event.request).then(function(response) { // 在緩存中查找請(qǐng)求匹配的資源
      return response || fetch(event.request); // 如果緩存中有匹配的資源，則返回緩存資源；否則發(fā)起網(wǎng)絡(luò)請(qǐng)求
    })
  );
});

5. 推送通知

我們還可以通過(guò)Service Worker來(lái)處理推送通知，他的優(yōu)點(diǎn)是即使用戶不在網(wǎng)站上也可以收到通知。當(dāng)收到推送事件時(shí)，Service Worker 可以顯示一條通知，通知內(nèi)容可以根據(jù)推送數(shù)據(jù)或默認(rèn)設(shè)置來(lái)決定。

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

來(lái)源：https://juejin.cn/post/7398789000222097447 作者：zayyo