reactjs - 使用 React 在 PWA 中注册缓存文件

Question

有人知道如何使用 React 缓存 PWA 文件吗？

我正在使用自定义服务工作人员，并且我正在尝试注册必要的文件以在离线模式下运行应用程序，但无论我如何努力，我永远无法做到这一点，因为服务器找不到他们。我已经尝试过这种方式:

const cacheUrls = [
        '/',
    ];

self.addEventListener('install', event => {

    const promesaDeInstalacion = caches.open('cache-3') 
        .then( cache => { 
          return cache.addAll(
            cacheUrls
            );
    });

    event.waitUntil(promesaDeInstalacion);
});

其中cacheUrls是数组，我将在其中指示哪些文件将保存在缓存中。

为此我也尝试过这样的方式:

const cacheUrls = [
    '/',
    'build/static/css/**.css',
    'build/static/js/**.js',
    'build/media/**.jpg'
];

也来自此:

const cacheUrls = [
    '/',
    '/index.html',
    '/static/css/',
    '/static/js/',
    '/static/media/',
];

但是结果总是一样的。所以我不知道如何缓存文件以使我的 PWA 离线。

Answer 1

解决了通过这种方式将文件添加到缓存的问题:

const cacheUrls = [
"static/css/main.c16ed571.chunk.css",
"static/js/1.2dd891c4.chunk.js",
"static/js/main.182aaaa5.chunk.js",
"static/js/runtime~main.229c360f.js"
]