Registrera service worker från HTML

Äldre webbläsare stöder inte service workers. Kontrollera alltid funktionaliteten med "serviceWorker" in navigator innan du anropar register; annars kastas ett fel i webbläsare som saknar API:et. Det går inte att använda en polyfill – service workers kan inte polyfillas eftersom de kräver integration på webbläsarnivå.

Scope är det sökvägsprefix som workern styr. Som standard är scope samma som katalogen där worker-filen finns: /sw.js styr alla URL:er under /. Om du vill registrera en worker med ett djupare scope från en annan filplats måste du ange scope-alternativet OCH skicka headern Service-Worker-Allowed.

Placera sw.js i programmets rot (/sw.js) så att dess standardscope omfattar hela webbplatsen. Djupare sökvägar (/app/sw.js) begränsar scopet till /app/ och dess undersökvägar, vilket sällan är vad du vill.

Registrera workern efter att sidan har lästs in för att undvika att konkurrera om bandbredd under den kritiska renderingen: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). PWA-funktionerna aktiveras vid senare besök utan att fördröja det första besöket.

Webbläsaren kontrollerar automatiskt om sw.js har uppdaterats, vanligtvis var 24:e timme och vid de flesta sidladdningar. Om filens innehåll har ändrats hämtas och installeras den nya workern, som väntar i tillståndet "waiting" tills alla befintliga flikar stängs – därefter aktiveras den.

registration.update() utlöser manuellt en uppdateringskontroll. self.skipWaiting() inuti den nya sw.js aktiverar den omedelbart utan att vänta på att flikarna ska stängas. Kombinera dem för beteendet "kör alltid den senaste workern", men tänk på att detta kan orsaka nya hämtningar mitt i en session.

registration.unregister() tar bort workern. Det är användbart under utveckling om en felaktig worker stör webbplatsen. I Chrome DevTools erbjuder Application → Service Workers en knapp med texten "Unregister" för samma ändamål vid felsökning.

Om du registrerar en worker över HTTP, utan HTTPS, misslyckas det tyst – service workers kräver ett säkert ursprung (HTTPS eller localhost under utveckling). Kontrollera konsolen efter meddelandet "An SSL certificate error occurred" om registreringen inte börjar fungera.

Workern har ingen åtkomst till DOM. Om du vill skicka meddelanden använder du navigator.serviceWorker.controller.postMessage() från sidan och self.addEventListener("message", handler) i workern, och tvärtom. Det är användbart för ogiltigförklaring av cache, versionskontroller och anpassade händelser.

Vid det första besöket installeras workern, men den börjar styra sidor först efter att sidan har laddats om. Om du vill att den ska styra den första navigeringen direkt anropar du self.clients.claim() i activate-händelsen – användbart för offline-first-appar.

Registrera service workers från sidans JavaScript med navigator.serviceWorker.register("/sw.js") efter att du har kontrollerat funktionaliteten. Placera sw.js i programmets rot för att få ett fullständigt scope. Registrera den vid sidans load för att undvika konkurrens med den kritiska renderingen. Uppdateringar kontrolleras automatiskt med jämna mellanrum; tvinga fram en uppdatering med registration.update eller skipWaiting. HTTPS krävs för att förhindra att en skadlig worker injiceras.