Workbox是Google推出的Service Worker增強(qiáng)工具集，用於簡(jiǎn)化PWA開(kāi)發(fā)。它通過(guò)模塊化封裝實(shí)現(xiàn)資源緩存、請(qǐng)求路由和版本更新等功能，如配置不同資源的緩存策略（NetworkFirst、CacheFirst等），支持多種接入方式（如workbox-sw.js、workbox-webpack-plugin），並提供調(diào)試工具和日誌支持，幫助開(kāi)發(fā)者高效構(gòu)建可靠的離線體驗(yàn)。

PWA（漸進(jìn)式網(wǎng)頁(yè)應(yīng)用）越來(lái)越受歡迎，因?yàn)樗茉跊](méi)有原生App的情況下提供類似App的體驗(yàn)。而Workbox，作為Google推出的一套工具庫(kù)，極大簡(jiǎn)化了Service Worker的開(kāi)發(fā)和緩存管理，是構(gòu)建PWA的重要助手。

什麼是Workbox？

簡(jiǎn)單來(lái)說(shuō)， Workbox = Service Worker 的增強(qiáng)版工具集。它幫你處理資源緩存、請(qǐng)求路由、版本更新這些繁瑣但關(guān)鍵的任務(wù)。如果你之前嘗試過(guò)手寫(xiě)Service Worker，就會(huì)知道手動(dòng)處理緩存策略有多容易出錯(cuò)。而Workbox把這些常見(jiàn)操作封裝成模塊，讓你用更少代碼做更多事。

比如你想讓圖片走“網(wǎng)絡(luò)優(yōu)先”策略，JS/CSS走“緩存優(yōu)先”，只需要配置幾行代碼就能實(shí)現(xiàn)。

如何開(kāi)始使用Workbox？

要開(kāi)始用Workbox，有幾個(gè)常見(jiàn)方式：

• 在項(xiàng)目中直接引入workbox-sw.js （適合靜態(tài)網(wǎng)站或輕量級(jí)項(xiàng)目）
• 配合Webpack/Vite等打包工具使用workbox-webpack-plugin （適合現(xiàn)代前端項(xiàng)目）
• 自定義Service Worker文件並導(dǎo)入Workbox模塊

以Vite為例，你可以安裝vite-plugin-pwa ，它內(nèi)部已經(jīng)集成Workbox，只需簡(jiǎn)單配置就能生成帶緩存策略的Service Worker文件。

一個(gè)基本的配置可能像這樣：

 import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        runtimeCaching: [
          {
            urlPattern: ({url}) => url.pathname.startsWith('/api'),
            handler: 'NetworkFirst',
            options: {
              cacheName: 'api-cache',
              expiration: {
                maxEntries: 10,
                maxAgeSeconds: 60 * 60 * 24 * 7, // 一周},
            },
          },
        ],
      },
    }),
  ]
})

這個(gè)例子中的runtimeCaching部分就是告訴Workbox：所有以/api開(kāi)頭的請(qǐng)求，優(yōu)先走網(wǎng)絡(luò)，失敗再讀緩存，並保存到名為api-cache的緩存空間裡。

常見(jiàn)緩存策略有哪些？

Workbox內(nèi)置了幾種常用的緩存策略，可以根據(jù)不同類型的資源選擇合適的方式：

• CacheOnly ：只從緩存讀?。ㄟm合離線包內(nèi)的靜態(tài)資源）
• NetworkOnly ：只走網(wǎng)絡(luò)（適合必須實(shí)時(shí)獲取的數(shù)據(jù)）
• StaleWhileRevalidate ：先返回緩存，同時(shí)後臺(tái)更新（適合用戶頭像、字體這類可容忍舊數(shù)據(jù)的資源）
• NetworkFirst / CacheFirst ：根據(jù)場(chǎng)景選其一

舉個(gè)例子：

• JS/CSS 文件適合用CacheFirst
• 用戶動(dòng)態(tài)內(nèi)容（如個(gè)人資料）可以考慮NetworkFirst
• 靜態(tài)圖片可以用StaleWhileRevalidate

你也可以通過(guò)自定義插件來(lái)擴(kuò)展緩存行為，比如在緩存前修改響應(yīng)體，或者記錄日誌。

注意事項(xiàng)與調(diào)試技巧

雖然Workbox簡(jiǎn)化了很多流程，但在實(shí)際部署時(shí)還是有些細(xì)節(jié)需要注意：

• 緩存版本控制很重要：每次發(fā)布新版本時(shí)，記得更新緩存名稱或配置，否則瀏覽器可能還在用舊緩存。
• Service Worker生命週期容易被忽略：註冊(cè)後不會(huì)立即生效，需要頁(yè)面刷新一次，或者主動(dòng)調(diào)用.skipWaiting() 。
• 測(cè)試離線體驗(yàn)要徹底：Chrome DevTools 的Application 標(biāo)籤頁(yè)裡可以模擬離線環(huán)境，檢查是否真的能加載緩存內(nèi)容。
• 不要緩存敏感數(shù)據(jù)：比如用戶token之類的私有信息，避免本地暴露風(fēng)險(xiǎn)。

調(diào)試建議：

• 打開(kāi)Chrome DevTools → Application → Service Workers 查看狀態(tài)
• 使用Workbox DevTools 插件來(lái)監(jiān)控緩存命中情況
• 在開(kāi)發(fā)階段打開(kāi)Workbox的日誌輸出（默認(rèn)是靜默模式）

基本上就這些。 Workbox確實(shí)大大降低了PWA開(kāi)發(fā)門(mén)檻，但也別掉以輕心，緩存策略一旦設(shè)置錯(cuò)誤，可能導(dǎo)致用戶看到舊內(nèi)容或無(wú)法更新。

以上是用工作箱構(gòu)建漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！