Question

我有一个通过webpack生成的构建文件夹，任何想法如何我可以缓存整个文件夹，我尝试了以下但无济于事

self.addEventListener('install', e => {
    e.waitUntil(
        caches.open('notes').then(cache => {
            return cache.addAll([
            './build/*',
        ])
        .then(() => self.skipWaiting());
    }))
});

self.addEventListener('activate',  event => {
    event.waitUntil(self.clients.claim());
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

有关如何缓存整个构建文件夹的任何帮助＆＃39;文件。我没有使用webpack插件，只是写在SW上。

Answer 1

cache.addAll()将一个URL数组作为参数。 './build/*'不是一个URL数组，当在用户的服务工作者内部运行时，这种通配符模式没有任何意义。浏览器。

您真正想要做的是使用通配符模式，该模式在构建时进行评估，在执行Webpack构建的同一台计算机上本地进行评估，该计算机可以访问build/中的本地文件目录并可以生成它们的完整列表。您需要在Webpack构建过程中表达该意图，而不是在服务工作者的cache.addAll()运行中表达。

有一些Webpack插件，如sw-precache-webpack-plugin和offline-plugin，它们可以在构建时自动化扩展通配符并注入生成的文件列表（以及版本信息，也是超级版本） - 重要的）到服务工作者文件，然后在你的用户中运行＆＃39;浏览器。你提到你不想使用插件而是编写自己的服务工作者，但我建议至少查看这些插件的来源（或sw-precache project），因为你和＃39;几乎可以肯定会采用类似的方法。

缓存服务工作者

1 个答案: