5

我正在寻找缓存动态链接页面的内容。我有一个简单的 index.html 并注册了一个服务工作者，并且想要设置它，当你到达这个页面时，它会动态缓存链接指向的内容（这个想法是第二个页面不会包含在静态安装事件）。

基本上我正在设计一个页面，该页面将链接到我想要存储在缓存中的推荐/相关页面。当用户单击指向推荐的相关页面的链接时，我希望它从缓存中加载。

索引.html：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <h3>I want to cache</h3>
    <a href="page2.html">this link to my second page!</a> 
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').then(function(reg) {
        // registration worked
        console.log('Registration succeeded. Scope is ' + reg.scope);
      }).catch(function(error) {
        // registration failed
        console.log('Registration failed with ' + error);
      });
    }
  </script>
  </body>    
</html>

page2.html：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script2.js"></script>
  </head>
  <body>
    <h1>This is my second page!</h1>
    <h3>I want everything from this page to be stored in the cache.</h3>
  </body> 
</html>

这是 plunkr：https ://plnkr.co/edit/YIAacgkuboyRBkv10hfl?p=catalogue

如何设置我的 fetch 事件以动态缓存第二页的内容，而无需将 page2.html 显式放入我的静态安装事件中？

4

2 回答 2

2

根据您更新的问题，您可以使用Client.postMessage()来完成。

在您的客户端/html/脚本中 

<a href="/url/cache-this" class="precache"></a>
<script>
if ('serviceWorker' in navigator) {

  // ensure service worker is ready, you can also put this into DOM 'ready' or 'load' event
  navigator.serviceWorker.ready.then(function (reg) {

    var data = {
      action: "precache", 
      url: $('.precache').attr('href') // if you had more than an url need to be cached, do a loop to collect all data
    };
    // NOTE: the 'action' is optional, but it is nice to separate your message type, in case you have a lot of communication between DOM and service worker.

    // message to SW a stringified string of data.
    navigator.serviceWorker.controller.postMessage(JSON.stringify(data));

  });
}
</script>

在您的服务人员中。 

self.addEventListener('message', event => {

  if (event.data) { 
    let data = JSON.parse(event.data); // parse the message back to JSON
    if (data.action == "precache") { // check the action
        self.toolbox.precache([data.url]); // here you can use sw-toolbox or anything to cache your stuff.
    }
  }
});

编辑：修正错别字

于 2016-07-07T05:12:53.267 回答
0

如果您的链接目标具有“您的站点/页面/”之类的模式，您可以为此放置工具箱缓存路由器

toolbox.router.get('/myapp/pages/*', toolbox.networkFirst);

这是动态缓存的另一种解决方案

于 2016-07-14T17:02:33.353 回答