Workbox 是什么

Workbox 是 Google Chrome 團(tuán)隊(duì)推出的一套 PWA 的解決方案，這套解決方案當(dāng)中包含了核心庫(kù)和構(gòu)建工具，因此我們可以利用 Workbox 實(shí)現(xiàn) Service Worker 的快速開發(fā)。以下內(nèi)容基于webpack進(jìn)行講解以及安裝

Workbox 內(nèi)置于 Create React App (CRA) 中，其默認(rèn)配置會(huì)在每次構(gòu)建時(shí)預(yù)緩存應(yīng)用中的所有靜態(tài)資源。

Workbox 如何使用

• 首先安裝 workbox-webpack-plugin

npm install workbox-webpack-plugin

• 在webpack config 中引入

const { GenerateSW, InjectManifest } = require('workbox-webpack-plugin')

• 在 src/index.js 文件中啟用它即可在每個(gè) build 中注冊(cè)一個(gè)新的 Service Worker

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();
serviceWorker.register();

GenerateSW 和InjectManifest 的區(qū)別

generateSW 和 injectManifest 是 Workbox 構(gòu)建工具中兩種不同的策略，用于生成和配置 Service Worker 腳本。它們具有不同的特點(diǎn)和用途：

• generateSW：

  • generateSW 是 Workbox 構(gòu)建工具的一種策略，它用于生成 Service Worker 文件，包括緩存策略和預(yù)緩存的資源列表。
  • 使用 generateSW 時(shí)，您只需提供一個(gè)配置文件，通常稱為 workbox-config.js，以指定預(yù)緩存的資源列表、緩存策略和其他相關(guān)選項(xiàng)。
  • generateSW 會(huì)自動(dòng)創(chuàng)建一個(gè) Service Worker 文件，無(wú)需您手動(dòng)編寫它。這個(gè)生成的 Service Worker 文件包含了 Workbox 提供的緩存策略和路由配置。
  • 這種策略適用于大多數(shù)情況下，特別是對(duì)于初學(xué)者或不需要自定義 Service Worker 行為的情況。

• injectManifest：

  • injectManifest 是 Workbox 構(gòu)建工具的另一種策略，它允許您手動(dòng)編寫自定義的 Service Worker 文件，并將 Workbox 緩存策略注入到其中。
  • 使用 injectManifest 時(shí)，您需要自己編寫 Service Worker 文件，并在其中指定 Workbox 的緩存策略和路由配置。
  • 這個(gè)策略更適用于需要高度自定義 Service Worker 行為的情況，或者已經(jīng)有現(xiàn)有 Service Worker 文件，需要將 Workbox 緩存策略集成進(jìn)去。
  • 您可以將 Workbox 生成的緩存策略注入到您已經(jīng)存在的 Service Worker 文件中，以實(shí)現(xiàn)更靈活的控制。

總的來(lái)說(shuō)，generateSW 是一種簡(jiǎn)單且自動(dòng)化的方式，適合大多數(shù)情況，而 injectManifest 則更適合需要更多自定義控制的情況。您可以根據(jù)項(xiàng)目需求和自己的技術(shù)水平選擇適合您的策略。無(wú)論您選擇哪種策略，都能夠讓您利用 Workbox 提供的緩存和離線支持來(lái)提高 Web 應(yīng)用程序的性能和可靠性。

Workbox 配置, 還算完整的配置

