如何配置 sw-precache-webpack-plugin 来缓存自定义路径

Question

我用 create-react-app 创建了一个 React 应用程序并将其弹出。 service-worker.js 正在寻找 /index.html、/static/js/main.js 和 /static/css/main.css 进行缓存。我想将其配置为在不更改输出目录的情况下查找 /index.html、/js/main.js 和 /js/main.css。谢谢

Answer 1

首先要知道的是 sw-precache 实际上并不包含您的源代码。他们所做的是生成一个文件列表，这些文件将在安装后立即检索并存储在缓存中。

也就是说，如果您已经弹出，我建议您升级到现在称为 Workbox 的最新版本。 (https://developers.google.com/web/tools/workbox/get-started/webpack)

我一直使用它的方式是让它扫描目录中的特定文件类型并将其包括在内。因此，如果我将图像添加到目录中，它将包含在新的 service-worker 中。您可以将其设置为扫描您的构建文件夹。

new workboxPlugin({
  globDirectory: path.resolve('build'),
  globPatterns: ['**/*.{html,js,css,png,svg}'],
  swDest: path.resolve('dist', 'sw.js'),
}),

对于其他选项（例如忽略大文件、不刷新哈希资产等，您可以在此处查看配置文档： (https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.Configuration)

如何配置 sw-precache-webpack-plugin 来缓存自定义路径

How to configure sw-precache-webpack-plugin to cache custom paths

javascript

reactjs

webpack

sw-precache

create-react-app