反应(CRA)服务工作人员缓存公共文件夹(&Q) [英] React (CRA) Service Worker Cache "public" folder

问题描述

执行Create-Reaction-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文件夹。

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

推荐答案

我假设您在搜索不弹出即可工作的解决方案(就像我一样)。这个方法对我很管用：

1. 通过yarn add -D react-app-rewired
安装模块react-app-rewired

2. 替换包内NPM脚本中的react-scripts(弹出时不需要)。json

   /* 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. 在与您的包相同的级别创建一个config-overrides.js文件。json

我的文件如下所示(因为我还想为我的API添加一个具有更复杂缓存选项的自己的服务工作器)，但是lobPatterns和lobDirectory就是您要找的。添加此模式后，匹配的文件(在我的示例中为图像、音乐和声音)被添加到生成的preache-清单-{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;
  }
}

备注：如果您需要一个Custom-Serice.worker.js文件来运行它，workbox.precaching.precacheAndRoute([])应该足够作为此文件的内容，但the workbox docs对于那些缓存内容也非常有趣

这篇关于反应(CRA)服务工作人员缓存公共文件夹(&Q)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！