使用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"
]

Answer 2

试着像：

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

其中，double asterix **用于子文件夹，对于任何以.fileextension结尾的文件，只有一个asterix *。

不知道你要储存多少文件。在我的上面的例子中，您将匹配CSS direcotry中的所有CSS文件以及它的所有子目录。