服务工作者缓存

Question

我有以下代码，它应该缓存3个文件，但是我重新加载页面，我进入开发工具和网络，它说我的所有文件都来自服务工作者。我的代码正确，只有3个文件被捕获或所有文件都被捕获了？

let cache_name = 'v1'
let cache_files = [
 './style/general.css',
 './style/authenticate.css',
'./javascript/app.js'
];


self.addEventListener('install',function(e){
   console.log('[ServiceWorker] installed')
   e.waitUntil(
    caches.open(cache_name).then(function(cache){
    console.log('[ServiceWorker] Caching ',cache_files)
     return cache.addAll(cache_files)
  })
 )
});

self.addEventListener('activate',function(e){
  console.log('[ServiceWorker] activated')
  e.waitUntil(
    caches.keys().then(function(cache_names){
       return Promise.all(cache_names.map(function(this_cache_name){
         if(this_cache_name !== cache_name){
           console.log('[ServiceWorker] removing cached files      from',this_cache_name)
      return caches.delete(this_cache_name)
     }
    }))
   })
 )
})

self.addEventListener('fetch',function(e){
   e.respondWith(
     caches.match(e.request).then(function(response) {
        return response || fetch(e.request);
  })
 );
})

如何判断缓存哪些文件以及哪些文件不缓存？

Answer 1

我不完全理解你的问题。

您的代码执行以下操作：

• 安装时，阵列中的三个文件将放入名为“v1”
的缓存中
• 在将来的激活中，将缓存缓存，并且缓存缓存中不属于缓存名称 cache_name 的所有项目（即，如果您更改了将来，cache_name设置为“v2”，所有“v1”条目将自动删除）
• 在从客户端获取事件时，将检查缓存中是否有所请求的文件;如果从缓存中找到文件，则SW返回，如果没有，则SW将请求转发到网络

您可以通过左侧的“应用程序”标签的“缓存存储”窗格检查Chrome开发工具中的缓存文件。检查一下并滚动到底部：https://developers.google.com/web/tools/chrome-devtools/manage-data/local-storage