React中使用Workbox进行预缓存的实现代码

npm install workbox-webpack-plugin

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

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();

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.routing.registerRoute(
  '/example/path',
  new workbox.strategies.CacheFirst()
);

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

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

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