反应脚本构建服务工作者不缓存自定义文件

Question

我注意到 react-scrips 构建生成的 service worker 不会缓存某些文件。这些文件包括（在我的项目中）公共文件夹中的自定义 css 文件和从其他服务器访问的一些文件（例如 google 字体和引导 css 文件）。

如何确保这些文件也被缓存？

非常感谢

编辑： 所以 react 构建脚本会在 /build 中生成 service-worker.js 文件。然而，生成的 service worker 并没有按预期工作。服务工作者缓存文件，例如 /index.html 和所有 /static/* 文件（也是由 react-script 构建生成的），但它不缓存例如 /bootstrap-override.css （这是由me) 和引导 css，它使用 index.html 中的一个简单标记从地址 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 检索。如何让服务人员也缓存这些文件？

Answer 1

React 使用 SWPrecache 来缓存 webpack 构建的所有文件。因此，如果您希望缓存 css，则需要将其包含在您的 react 应用程序中（而不是 index.html 中）。 在 app.jsx 中添加：

import 'bootstrap-override.css';

但你不能从 cdn 导入，所以你需要从 npm 获取引导程序并导入它。

另一种解决方案是通过执行npm run eject 来弹出配置脚本 这允许您通过配置 SWPrecachePlugin 来配置服务工作者缓存哪些文件。在 webpack.config 中：

new SWPrecacheWebpackPlugin({
    filename: "../service-worker.js",
    ...
    staticFileGlobs: [
        "/bootstrap-override.css" //Additional static files
    ],
    dynamicUrlToDependencies: {
            //Add external assets here
        'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' : ''
    }
})