反应(CRA)SW缓存“公共"缓存文件夹 [英] React (CRA) SW Cache "public" folder

问题描述

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

After executing the create-react-app and enabling the service workers in the index.js, all relevant files from the src folder are cached. However some of my resources reside in the public directory. When I run npm run build, the asset-manifest.json and precache-manifest.HASH.js only contain the HTML, mangled JS and CSS (all stuff from the src folder).

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

How can I tell the service worker to additionally cache specific files from the 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的条目:

But I want it to also contain entries for these urls:

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

它们来自 public 文件夹.

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

Alternatively: How can I add my icons for the manifest.webmanifest file in the src folder in a way such that I can reference them from the web manifest?

推荐答案

我假设您搜索的解决方案(像我一样)不会弹出.这种方法对我有用:

I assume that you search for a solution (like me) which works without ejecting. This approach worked for me:

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

2. 在您的package.json内部的npm脚本(无需弹出)中替换 react-scripts

1. Install the module react-app-rewired via yarn add -D react-app-rewired

2. Replace react-scripts in your npm scripts (not needed for eject) inside your package.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"

在与package.json相同的级别上创建config-overrides.js文件

Create a config-overrides.js file in the same level as your package.json

我的文件看起来像这样(因为我还想为自己的api添加一个具有更复杂的缓存选项的服务工作者)，但是 globPatterns 和 globDirectory 是您的文件寻找.添加此模式后，将匹配的文件(在我的情况下为图像，音乐和声音)添加到生成的precache-manifest- {hash}中.

My file looks like this (because I also want to add an own service worker with more sophisticated caching options for my apis) but globPatterns and the globDirectory is what your looking for. After adding this patterns, the matching files (in my case images, music and sounds) were added to the generated 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;
  }
}

PS:如果您需要custom-service.worker.js文件才能使其正常工作，则 workbox.precaching.precacheAndRoute([])应该足以作为此文件的内容，但工作箱文档对于那些缓存内容也很有趣

P.S.: if you need a custom-service.worker.js file to get it work, workbox.precaching.precacheAndRoute([])should be sufficient as content for this file, but the workbox docs are also very interesting for those caching stuff

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