Question

引起我注意的是，react-scrips构建生成的服务工作者没有缓存某些文件。这些文件包括（在我的项目中）公共文件夹中的自定义css文件以及从其他服务器访问的一些文件（例如google字体和bootstrap css文件）。

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

非常感谢

编辑：因此，react build脚本在/ build中生成service-worker.js文件。但是，生成的服务工作者无法正常工作。服务工作者会缓存/index.html之类的文件和所有/ static / *文件（它们也由react-script构建生成），但是不会缓存例如/bootstrap-override.css（这是由以下人员创建的文件）我）和引导css，该css是通过index.html中的简单标记从地址https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css检索的。我怎样才能让服务工作者也缓存那些文件？

Answer 1

使用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' : ''
    }
})

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

1 个答案: