1. 首页
  2. 问答
  3. 有没有什么办法可以缓存服务人员中定义的文件夹/路径的所有文件？</p> <pre><code>self.addEventListener('install', event => { event.waitUntil(caches.open('static-${version}') .then(cache => cache.addAll([ '/styles.css', '/script.js' ])) ); }); </code></pre> <p>我怎样才能在服务人员定义的，这样不是写的所有文件的路径/目录：

有没有什么办法可以缓存服务人员中定义的文件夹/路径的所有文件？</p> <pre><code>self.addEventListener('install', event => { event.waitUntil(caches.open('static-${version}') .then(cache => cache.addAll([ '/styles.css', '/script.js' ])) ); }); </code></pre> <p>我怎样才能在服务人员定义的，这样不是写的所有文件的路径/目录：

2017-10-19 162 views
0

在服务工作者，我可以定义资源的服务人员获取过程中这些被缓存的阵列下面就开始提到的名称，服务工作者从给定的路径/目录中选择所有文件并将所有文件添加到缓存中

来源

2017-10-19 Mhod Yasin

回答

0

这是不可能的。 SW（或者浏览器）对于Web服务器上特定路径中的文件没有任何线索。您必须提供要缓存的文件的名称。关于同一问题的更多信息here.

您是否在使用某些构建工具来自动生成文件列表？如果没有，你最有可能的应该:)

编辑：

一个用于SW工具最常用的图书馆是针线。他们提供资产runtime-caching和precaching。他们还为例如构建工具插件。 Webpack和Gulp。

运行时缓存通过从缓存中提供资产（如果缓存中存在资源并且无论如何将其从服务器更新）来工作。基本上，每个新的资产将首先从网络请求，然后在随后的请求中从缓存中返回。

EDIT2：

是的，你可以用针线不NPM在一定程度上。您需要运行NPM脚本等来收集要缓存的文件的文件名，但您仍然可以通过在手写的SW文件中导入Workbox.js脚本来实现运行时缓存。

只是说

importScript("https://unpkg.com/[email protected]/build/importScripts/workbox-sw.prod.v2.1.0.js")

在你的SW顶部进口的最新（截至目前）针线的版本。你可以看到这是runtime-caching example here too中发生的情况。

您也可以下载上面的.js文件，并将其放置在您自己的服务器上，并将其从相对路径导入。

来源

2017-10-19 16:10:15 pate

+0

谢谢@pate。现在我正在考虑自动生成文件列表。你能建议我做到这一点的最佳方式吗？ –

+0

我可以在运行时缓存吗？ –

+0

@MhodYasin是的，我编辑了我的答案 – pate

0

使用工作箱sw进行运行时缓存。

服务worker.js：

importScripts('https://unpkg.com/[email protected]/build/importScripts/workbox-sw.dev.v0.0.2.js'); 
importScripts('https://unpkg.com/[email protected]/build/importScripts/workbox-runtime-caching.prod.v1.3.0.js'); 
importScripts('https://unpkg.com/[email protected]/build/importScripts/workbox-routing.prod.v1.3.0.js'); 

const assetRoute = new workbox.routing.RegExpRoute({ 
    regExp: new RegExp('^http://localhost:8081/jobs/static/*'), 
    handler: new workbox.runtimeCaching.CacheFirst() 
}); 

const router = new workbox.routing.Router(); 
//router.addFetchListener(); 
router.registerRoutes({routes: [assetRoute]}); 
router.setDefaultHandler({ 
    handler: new workbox.runtimeCaching.CacheFirst() 
});

脚本在我的HTML文件来加载Servcie工人。

<script> 
    if ('serviceWorker' in navigator) { 
     window.addEventListener('load', function() { 
      navigator.serviceWorker.register('http://localhost:8081/jobs/static/service-worker.js?v=4').then(function(registration) { 
      // Registration was successful 
      console.log('ServiceWorker registration successful with scope: ', registration.scope); 
     }, function(err) { 
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err); 
      }); 
     }); 
    } 
</script>

来源

2017-10-23 14:23:32

+0

缓存以http：// localhost：8081/jobs/static // *开头的所有请求 –

相关问题

 相关问题