Javascript 使用service worker缓存指向其他页面的链接_Javascript_Html_Caching_Service Worker_Progressive Web Apps

Javascript 使用service worker缓存指向其他页面的链接

javascript html caching

Javascript 使用service worker缓存指向其他页面的链接,javascript,html,caching,service-worker,progressive-web-apps,Javascript,Html,Caching,Service Worker,Progressive Web Apps,我希望缓存动态链接页面的内容。我有一个简单的index.html，其中注册了一个服务工作者，并希望将其设置为当您访问此页面时，它会动态缓存链接指向的内容（其想法是第二个页面不会包含在静态安装事件中）基本上，我正在设计一个页面，该页面将有一个指向我希望存储在缓存中的推荐/相关页面的链接。当用户单击指向推荐相关页面的链接时，我希望它从缓存加载 index.html： <!DOCTYPE html> <html> <head> <link rel

我希望缓存动态链接页面的内容。我有一个简单的index.html，其中注册了一个服务工作者，并希望将其设置为当您访问此页面时，它会动态缓存链接指向的内容（其想法是第二个页面不会包含在静态安装事件中）

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

index.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>


你好，普朗克！
我要缓存
if（导航器中的“serviceWorker”）{
navigator.serviceWorker.register（'/sw.js'）。然后（函数（reg）{
//注册成功了
console.log（'注册成功。作用域为'+reg.Scope'）；
}).catch（函数（错误）{
//注册失败
console.log（'注册失败，出现'+错误）；
});
}

第2.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>


这是我的第二页！
我希望此页中的所有内容都存储在缓存中。

以下是普朗克：

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

根据您更新的问题，您可以使用

在客户端/html/script中

编辑：修复了打字错误

如果您的链接目标具有类似“yoursite/pages/”的模式，您可以为此设置工具箱缓存路由器

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

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

请用更好的描述解释“动态”措辞，例如何时以及如何缓存？悬停时，单击或准备事件。只缓存一次或一直缓存#加载1页…基本上，我正在设计一个页面，该页面将有一个指向推荐页面的链接，我希望该页面存储在缓存中。当用户单击此链接到推荐的相关页面时，我希望将其从缓存中加载。基本上，您希望使用服务人员模拟浏览器？如果您可以在静态页面标题中发送动态链接信息，则可以从获取事件响应中读取。否则，您可以尝试解析动态链接的response.text（）。@TeoDragovic我基本上想模拟一下，是的。我不想将此相关/推荐页面宣传为几乎可以立即从缓存加载，并且可以脱机工作的页面。在这种情况下，response.text（）对我有什么作用？因此，在这种情况下，我实际上只缓存链接本身-因此页面不会脱机工作，除非我手动将需要缓存的每个项目添加到数据变量中？是的，您仍然需要告诉SW应该为您缓存什么。因为软件只在两种情况下工作——1。你告诉它应该做什么。监听即将发出的ajax请求并相应地缓存。→ 在您的情况下，您只能使用第一个选项。因此，想象我要预切的第二个页面很大，包含多个图像/文本等。您认为这个循环会收集所有数据是什么样子？是的，它会起作用，但您可以通过这种方式，或者其他方式来完成。这都是关于你的偏好。例如，您不需要将数据放在HTML中，而只需放在第一页的JS中，或者从服务器获取数据，然后将其发送到SW，或者在SW中使用

fetch

获取数据。正如您可以看到的那样，

toolbox.precache（）

将数组作为其第一个参数。所以我们只需要给它一个URL数组，所有的URL都将被缓存但是要注意性能问题，如果你告诉SW缓存10个图像，每个图像2MB，你的浏览器将下载20MB的数据用于缓存过程。因此，如果我使用你上面给出的示例，我只是获取url并预缓存，这会有效地缓存整个页面吗？

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.
    }
  }
});

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