2017-08-24 1 views
1

Ich lerne, wie Service Worker zu verwenden, mein Problem ist, dass beim Klicken auf die Schaltfläche fetch() einige Datei, wenn die Seite zum ersten Mal geladen wird kein Ereignis fetch ausgelöst , aber nach der Seite manuell aktualisieren Sie die Taste erneut, das fetch Ereignis alsService-Mitarbeiter holen Ereignis wird nicht ohne nächste Aktualisierung

erwartet erhalten, klicken gefeuert

Bitte leiten, wie diesen dank

Chrome zu beheben: 60

Service-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> 

Antwort

1

Sie brauchen wahrscheinlich eine self.clients.claim() so schnell wie möglich den Service-Arbeiter zu aktivieren.

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

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

Verwandte Themen