0

我有一个通过 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);
        })
    );
});

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

4

1 回答 1

2

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

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

有一些 Webpack 插件，例如sw-precache-webpack-pluginand offline-plugin，可以在构建时自动扩展通配符并将生成的文件列表（连同版本信息，这也是非常重要的）注入到服务工作者文件中，这反过来得到在用户的浏览器中运行。您提到您不想使用插件而是编写自己的服务工作者，但我建议至少查看这些插件（或sw-precache项目）的源代码，因为您几乎肯定会最终遵循类似的方法。

于 2017-01-17T20:57:08.773 回答