服务工作者缓存整个文件夹

我有通过的WebPack生成build文件夹，任何想法如何，我可以缓存整个文件夹，我尝试以下，但无济于事服务工作者缓存整个文件夹

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。

来源

2017-01-17 Nitish Phanse

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

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

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

来源

2017-01-17 20:57:08

服务工作者缓存整个文件夹

回答

相关问题