new GenerateSW({
      cacheId: '', // 設(shè)置前綴
      swDest: 'serviceWorker.js',
      importScripts:[], // 如果需要在項(xiàng)目之外額外引入并預(yù)加載一些代碼
      disableDevLogs: true,
      clientsClaim: true,  // 是否實(shí)現(xiàn)即時(shí)更新
      skipWaiting: true,   // 是否跳過(guò)等待階段
      maximumFileSizeToCacheInBytes: 100 * 1024 * 1024,  // 預(yù)緩存的最大文件的大小
      chunks:[],  // 手動(dòng)加載需要引入的東西 完整路徑
      excludeChunks: [],  // 手動(dòng)過(guò)濾不需要引入的東西， 路徑
      include: [/\.html$/, /\.js$/, /\.css$/, /\.(?:png|gif|jpg|jpeg|svg)$/], //匹配文件
      exclude: [/^main.*/],  //忽略的文件
      runtimeCaching: [
          {
              urlPattern: /\.(?:png|gif|jpg|jpeg|svg)[\?]?/,   // 正則進(jìn)行匹配文件格式
              handler: 'CacheFirst',   // 緩存策略
              options: {
                cacheName: `image-cache`,   // 緩存名稱
                cacheableResponse: {
                  statuses: [0, 200]     
                },
                expiration: {
                  maxEntries: 60, // 最大的緩存數(shù)，超過(guò)之后則走 LRU 策略清除最老最少使用緩存
                  maxAgeSeconds: 30 * 24 * 60 * 60 // 最長(zhǎng)緩存時(shí)間為 30 天
                }
              }
        },
      ], // 設(shè)置緩存策略
  })

Workbox路由以及緩存策略

Workbox中的路由是指可以使用的一種機(jī)制，用于定義請(qǐng)求和響應(yīng)的處理方式。Workbox的路由可以用于緩存策略、路由處理、動(dòng)態(tài)緩存、網(wǎng)絡(luò)請(qǐng)求攔截等。它允許您為不同的URL模式和HTTP方法設(shè)置不同的處理方式。 下面是一些關(guān)于如何使用Workbox路由的示例：

• 基本路由：

workbox.routing.registerRoute(
  '/example/path',
  new workbox.strategies.CacheFirst()
);

這個(gè)示例將'/example/path'的請(qǐng)求路由到Cache First策略，意味著首先嘗試從緩存中獲取響應(yīng)，如果緩存中沒(méi)有，則從網(wǎng)絡(luò)獲取。

• 使用正則表達(dá)式進(jìn)行路由匹配：

workbox.routing.registerRoute(
  new RegExp('^https://api.example.com/'),
  new workbox.strategies.NetworkFirst()
);

這個(gè)示例使用正則表達(dá)式匹配所有以'api.example.com/'開頭的請(qǐng)求，并使用N… First策略。 3.自定義路由匹配條件

workbox.routing.registerRoute(
  ({url, event}) => url.pathname.startsWith('/images/'),
  new workbox.strategies.StaleWhileRevalidate()
);

這個(gè)示例使用自定義匹配條件，僅當(dāng)URL的路徑以'/images/'開頭時(shí)，使用Stale While Revalidate策略。 4.路由參數(shù)：

workbox.routing.registerRoute(
  ({request, url}) => {
    return request.mode === 'navigate' && url.pathname.startsWith('/article/');
  },
  new workbox.strategies.NetworkFirst()
);

這個(gè)示例使用自定義條件，僅當(dāng)請(qǐng)求模式是導(dǎo)航(navigate)且路徑以'/article/'開頭時(shí)，使用Network First策略。

Workbox 預(yù)緩存

Workbox的預(yù)緩存是指在應(yīng)用程序安裝階段將特定資源緩存到Service Worker的緩存中，以確保這些資源在離線狀態(tài)下可用。這通常用于緩存應(yīng)用程序的核心資源，以提高應(yīng)用程序的性能和可靠性。

Workbox官網(wǎng)地址

PS: 總的來(lái)說(shuō)，Workbox 是一個(gè)功能豐富的工具集，用于增強(qiáng) Web 應(yīng)用程序的性能、可靠性和離線體驗(yàn)。它為開發(fā)者提供了強(qiáng)大的工具和靈活的配置選項(xiàng)，以幫助他們輕松地實(shí)現(xiàn)離線支持和高級(jí)緩存控制。這使得 Web 應(yīng)用程序能夠更好地應(yīng)對(duì)不穩(wěn)定的網(wǎng)絡(luò)連接和提供更快的加載速度。

以上就是React中使用Workbox進(jìn)行預(yù)緩存的實(shí)現(xiàn)代碼的詳細(xì)內(nèi)容，更多關(guān)于React Workbox預(yù)緩存的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論