React (CRA) Service Worker 缓存“公共”文件夹

执行 create-react-app 并启用 Service Worker 后index.js，来自的所有相关文件src文件夹被缓存。然而我的一些资源位于public目录。当我跑步时npm run build, the asset-manifest.json and precache-manifest.HASH.js仅包含 HTML、损坏的 JS 和 CSS（所有内容均来自src文件夹）。

我怎样才能告诉服务工作者额外缓存特定文件public folder?

这是实际生成的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 folder.

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

我假设您正在寻找一种无需弹出即可工作的解决方案（像我一样）。这种方法对我有用：

1. 安装模块反应应用程序重新连线 https://github.com/timarney/react-app-rewired via yarn add -D react-app-rewired

2. Replace react-scripts在 package.json 内的 npm 脚本中（弹出不需要）

   /* 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"
   

3. 创建与 package.json 同一级别的 config-overrides.js 文件

我的文件看起来像这样（因为我还想添加一个自己的服务工作人员，为我的 api 添加更复杂的缓存选项）但是全局模式和全局目录就是您所寻找的。添加此模式后，匹配的文件（在我的例子中为图像、音乐和声音）被添加到生成的 precache-manifest-{hash} 中。

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;
  }
}

P.S.：如果您需要 custom-service.worker.js 文件才能使其工作，workbox.precaching.precacheAndRoute([])该文件的内容应该足够了，但是工作箱文档 https://developers.google.com/web/tools/workbox/对于那些缓存的东西也很有趣