將VitePWA插件用於離線站點

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

了解服務人員

服務工作者是獨立於您的Web應用程序運行的背景腳本。它的關鍵功能是攔截網絡請求，實現各種操作。儘管能夠進行複雜的任務，例如即時的打字稿彙編或視頻轉編碼，但其最常見的用途是用於績效增強和離線訪問的緩存資產。

VitePWA創建了一個服務工作者，該服務工作者在初次訪問時預先訪問HTML，CSS和JavaScript文件。隨後的訪問從緩存中加載這些資源，從而消除了網絡請求。即使在第一次訪問中，隨後的點擊次數也經常加載預先播放的內容，從而顯著提高速度。

版本控制和清單文件

當代碼更改需要仔細版本操作時，管理服務工作者更新。構建系統通常會生成結合文件哈希的文件名（例如， foo-ABC123.js ）。更新導致新的文件名（例如， foo-XYZ987.js ）。服務人員必須有效處理這些更改。

服務工作者API是低級的。手動管理緩存文件很複雜。 Google庫Wookbox簡化了這一點，但仍需要您的構建過程中的詳細資產信息。 VitePWA通過與工作箱集成並將其與Vite的構建輸出一起自動配置來優雅地解決此問題。

使用VitePWA實施服務工作者

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

2. Vite配置：導入並將插件添加到您的vite.config.js ：

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

3. 服務工作人員註冊：在您的應用程序的入口點註冊服務工作人員：

   導入{compistersw}來自“虛擬：pwa-register”;
   
   如果（Navigator中的“ ServiceWorker”）{
     registersw（）; //考慮為開發環境添加條件邏輯
   }

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

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

服務工作者更新

當代碼更改時，將生成具有更新的Pre-Cache清單的新服務工作者。舊的服務工作者繼續運行，直到關閉所有選項卡並重新打開，以確保在會話之間保持一致的用戶體驗。

改進的更新處理與onNeedRefresh

registerSW函數允許更平滑的更新過程。當有新的服務工作者可用時，觸發了onNeedRefresh回調，提供了通知用戶並啟動受控重新加載的機會：

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

運行時緩存

VitePWA的workbox配置選項啟用運行時緩存，以便在應用程序執行過程中獲取資產。這將離線功能擴展到了預先曝光的資源之外：

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

添加自定義服務工作者代碼

要合併自定義邏輯，請在workbox配置中使用importScripts選項以包含外部JavaScript文件：

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

結論

VitePWA極大地簡化了服務工作者的實施，為離線功能和增強性能提供了強大的基礎。儘管高級功能需要自定義代碼，但插件處理緩存和更新的複雜性，使開發人員可以專注於應用程序邏輯。從離線功能開始，並根據需要探索更多的高級服務工作者功能。

以上是將VitePWA插件用於離線站點的詳細內容。更多資訊請關注PHP中文網其他相關文章！