React 中使用 Workbox 进行预缓存

Workbox 是什么

Workbox 是 Google Chrome 团队推出的一套 PWA 的解决方案,这套解决方案当中包含了核心库和构建工具,因此我们可以利用 Workbox 实现 Service Worker 的快速开发。以下内容基于webpack进行讲解以及安装

Workbox 内置于 Create React App (CRA) 中,其默认配置会在每次构建时预缓存应用中的所有静态资源。

Workbox 如何使用

  1. 首先安装 workbox-webpack-plugin

    npm install workbox-webpack-plugin
    
  2. 在webpack config 中引入

    javascript 复制代码
    const { GenerateSW, InjectManifest } = require('workbox-webpack-plugin')
  3. src/index.js 文件中启用它即可在每个 build 中注册一个新的 Service Worker

    javascript 复制代码
    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 的区别

generateSWinjectManifest 是 Workbox 构建工具中两种不同的策略,用于生成和配置 Service Worker 脚本。它们具有不同的特点和用途:

  1. generateSW

    • generateSW 是 Workbox 构建工具的一种策略,它用于生成 Service Worker 文件,包括缓存策略和预缓存的资源列表。
    • 使用 generateSW 时,您只需提供一个配置文件,通常称为 workbox-config.js,以指定预缓存的资源列表、缓存策略和其他相关选项。
    • generateSW 会自动创建一个 Service Worker 文件,无需您手动编写它。这个生成的 Service Worker 文件包含了 Workbox 提供的缓存策略和路由配置。
    • 这种策略适用于大多数情况下,特别是对于初学者或不需要自定义 Service Worker 行为的情况。
  2. injectManifest

    • injectManifest 是 Workbox 构建工具的另一种策略,它允许您手动编写自定义的 Service Worker 文件,并将 Workbox 缓存策略注入到其中。
    • 使用 injectManifest 时,您需要自己编写 Service Worker 文件,并在其中指定 Workbox 的缓存策略和路由配置。
    • 这个策略更适用于需要高度自定义 Service Worker 行为的情况,或者已经有现有 Service Worker 文件,需要将 Workbox 缓存策略集成进去。
    • 您可以将 Workbox 生成的缓存策略注入到您已经存在的 Service Worker 文件中,以实现更灵活的控制。

总的来说,generateSW 是一种简单且自动化的方式,适合大多数情况,而 injectManifest 则更适合需要更多自定义控制的情况。您可以根据项目需求和自己的技术水平选择适合您的策略。无论您选择哪种策略,都能够让您利用 Workbox 提供的缓存和离线支持来提高 Web 应用程序的性能和可靠性。

Workbox 配置, 还算完整的配置

javascript 复制代码
new GenerateSW({
      cacheId: '', // 设置前缀
      swDest: 'serviceWorker.js',
      importScripts:[], // 如果需要在项目之外额外引入并预加载一些代码
      disableDevLogs: true,
      clientsClaim: true,  // 是否实现即时更新
      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, // 最大的缓存数,超过之后则走 LRU 策略清除最老最少使用缓存
                  maxAgeSeconds: 30 * 24 * 60 * 60 // 最长缓存时间为 30 天
                }
              }
        },
      ], // 设置缓存策略
  })

Workbox路由以及缓存策略

Workbox中的路由是指可以使用的一种机制,用于定义请求和响应的处理方式。Workbox的路由可以用于缓存策略、路由处理、动态缓存、网络请求拦截等。它允许您为不同的URL模式和HTTP方法设置不同的处理方式。 下面是一些关于如何使用Workbox路由的示例:

  1. 基本路由:
arduino 复制代码
workbox.routing.registerRoute(
  '/example/path',
  new workbox.strategies.CacheFirst()
);

这个示例将'/example/path'的请求路由到Cache First策略,意味着首先尝试从缓存中获取响应,如果缓存中没有,则从网络获取。

2.使用正则表达式进行路由匹配:

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

这个示例使用正则表达式匹配所有以'api.example.com/'开头的请求,并使用N... First策略。 3.自定义路由匹配条件

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

这个示例使用自定义匹配条件,仅当URL的路径以'/images/'开头时,使用Stale While Revalidate策略。 4.路由参数:

javascript 复制代码
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的缓存中,以确保这些资源在离线状态下可用。这通常用于缓存应用程序的核心资源,以提高应用程序的性能和可靠性。

Workbox官网地址

PS: 总的来说,Workbox 是一个功能丰富的工具集,用于增强 Web 应用程序的性能、可靠性和离线体验。它为开发者提供了强大的工具和灵活的配置选项,以帮助他们轻松地实现离线支持和高级缓存控制。这使得 Web 应用程序能够更好地应对不稳定的网络连接和提供更快的加载速度。

相关推荐
敲代码的彭于晏2 天前
除了localStorage、sessionStorage,了解Cache Storage吗?
前端·浏览器·pwa
牛老师讲GIS3 个月前
将自己的网站改造成可安装的PWA
前端·pwa
天涯学馆4 个月前
PWA离线体验:离线页面与App Shell模式
前端·javascript·pwa
Amd7945 个月前
Vue第三方库与插件实战手册
vue·echarts·d3.js·数据处理·pwa·验证·chart.js
黑匣子~7 个月前
PWA集成和离线使用
前端·google·uniapp·pwa
胖蔡9 个月前
vite-plugin-pwa 离线安装Vite应用
前端·pwa
IronLu2339 个月前
让Web应用支持Face ID和指纹一键登录,产品经理对我猛夸!速来看实现原理(附源码)
前端·pwa
Bowen_J9 个月前
Flutter for Web
flutter·html·pwa
IoT砖家涂拉拉10 个月前
什么是小程序?特点和技术架构详解
物联网·小程序·系统架构·app·api·web·pwa
_血手人屠_1 年前
PWA应用总结
前端·pwa