En introduktion till JavaScript Service Workers

En introduktion till JavaScript Service Workers

Har du någonsin undrat hur vissa webbplatser verkar fortsätta fungera även när du är offline? Hemligheten är enkel: dessa webbplatser har servicearbetare.





Servicearbetare är nyckeltekniken bakom många av de inbyggda appliknande funktionerna i moderna webbapplikationer.





Vad är servicearbetare?

Servicearbetare är en specialiserad typ av JavaScript webbarbetare . En service worker är en JavaScript-fil som fungerar lite som en proxyserver. Den fångar upp utgående nätverksförfrågningar från din applikation, så att du kan skapa anpassade svar. Du kan till exempel visa cachade filer till användaren när de är offline.





Servicearbetare låter dig också lägga till funktioner som bakgrundssynkronisering till dina webbapplikationer.

Varför servicearbetare?

Webbutvecklare har försökt utöka funktionerna i sina appar under lång tid. Innan servicepersonal kom kunde man använda olika lösningar för att göra detta möjligt. En särskilt anmärkningsvärd sådan var AppCache, som gjorde cachningsresurser bekväma. Tyvärr hade det problem som gjorde det till en opraktisk lösning för de flesta appar.



AppCache verkade vara en bra idé eftersom det gjorde det möjligt för dig att ange tillgångar för att cache riktigt enkelt. Den gjorde dock många antaganden om vad du försökte göra och gick sedan sönder fruktansvärt när din app inte följde dessa antaganden exakt. Läs Jake Archibalds (tyvärr betitlad men välskriven) Application Cache är en Douchebag för mer detaljer. (Källa: MDN )

Servicearbetare är det nuvarande försöket att minska begränsningarna för webbappar, utan nackdelarna med teknik som AppCache.





Användningsfall för servicearbetare

Så vad exakt låter servicearbetare dig göra? Servicearbetare låter dig lägga till funktioner som är karakteristiska för inbyggda appar till din webbapplikation. De kan också ge en normal upplevelse på enheter som inte stöder servicearbetare. Sådana appar kallas ibland Progressiva webbappar (PWA) .

Lär dig att spela gitarr gratis app

Här är några av funktionerna som servicearbetare gör möjliga:





  • Låter användaren fortsätta använda appen (eller åtminstone delar av den) när de inte längre är anslutna till internet. Servicearbetare uppnår detta genom att betjäna cachade tillgångar som svar på förfrågningar.
  • I Chromium-baserade webbläsare är en tjänstearbetare ett av kraven för att en webbapp ska kunna installeras.
  • Servicearbetare är nödvändiga för att din webbapplikation ska kunna implementera push-meddelanden.

En servicearbetares livscykel

Tjänstearbetare kan kontrollera förfrågningar för en hel webbplats eller bara en del av webbplatsens sidor. En viss webbsida kan bara ha en aktiv servicearbetare, och alla servicearbetare har en händelsebaserad livscykel. Livscykeln för en servicearbetare ser i allmänhet ut så här:

  1. Registrering och nedladdning av arbetaren. En tjänstearbetares liv börjar när en JavaScript-fil registrerar den. Om registreringen lyckas, laddar servicearbetaren ner och börjar sedan köras i en speciell tråd.
  2. När en sida som kontrolleras av servicearbetaren läses in, får servicearbetaren en 'installation'-händelse. Detta är alltid den första händelsen som en servicearbetare tar emot, och du kan ställa in en avlyssnare för denna händelse inuti arbetaren. Händelsen 'install' används vanligtvis för att hämta och/eller cachelagra alla resurser som servicearbetaren behöver.
  3. När servicearbetaren har slutfört installationen får den en 'aktivera'-händelse. Denna händelse gör det möjligt för arbetaren att rensa upp redundanta resurser som använts av tidigare servicearbetare. Om du uppdaterar en servicearbetare kommer aktiveringshändelsen bara att aktiveras när det är säkert att göra detta. Detta är när det inte finns några inlästa sidor som fortfarande använder den gamla versionen av Service Worker.
  4. Därefter har servicearbetaren full kontroll över alla sidor som laddades efter att de registrerats framgångsrikt.
  5. Den sista fasen av livscykeln är redundans, som uppstår när servicearbetaren tas bort eller ersätts av en nyare version.

Hur man använder Service Workers i JavaScript

Service Worker API ( MDN ) tillhandahåller gränssnittet som låter dig skapa och interagera med tjänstearbetare i JavaScript.