服務(wù)工作者和PWA通過結(jié)合背景腳本，緩存和類似應(yīng)用程序的功能來啟用離線第一的Web應(yīng)用程序。 1。服務(wù)工作者用作網(wǎng)絡(luò)代理，使用諸如Cache-First或ord-while-thile-revalidate之類的策略來攔截請求並管理緩存。 2。安裝過程中的Portache Core Assets，以確保App Shell脫機加載。 3。實現(xiàn)運行時緩存，以示為API響應(yīng)（例如API響應(yīng)）。 4。添加Web應(yīng)用清單以定義可安裝的應(yīng)用程序?qū)傩?，例如名稱，圖標(biāo)和顯示模式。 5。在JavaScript中註冊服務(wù)工作者以激活離線功能。 6。當(dāng)網(wǎng)絡(luò)和緩存失敗並保持用戶體驗時，提供離線後備頁面。 7.版本緩存並在激活過程中清理舊版本，以防止穩(wěn)定性。 8。使用工作箱簡化緩存和同步工作流程。 9。使用瀏覽器DevTools測試離線行為。構(gòu)建脫機優(yōu)先級可改善所有用戶的可靠性，速度和參與度，尤其是在不可靠的網(wǎng)絡(luò)上，並且可以通過逐步增強來實現(xiàn)。

構(gòu)建離線第一網(wǎng)絡(luò)應(yīng)用程序不僅成為一個不錯的選擇，而且已經(jīng)成為實際的必要性，尤其是對於具有不可靠的Internet連接的用戶或使用移動設(shè)備上使用Web應(yīng)用程序的用戶。該功能的核心是服務(wù)人員和進步的Web應(yīng)用程序（PWA） 。他們一起，即使網(wǎng)絡(luò)緩慢或完全不存在，它們也可以快速，可靠和引人入勝。

讓我們分解服務(wù)工作人員和PWA如何共同努力以使離線急速成為可能，以及如何開始構(gòu)建無連接無縫工作的應(yīng)用程序。

什麼是服務(wù)工作者？

服務(wù)工作者是一個在後臺運行的腳本，與網(wǎng)頁分開，並充當(dāng)可編程網(wǎng)絡(luò)代理。它攔截網(wǎng)絡(luò)請求，管理緩存，並啟用推送通知和背景同步等功能。

關(guān)鍵特徵：

• 在工人上下文中運行（無DOM訪問）
• 在單獨的線程上操作
• 必須通過HTTP（或開發(fā)過程中的Localhost）提供服務(wù)
• 生命週期包括註冊，安裝，激活和終止

服務(wù)工作人員的真正力量在於他們攔截和處理網(wǎng)絡(luò)請求的能力，使開發(fā)人員在無法使用網(wǎng)絡(luò)時可以提供緩存的內(nèi)容。

服務(wù)工作者如何啟用離線功能

要構(gòu)建離線第一應(yīng)用程序，即使沒有網(wǎng)絡(luò)，您也需要確?？捎煤诵膬?nèi)容和功能。這是服務(wù)工作者實現(xiàn)這一目標(biāo)的方式：

1。加速策略

服務(wù)工作人員讓您定義如何以及如何緩存。常見策略包括：

• 首先緩存：從緩存服務(wù)；僅在不緩存的情況下才能進入網(wǎng)絡(luò)
• 網(wǎng)絡(luò)優(yōu)先：首先嘗試網(wǎng)絡(luò)，返回緩存
• 陳舊的方式回歸：立即從緩存中服務(wù)，在後臺更新緩存
• 僅緩存：對很少更改的靜態(tài)資產(chǎn)有用

對於離線優(yōu)先應(yīng)用程序，具有網(wǎng)絡(luò)後備方法的高速緩存通常效果最好。

2。關(guān)鍵資產(chǎn)

在服務(wù)工作者的install事件中，您可以預(yù)先調(diào)查基本文件，例如HTML，CSS，JS和Images：

 const cache_name ='v1';
const precache_urls = [
  '/'，，
  '/styles/main.css'，
  '/scripts/app.js'，
  '/images/logo.png'
];

