Workbox 是什么

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

Workbox 內(nèi)置于 Create React App (CRA) 中，其默認配置會在每次構建時預緩存應用中的所有靜態(tài)資源。

Workbox 如何使用

• 首先安裝 workbox-webpack-plugin

npm install workbox-webpack-plugin

• 在webpack config 中引入

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

• 在 src/index.js 文件中啟用它即可在每個 build 中注冊一個新的 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 構建工具中兩種不同的策略，用于生成和配置 Service Worker 腳本。它們具有不同的特點和用途：

• generateSW：

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

• injectManifest：

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

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

Workbox 配置, 還算完整的配置

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

Workbox路由以及緩存策略

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

• 基本路由：

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

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

• 使用正則表達式進行路由匹配：

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

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

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

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

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

這個示例使用自定義條件，僅當請求模式是導航(navigate)且路徑以'/article/'開頭時，使用Network First策略。

Workbox 預緩存

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

Workbox官網(wǎng)地址

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

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

最新評論