正在缓存service worker中的整个文件夹

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);
})
);
});

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

Answer 1

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

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

有一些Webpack插件，如sw-precache-webpack-plugin和offline-plugin，可以在构建时自动扩展通配符，并将生成的文件列表(以及版本控制信息，这也是非常重要的)注入到服务工作者文件中，然后在用户的浏览器中运行。您提到您不想使用插件，而是编写自己的服务人员，但我建议您至少查看这些插件(或sw-precache项目)的源代码，因为您几乎肯定会采用类似的方法。