Standaard vereist de levenscyclus van de servicemedewerker dat wanneer een bijgewerkte servicemedewerker wordt gevonden en geïnstalleerd , alle geopende tabbladen die de huidige servicemedewerker beheert, moeten worden gesloten of een navigatie moeten ondergaan voordat de bijgewerkte servicemedewerker wordt geactiveerd en de controle overneemt.
In veel gevallen kan het prima zijn om dit te zijner tijd te laten gebeuren, maar in sommige gevallen wilt u de gebruiker misschien waarschuwen dat er een update voor de servicemedewerkers in behandeling is, en vervolgens het proces van het overschakelen naar de service automatiseren. nieuwe servicemedewerker. Om dit te doen, moet u wat code toevoegen aan uw pagina en aan uw servicemedewerker.
De code die u op uw pagina moet plaatsen
De volgende code wordt uitgevoerd in een inline <script> -element met behulp van JavaScript-modules die zijn geïmporteerd uit een door CDN gehoste versie van workbox-window . Het registreert een servicemedewerker via workbox-window en reageert als de servicemedewerker vastloopt in de wachtfase. Wanneer een wachtende servicemedewerker wordt gevonden, informeert deze code de gebruiker dat er een bijgewerkte versie van de site beschikbaar is en wordt hem gevraagd opnieuw te laden.
<!-- This script tag uses JavaScript modules, so the proper `type` attribute value is required -->
<script type="module">
// This code sample uses features introduced in Workbox v6.
import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-window.prod.mjs';
if ('serviceWorker' in navigator) {
const wb = new Workbox('/sw.js');
let registration;
const showSkipWaitingPrompt = async (event) => {
// Assuming the user accepted the update, set up a listener
// that will reload the page as soon as the previously waiting
// service worker has taken control.
wb.addEventListener('controlling', () => {
// At this point, reloading will ensure that the current
// tab is loaded under the control of the new service worker.
// Depending on your web app, you may want to auto-save or
// persist transient state before triggering the reload.
window.location.reload();
});
// When `event.wasWaitingBeforeRegister` is true, a previously
// updated service worker is still waiting.
// You may want to customize the UI prompt accordingly.
// This code assumes your app has a promptForUpdate() method,
// which returns true if the user wants to update.
// Implementing this is app-specific; some examples are:
// https://open-ui.org/components/alert.research or
// https://open-ui.org/components/toast.research
const updateAccepted = await promptForUpdate();
if (updateAccepted) {
wb.messageSkipWaiting();
}
};
// Add an event listener to detect when the registered
// service worker has installed but is waiting to activate.
wb.addEventListener('waiting', (event) => {
showSkipWaitingPrompt(event);
});
wb.register();
}
</script>
Als ze dit accepteren, vertelt messageSkipWaiting() de wachtende servicemedewerker om self.skipWaiting() aan te roepen, wat betekent dat het zal beginnen te activeren. Eenmaal geactiveerd, zal de nieuwe servicemedewerker de controle over alle bestaande clients overnemen, waardoor de controlling gebeurtenis in workbox-window wordt geactiveerd. Wanneer dit gebeurt, wordt de huidige pagina opnieuw geladen met de nieuwste versie van alle vooraf in de cache opgeslagen assets en eventuele nieuwe routeringslogica die in de bijgewerkte servicemedewerker wordt aangetroffen.
De code die u in uw servicemedewerker moet invoeren
Zodra u de code uit de vorige sectie op uw pagina heeft, moet u een code aan uw servicemedewerker toevoegen waarmee hij weet wanneer hij de wachtfase moet overslaan. Als u generateSW van workbox-build gebruikt en de skipWaiting optie is ingesteld op false (de standaard), dan bent u klaar om te gaan, omdat de onderstaande code automatisch wordt opgenomen in uw gegenereerde servicemedewerkerbestand.
Als u uw eigen servicemedewerker schrijft, misschien in combinatie met een van de buildtools van Workbox in injectManifest modus , moet u zelf de volgende code toevoegen:
addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});
Dit luistert naar berichten die vanuit het workbox-window naar de servicemedewerker worden verzonden met de type SKIP_WAITING , en wanneer dat gebeurt, wordt self.skipWaiting() aangeroepen. De methode messageSkipWaiting() in workbox-window , weergegeven in het eerdere codevoorbeeld, is verantwoordelijk voor het verzenden van dit bericht.
Moet u een prompt weergeven?
Dit is geen patroon dat elke toepassing die een servicemedewerker implementeert, moet volgen. Dit geldt voor geselecteerde scenario's waarbij het niet bieden van de mogelijkheid om een pagina opnieuw te laden op een servicemedewerker-update tot onverwacht gedrag kan leiden. Er zijn geen vaste regels voor de vraag of u een herlaadprompt moet weergeven, maar hier zijn een paar situaties waarin dit zinvol kan zijn:
- Je maakt veelvuldig gebruik van precaching. Als het om statische assets gaat, kun je later problemen krijgen als je een netwerk-eerst- of netwerk-alleen-strategie gebruikt voor navigatieverzoeken, maar statische assets lui laadt. Dit kan situaties veroorzaken waarin versiebeheer van assets kan veranderen en een servicemedewerker deze niet vooraf in de cache heeft geplaatst. Als u hier een herlaadknop aanbiedt, kunt u onverwacht gedrag voorkomen.
- Als u vooraf in de cache opgeslagen HTML aanbiedt. In dit geval zou u sterk moeten overwegen om een herlaadknop aan te bieden bij updates van servicemedewerkers, aangezien updates van die HTML pas worden herkend als de bijgewerkte servicemedewerker de controle overneemt.
- Als u niet voornamelijk afhankelijk bent van runtime-caching. Wanneer u bronnen tijdens runtime in de cache opslaat, hoeft u de gebruiker niet te laten weten dat deze opnieuw moeten worden geladen. Naarmate versiebeheer van assets verandert, zullen ze te zijner tijd aan de runtime-cache worden toegevoegd, ervan uitgaande dat navigatieverzoeken een netwerk-eerst- of netwerk-alleen-strategie gebruiken.
- Wanneer u een strategie voor verouderde en opnieuw valideren gebruikt, kunt u overwegen de module
workbox-broadcast-updatete gebruiken om gebruikers op de hoogte te stellen van updates van servicemedewerkers.
Of u de gebruiker op de hoogte moet stellen van updates aan een servicemedewerker, hangt af van uw toepassing en de unieke vereisten ervan. Als u merkt dat uw gebruikers vreemd gedrag vertonen wanneer u een nieuwe servicemedewerker detacheert, is dat waarschijnlijk uw beste signaal om hen hiervan op de hoogte te stellen.