Anthony Fu的VitePWA插件是通過離線功能增強基於Vite的網站的強大工具。此插件簡化了添加服務工作者來處理離線支持,資產緩存和更新通知的過程。讓我們探索服務工作者以及如何使用VitePWA實施他們。
了解服務人員
服務工作者是獨立於您的Web應用程序運行的背景腳本。它的關鍵功能是攔截網絡請求,實現各種操作。儘管能夠進行複雜的任務,例如即時的打字稿彙編或視頻轉編碼,但其最常見的用途是用於績效增強和離線訪問的緩存資產。
VitePWA創建了一個服務工作者,該服務工作者在初次訪問時預先訪問HTML,CSS和JavaScript文件。隨後的訪問從緩存中加載這些資源,從而消除了網絡請求。即使在第一次訪問中,隨後的點擊次數也經常加載預先播放的內容,從而顯著提高速度。
版本控制和清單文件
當代碼更改需要仔細版本操作時,管理服務工作者更新。構建系統通常會生成結合文件哈希的文件名(例如, foo-ABC123.js
)。更新導致新的文件名(例如, foo-XYZ987.js
)。服務人員必須有效處理這些更改。
服務工作者API是低級的。手動管理緩存文件很複雜。 Google庫Wookbox簡化了這一點,但仍需要您的構建過程中的詳細資產信息。 VitePWA通過與工作箱集成並將其與Vite的構建輸出一起自動配置來優雅地解決此問題。
使用VitePWA實施服務工作者
安裝:使用npm i vite-plugin-pwa
安裝插件。
Vite配置:導入並將插件添加到您的vite.config.js
:
從“ vite-plugin-pwa”中導入{vitepwa}; 導出默認decteConfig({ 插件:[vitepwa()], // ...其他配置 });
服務工作人員註冊:在您的應用程序的入口點註冊服務工作人員:
導入{compistersw}來自“虛擬:pwa-register”; 如果(Navigator中的“ ServiceWorker”){ registersw(); //考慮為開發環境添加條件邏輯 }
registerSW
功能處理服務工作者生命週期。有條件的邏輯(例如,不包括localhost
)可以防止在開發過程中激活服務工作者。
離線功能: VitePWA提供的預播可以自動啟用基本的離線功能。即使沒有網絡訪問,也可以從高速緩存提供資產。有關更高級的離線功能(例如,使用索引db),需要自定義服務工作者邏輯。
服務工作者更新
當代碼更改時,將生成具有更新的Pre-Cache清單的新服務工作者。舊的服務工作者繼續運行,直到關閉所有選項卡並重新打開,以確保在會話之間保持一致的用戶體驗。
改進的更新處理與onNeedRefresh
registerSW
函數允許更平滑的更新過程。當有新的服務工作者可用時,觸發了onNeedRefresh
回調,提供了通知用戶並啟動受控重新加載的機會:
registersw({ Onneedrefresh(){ //向用戶顯示通知,提示他們更新 // ... } });
運行時緩存
VitePWA的workbox
配置選項啟用運行時緩存,以便在應用程序執行過程中獲取資產。這將離線功能擴展到了預先曝光的資源之外:
vitepwa({ 工作箱:{ runtimecaching:[ / * ...您的運行時緩存配置... * /] } }))
添加自定義服務工作者代碼
要合併自定義邏輯,請在workbox
配置中使用importScripts
選項以包含外部JavaScript文件:
vitepwa({ 工作箱:{ importScripts:[“ sw-code.js”] } }))
結論
VitePWA極大地簡化了服務工作者的實施,為離線功能和增強性能提供了強大的基礎。儘管高級功能需要自定義代碼,但插件處理緩存和更新的複雜性,使開發人員可以專注於應用程序邏輯。從離線功能開始,並根據需要探索更多的高級服務工作者功能。
以上是將VitePWA插件用於離線站點的詳細內容。更多資訊請關注PHP中文網其他相關文章!