2016-09-26 7 views
0

Ich versuchte, das Fetch-Ereignis in Service-Arbeiter zu verwenden, aber er arbeitete nicht für mich.fetch nicht in Service-Arbeiter

self.addEventListener('activate', function(event) { 
    console.log('Activated', event); 
    fetch('/embed_testing/notification/main.js').then(response => 
      function() { 
       console.log(response) 
      }); 
}); 

self.addEventListener('fetch', function(event) { 
    console.log("heyyyo"); 
    if (event.request.url === new URL('/', location).href) { 
    event.respondWith(
     new Response("<h1>Hello!</h1>", { 
     headers: {'Content-Type': 'text/html'} 
     }) 
    ) 
    } 
}); 

irgendwelche Ideen, warum es nicht funktioniert?

Antwort

0

Eine fetch() Anforderung, die aus einem Service-Mitarbeiter stammt, löst nicht den Ereignishandler desselben Service-Mitarbeiters fetch aus. (Wenn dies der Fall ist, können Sie sich leicht Szenarien vorstellen, in denen Sie in eine rekursive Schleife geraten sind.)

Wenn Sie schnell testen müssen, ob Ihr fetch Event-Handler funktioniert, scheint es, was Sie in diesem Fall tun Am einfachsten ist es wahrscheinlich, einfach die JavaScript-Konsole in DevTools zu öffnen und manuell eine fetch('/path/to/whatever') auszuführen. Ein fetch() aus der JavaScript-Konsole löst den Ereignishandler fetch eines Service-Mitarbeiters aus.

Wenn Sie sich für etwas interessieren, das nicht nur ein Test ist, sondern die Logik in einem fetch Event-Handler mit Code außerhalb des Handlers implementiert, dann wäre der empfohlene Weg, den Code in ein Standalone-Funktion, und rufen Sie diese Funktion dann innerhalb des fetch-Ereignishandlers und von wo auch immer in Ihrem Service-Mitarbeiter, dass es relevant ist.

+0

Sie mir geben können ein beispiel, wie man fetch in service worker benutzt, um eine js in meinem projekt zu bekommen? – user6609184

+0

Ich bin mir nicht sicher, was du meinst? Wenn ich raten müsste, würden Sie vielleicht darüber sprechen, wie Sie eine externe JavaScript-Datei in Ihren Service-Mitarbeiter importieren, damit Sie diese in Ihrem globalen Umfeld nutzen können? Wenn das der Fall ist, dann möchten Sie die Methode ['importScripts()'] (https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts) verwenden, die synchron anfordert und ein externes Skript auswerten –

0

Falls Sie Ihre Anwendung in Chrom testen, versuchen Flag „Bypass für Netzwerk“ in dev-Tool auf dem „Application“ Tab deaktivieren (wählen Sie „Service Arbeiter“ auf der linken Seite)