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'
];

其中双星号**用于子文件夹，单星号*用于任何以.fileextension结尾的文件。

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

使用React

2 个答案: