Anthony Fu的VitePWA插件是通過離線功能增強(qiáng)基于Vite的網(wǎng)站的強(qiáng)大工具。此插件簡化了添加服務(wù)工作者來處理離線支持，資產(chǎn)緩存和更新通知的過程。讓我們探索服務(wù)工作者以及如何使用VitePWA實(shí)施他們。

了解服務(wù)人員

服務(wù)工作者是獨(dú)立于您的Web應(yīng)用程序運(yùn)行的背景腳本。它的關(guān)鍵功能是攔截網(wǎng)絡(luò)請求，實(shí)現(xiàn)各種操作。盡管能夠進(jìn)行復(fù)雜的任務(wù)，例如即時的打字稿匯編或視頻轉(zhuǎn)編碼，但其最常見的用途是用于績效增強(qiáng)和離線訪問的緩存資產(chǎn)。

VitePWA創(chuàng)建了一個服務(wù)工作者，該服務(wù)工作者在初次訪問時預(yù)先訪問HTML，CSS和JavaScript文件。隨后的訪問從緩存中加載這些資源，從而消除了網(wǎng)絡(luò)請求。即使在第一次訪問中，隨后的點(diǎn)擊次數(shù)也經(jīng)常加載預(yù)先播放的內(nèi)容，從而顯著提高速度。

版本控制和清單文件

當(dāng)代碼更改需要仔細(xì)版本操作時，管理服務(wù)工作者更新。構(gòu)建系統(tǒng)通常會生成結(jié)合文件哈希的文件名（例如， foo-ABC123.js ）。更新導(dǎo)致新的文件名（例如， foo-XYZ987.js ）。服務(wù)人員必須有效處理這些更改。

服務(wù)工作者API是低級的。手動管理緩存文件很復(fù)雜。 Google庫Wookbox簡化了這一點(diǎn)，但仍需要您的構(gòu)建過程中的詳細(xì)資產(chǎn)信息。 VitePWA通過與工作箱集成并將其與Vite的構(gòu)建輸出一起自動配置來優(yōu)雅地解決此問題。

使用VitePWA實(shí)施服務(wù)工作者

1. 安裝：使用npm i vite-plugin-pwa安裝插件。

2. Vite配置：導(dǎo)入并將插件添加到您的vite.config.js ：

   從“ vite-plugin-pwa”中導(dǎo)入{vitepwa};
   
   導(dǎo)出默認(rèn)decteConfig（{
     插件：[vitepwa（）]，
     // ...其他配置
   }）;

3. 服務(wù)工作人員注冊：在您的應(yīng)用程序的入口點(diǎn)注冊服務(wù)工作人員：

   導(dǎo)入{compistersw}來自“虛擬：pwa-register”;
   
   如果（Navigator中的“ ServiceWorker”）{
     registersw（）; //考慮為開發(fā)環(huán)境添加條件邏輯
   }

   registerSW功能處理服務(wù)工作者生命周期。有條件的邏輯（例如，不包括localhost ）可以防止在開發(fā)過程中激活服務(wù)工作者。

4. 離線功能： VitePWA提供的預(yù)播可以自動啟用基本的離線功能。即使沒有網(wǎng)絡(luò)訪問，也可以從高速緩存提供資產(chǎn)。有關(guān)更高級的離線功能（例如，使用索引db），需要自定義服務(wù)工作者邏輯。

服務(wù)工作者更新

當(dāng)代碼更改時，將生成具有更新的Pre-Cache清單的新服務(wù)工作者。舊的服務(wù)工作者繼續(xù)運(yùn)行，直到關(guān)閉所有選項(xiàng)卡并重新打開，以確保在會話之間保持一致的用戶體驗(yàn)。

改進(jìn)的更新處理與onNeedRefresh

registerSW函數(shù)允許更平滑的更新過程。當(dāng)有新的服務(wù)工作者可用時，觸發(fā)了onNeedRefresh回調(diào)，提供了通知用戶并啟動受控重新加載的機(jī)會：

 registersw（{
  Onneedrefresh（）{
    //向用戶顯示通知，提示他們更新
    // ...
  }
}）;

運(yùn)行時緩存

VitePWA的workbox配置選項(xiàng)啟用運(yùn)行時緩存，以便在應(yīng)用程序執(zhí)行過程中獲取資產(chǎn)。這將離線功能擴(kuò)展到了預(yù)先曝光的資源之外：

 vitepwa（{
  工作箱：{
    runtimecaching：[ / * ...您的運(yùn)行時緩存配置... * /]
  }
}））

添加自定義服務(wù)工作者代碼

要合并自定義邏輯，請?jiān)?code>workbox配置中使用importScripts選項(xiàng)以包含外部JavaScript文件：

 vitepwa（{
  工作箱：{
    importScripts：[“ sw-code.js”]
  }
}））

結(jié)論

VitePWA極大地簡化了服務(wù)工作者的實(shí)施，為離線功能和增強(qiáng)性能提供了強(qiáng)大的基礎(chǔ)。盡管高級功能需要自定義代碼，但插件處理緩存和更新的復(fù)雜性，使開發(fā)人員可以專注于應(yīng)用程序邏輯。從離線功能開始，并根據(jù)需要探索更多的高級服務(wù)工作者功能。

以上是將VitePWA插件用于離線站點(diǎn)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！