2017-08-24 4 views
1

私はサービスワーカーの使用方法を学んでいますが、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> 

答えて

1

おそらくできるだけ早くサービス労働者をアクティブにするために)(self.clients.claimを必要としています。

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

参照:What is the use of `self.Clients.claim()`

関連する問題