服务工作者抓取事件不会触发没有下一次刷新

我正在学习如何使用服务工作者，我的问题是，当点击按钮到fetch()某些文件时，页面加载第一次没有触发任何fetch事件，但手动刷新页面，然后再次单击该按钮后，fetch事件得到预期服务工作者抓取事件不会触发没有下一次刷新

发射

请指导如何解决这一问题感谢

铬：60

服务worker.js

self.addEventListener('install', event => { 
    event.waitUntil(
     caches.open('XXX') 
      .then(cache => { 
       cache.allAll([ ... ]) 
      }) 
    ) 
}) 

self.addEventListener('activate', event => { 
    console.log('ready') 
}) 

self.addEventListener('fetch', event => { 
    console.log('fetch') 
})

的index.html

<body> 
    <button id="btn" class="button">Click</button> 

    <script> 
    (() => { 
     document.getElementById('btn').addEventListener('click',() => { 
      fetch(' ... ') 
       .then(res => { 
        return res.json() 
       }) 
       .then(res => { 
        console.log(res) 
       }) 
     }) 

     if (!('serviceWorker' in navigator)) { 
      console.log('Service Worker is not supported') 

      return 
     } 

     navigator.serviceWorker.register('/service-worker.js') 
      .then((registration) => { 
       console.log('Sevice Worker has been registered') 
      }) 
    })() 
    </script> 
</body>

来源

2017-08-24 Artisan

你可能需要一个self.clients.claim（），以尽快启动该服务工作者。

self.addEventListener('activate', function(event) { 
    event.waitUntil(self.clients.claim()); 
});

见：What is the use of `self.Clients.claim()`

来源

2017-08-25 07:31:00

服务工作者抓取事件不会触发没有下一次刷新

回答

相关问题