gpt4 book ai didi

android - React (CRA) Service Worker 缓存 "public"文件夹

转载 作者:行者123 更新时间:2023-12-02 23:18:15 25 4
gpt4 key购买 nike

执行 create-react-app 并启用 index.js 中的服务工作线程后,src 文件夹中的所有相关文件都会被缓存。不过,我的一些资源位于 public 目录中。当我运行 npm run build 时,asset-manifest.json 和 precache-manifest.HASH.js 仅包含 HTML、损坏的 JS 和CSS(来自 src 文件夹的所有内容)。

如何告诉 Service Worker 额外缓存 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"
}
];

但我希望它也包含这些网址的条目:

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

它们来自public文件夹。

或者:如何为 src 文件夹中的 manifest.webmanifest 文件添加图标,以便我可以从 Web list 中引用它们?

最佳答案

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

  1. 安装模块 react-app-rewired通过yarn add -D react-app-rewired
  2. 替换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 添加更复杂的缓存选项),但是 globPatternsglobDirectory 是您的文件寻找。添加此模式后,匹配的文件(在我的例子中为图像、音乐和声音)被添加到生成的 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([])该文件的内容应该足够了,但是 the workbox docs对于那些缓存的东西也很有趣

关于android - React (CRA) Service Worker 缓存 "public"文件夹,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54840929/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com