Verwenden Sie Service Worker, um Anfragen beim ersten Laden meiner Site abzufangen?

Question

TL; DR - Ich möchte, dass mein Service-Mitarbeiter sofort nach dem ersten Besuch meiner Site aktiviert wird, anstatt nach der ersten Aktualisierung.

Details:

ich eine progressive Web-App-Service Arbeitnehmer aufgebaut haben, aber haben, dass auf der ersten Last (wenn die SW installiert ist) wird es nicht abfangen alle Netzwerkanfragen, bis der Benutzer aktualisiert die Seite bemerkt.

Gibt es irgendetwas, was ich tun kann, damit der Service-Mitarbeiter sofort nach der Installation Anfragen abfängt?

Answer 1

Sie können in der Tat, indem Sie eine Kombination aus skipWaiting und clients.claim wie unten gezeigt verwenden.

Dies führt dazu, dass der Service-Mitarbeiter sofort die Kontrolle über Netzwerkanforderungen von der Seite übernimmt.

self.addEventListener('install', event => { 
    // Bypass the waiting lifecycle stage, 
    // just in case there's an older version of this SW registration. 
    event.waitUntil(self.skipWaiting()); 
}); 

self.addEventListener('activate', event => { 
    // Take control of all pages under this SW's scope immediately, 
    // instead of waiting for reload/navigation. 
    event.waitUntil(self.clients.claim()); 
});