安装ServiceWorker缓存

我想弄清楚如何在安装时缓存动态页面？我目前的页面是/product/1/view安装ServiceWorker缓存

self.addEventListener('install', function (event) { 
event.waitUntil(
     caches.open('kiosk-assets').then(function (cache) { 
      return cache.addAll([ 
       '/' // This is the problem it caches the origin path i need the current page cached. See register below 
       '/css/product.min.css' 
      ]) 
     }), 
....

这里是我如何注册我的工人。这是登记在/product/1/view

window.navigator.serviceWorker.register('/sw.js', {scope: `/product/${id}/view`})

我可以改变我如何注册，如果这可能是一种可能性。

来源

2017-08-05 Tom

你从哪里注册SW？并且，注册是否成功，您所发布的内容如上？您是否可以记录范围并查看其范围是否符合您的要求？ –

在安装事件中，sw不知道它可能控制什么，甚至在注册和激活之后，它是否控制DOM来获取当前url。您可能必须在注册员和工作者之间建立消息线程并缓存消息 –

我不认为，你能做到这一点onInstall

至少不是通过自身的服务人员。出于简单的原因，在安装服务人员的同时，它不知道它正在控制/将控制哪些客户端。

此外，即使是一个活跃的serviceworker也无法控制DOM。因此，它无法知道当前的网址是什么。

您可以缓存在activate的URL，或fetch事件

，或者

你需要在客户端ping通的工人，而它正在安装它。

如果严格缓存登记页面onInstall是所有你需要的话，

通过postMessage从注册工人

if ('serviceWorker' in navigator) { 
navigator.serviceWorker.register('sw.js') 
    .then(function (success) { 
     console.log('scope', success.scope); 
     if (success.installing) { 
      let sw = success.installing; 
      sw.addEventListener('statechange', function (event) { 
       if (event.target.state == 'installed') { 
        let loc = window.location.toString(); 
        let message = { 
         action: 'cache', 
         location: loc 
        } 
        sw.postMessage(message); 
       } 
      }) 
     } 
    }); 
}

的页面发送一条消息，工人内使用message事件，以缓存url

来源

2017-08-05 10:16:14

您应该使用sw-precache库来静态和动态缓存数据。

集成它与你建立环境（Gulp，Grunt，Webpack）。 Sw-precache服务所有静态文件并相应地进行更新。 SW-预缓存具有填补满足您的需要

您可以了解这里的图书馆runtime-caching选项 - https://github.com/GoogleChrome/sw-precache

来源

2017-08-05 11:31:30

安装ServiceWorker缓存

回答

相关问题