self.addeventlistener（'install'，（event）=> {
  event.Waituntil（
    caches.open（cache_name）
      。
  ）；
}）;

這樣可以確保從第一次訪問開始脫機應(yīng)用程序外殼。

3。動態(tài)內(nèi)容的運行時緩存

使用fetch事件來緩存按需緩存資產(chǎn)，例如API響應(yīng)或用戶生成的內(nèi)容：

 self.addeventListener（'fetch'，（event）=> {
  if（event.request.destination ==='script'|| event.request.destination ==='style'）{
    event.respondwith（
      caches.match（event.request）。
    ）；
  }
}）;

您可以將其擴展到來自API的緩存JSON數(shù)據(jù)，從而使脫機訪問以前加載的內(nèi)容。

將您的應(yīng)用變成PWA

漸進式Web應(yīng)用程序是一種使用現(xiàn)代Web功能來提供類似應(yīng)用程序的體驗的Web應(yīng)用程序。要被視為PWA，您的應(yīng)用應(yīng)該：

• 可靠（在較差或無網(wǎng)絡(luò)條件下起作用）
• 快速（快速響應(yīng)用戶互動）
• 引人入勝（感覺就像是本地應(yīng)用程序，安裝主屏幕，推送通知等）

這是使應(yīng)用程序成為真正的PWA所需的內(nèi)容：

1。網(wǎng)絡(luò)應(yīng)用清單

添加manifest.json文件以定義安裝時的應(yīng)用方式：

 {
  “名稱”：“我的離線應(yīng)用程序”，
  “ short_name”：“ offlineApp”，
  “ start_url”：“/”，，
  “顯示”：“獨立”，
  “ background_color”：“ #ffffff”，
  “ theme_color”：“＃000000”，
  "圖示":[
    {
      “ src”：“ iCon-192.png”，
      “尺寸”：“ 192x192”，
      “ type”：“ Image/png”
    }，，
    {
      “ src”：“ icon-512.png”，
      “尺寸”：“ 512x512”，
      “ type”：“ Image/png”
    }
  這是給出的
}

將其鏈接在您的HTML中：

 <link rel =“清單” href =“/subest.json”>

2。註冊服務(wù)工作者

在您的主要JavaScript文件中：

如果（Navigator中的'ServiceWorker'）{
  window.addeventlistener（'load'，（）=> {
    navigator.serviceworker.register（'/sw.js'）
      。
      .catch（err => console.log（'SW註冊失?。?amp;#39;，err））;
  }）;
}

3。優(yōu)雅處理離線狀態(tài)

即使使用緩存，一些請求也會失敗。通過離線後備頁面或UI通知用戶：

 self.addeventListener（'fetch'，（event）=> {
  event.respondwith（
    caches.match（event.request）
      然後（cached => {
        返回緩存||提?。╡vent.request）
          .catch（（）=> caches.match（'/offline.html'））;
      }）
  ）；
}）;

設(shè)計一個友好的offline.html頁面以維持用戶信任。

脫機成功的高級技巧

• 版本您的緩存：將緩存名稱與版本號一起使用以避免過時的內(nèi)容。
• 清理舊的緩存：使用activate事件刪除過時的緩存。
• 使用工作箱：Google的工作箱庫簡化了緩存，縮放和背景同步。
• 測試離線行為：使用DevTools（應(yīng)用程序>服務(wù)工作者）模擬離線模式並檢查緩存。

最後的想法

服務(wù)工作人員和PWA是為網(wǎng)絡(luò)帶來本地應(yīng)用彈性的強大工具。通過設(shè)計應(yīng)用程序以脫機工作，您不僅可以容納不良的連接性 - 您為所有用戶建立了更快，更可靠的體驗。

啟動?。壕彺婺膽?yīng)用程序外殼，添加清單並逐步增強。隨著時間的流逝，您可以添加背景同步，推送通知和動態(tài)內(nèi)容緩存。

這不是魔術(shù)，這只是一個很好的網(wǎng)絡(luò)工程。而且它比以往任何時候都可以實現(xiàn)。

以上是服務(wù)工作者和PWA：構(gòu)建脫機第一網(wǎng)絡(luò)應(yīng)用程序的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！