React（CRA）SW缓存“公共”文件夹

Question

在执行create-react-app并启用index.js中的服务后，将缓存src文件夹中的所有相关文件。但是，我的一些资源位于public目录中。当我运行npm run build时，asset-manifest.json和precache-manifest.HASH.js仅包含HTML，损坏的JS和CSS（src文件夹中的所有内容）。

我如何告诉服务人员从public文件夹中另外缓存特定文件？

这里是实际生成的precache-manifest.e431838417905ad548a58141f8dc754b.js

self.__precacheManifest = [
  {
    "revision": "cb0ea38f65ed9eddcc91",
    "url": "/grafiti/static/js/runtime~main.cb0ea38f.js"
  },
  {
    "revision": "2c226d1577937984bf58",
    "url": "/grafiti/static/js/main.2c226d15.chunk.js"
  },
  {
    "revision": "c88c70e5f4ff8bea6fac",
    "url": "/grafiti/static/js/2.c88c70e5.chunk.js"
  },
  {
    "revision": "2c226d1577937984bf58",
    "url": "/grafiti/static/css/main.7a6fc926.chunk.css"
  },
  {
    "revision": "980026e33c706b23b041891757cd51be",
    "url": "/grafiti/index.html"
  }
];

但是我希望它也包含这些URL的条目：

• /grafiti/icon-192.png
• /grafiti/icon-512.png

它们来自public文件夹。

或者：如何以一种可以从Web清单中引用它们的方式在manifest.webmanifest文件夹中添加src文件的图标？

Answer 1

我假设您搜索的解决方案（如我）不会弹出。这种方法对我有用：

1. 通过module react-app-rewired安装react-app-rewired

2. 在package.json内部的npm脚本中替换yarn add -D react-app-rewired（不需要弹出）

   react-scripts

3. 在与package.json相同级别的目录中创建config-overrides.js文件]

我的文件看起来像这样（因为我也想为自己的api添加一个具有更复杂的缓存选项的服务工作者），但是globPatterns

和globDirectory是您要寻找的。添加此模式后，将匹配的文件（在我的情况下为图像，音乐和声音）添加到生成的precache-manifest- {hash}中。

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
P.S .：如果您需要custom-service.worker.js文件才能使其正常工作，则const {InjectManifest} = require('workbox-webpack-plugin');
const path = require('path');

module.exports = {
  webpack: function(config, env) {
    config.plugins.push(
      new InjectManifest({
        globPatterns: [
          'images/*.png',
          'models/*.glb',
          'music/*.mp3',
          'sound/*.mp3'
        ],
        globDirectory: 'build',
        swSrc: path.join('src', 'custom-service-worker.js'),
        swDest: 'service-worker.js'
      })
    );

    return config;
  }
}
应该足以容纳该文件的内容，但是workbox.precaching.precacheAndRoute([])对于那些缓存内容也非常有趣