En introduktion til JavaScript Service Workers

En introduktion til JavaScript Service Workers

Har du nogensinde spekuleret på, hvordan nogle websteder ser ud til at blive ved med at fungere, selv når du er offline? Hemmeligheden er enkel: Disse websteder har servicemedarbejdere.





hvad er skaberfonden på tiktok

Servicemedarbejdere er nøgleteknologien bag mange af de native app-lignende funktioner i moderne webapplikationer.





Hvad er servicemedarbejdere?

Servicemedarbejdere er en specialiseret type JavaScript-webarbejdere . En service worker er en JavaScript-fil, der fungerer lidt som en proxy-server. Det fanger udgående netværksanmodninger fra din applikation, så du kan oprette tilpassede svar. Du kan for eksempel vise cachelagrede filer til brugeren, når de er offline.





Servicemedarbejdere lader dig også tilføje funktioner som baggrundssynkronisering til dine webapplikationer.

Hvorfor servicemedarbejdere?

Webudviklere har i lang tid forsøgt at udvide mulighederne for deres apps. Før der kom servicearbejdere, kunne man bruge forskellige løsninger til at gøre dette muligt. En særlig bemærkelsesværdig var AppCache, som gjorde cache-ressourcer praktiske. Desværre havde det problemer, der gjorde det til en upraktisk løsning for de fleste apps.



AppCache så ud til at være en god idé, fordi det gav dig mulighed for at specificere aktiver til cache virkelig nemt. Den lavede dog mange antagelser om, hvad du forsøgte at gøre, og gik så grueligt i stykker, da din app ikke fulgte disse antagelser nøjagtigt. Læs Jake Archibald's (desværre med titlen, men velskrevet) Application Cache er en Douchebag for flere detaljer. (Kilde: MDN )

Servicemedarbejdere er det nuværende forsøg på at reducere begrænsningerne ved webapps uden ulemperne ved teknologi som AppCache.





Use Cases for Service Workers

Så hvad lader servicemedarbejdere dig gøre? Servicemedarbejdere giver dig mulighed for at tilføje funktioner, der er karakteristiske for native apps, til din webapplikation. De kan også give en normal oplevelse på enheder, der ikke understøtter servicemedarbejdere. Apps som denne kaldes nogle gange Progressive Web Apps (PWA'er) .

Her er nogle af de funktioner, servicemedarbejdere gør mulige:





  • At lade brugeren blive ved med at bruge appen (eller i det mindste dele af den), når de ikke længere er forbundet til internettet. Servicemedarbejdere opnår dette ved at betjene cachelagrede aktiver som svar på anmodninger.
  • I Chromium-baserede browsere er en servicemedarbejder et af kravene for, at en webapp kan installeres.
  • Servicemedarbejdere er nødvendige for, at din webapplikation kan implementere push-meddelelser.

En servicemedarbejders livscyklus

Servicemedarbejdere kan kontrollere anmodninger for et helt websted eller kun en del af webstedets sider. En bestemt webside kan kun have én aktiv servicemedarbejder, og alle servicemedarbejdere har en hændelsesbaseret livscyklus. En servicemedarbejders livscyklus ser generelt sådan ud:

  1. Registrering og download af arbejderen. En servicemedarbejders levetid starter, når en JavaScript-fil registrerer den. Hvis registreringen lykkes, downloader servicearbejderen og begynder derefter at køre i en speciel tråd.
  2. Når en side, der styres af servicearbejderen, indlæses, modtager servicearbejderen en 'installer'-hændelse. Dette er altid den første begivenhed, en servicemedarbejder modtager, og du kan konfigurere en lytter til denne begivenhed inde i arbejderen. 'install'-hændelsen bruges generelt til at hente og/eller cache de ressourcer, som servicemedarbejderen har brug for.
  3. Når servicemedarbejderen er færdig med at installere, modtager den en 'aktiver'-hændelse. Denne hændelse gør det muligt for arbejderen at rydde op i overflødige ressourcer brugt af tidligere servicemedarbejdere. Hvis du opdaterer en servicemedarbejder, udløses aktiveringshændelsen kun, når det er sikkert at gøre dette. Dette er, når der ikke er nogen indlæste sider, der stadig bruger den gamle version af serviceworkeren.
  4. Derefter har servicemedarbejderen fuld kontrol over alle sider, der blev indlæst, efter at den blev registreret.
  5. Den sidste fase af livscyklussen er redundans, som opstår, når servicemedarbejderen fjernes eller erstattes af en nyere version.

Sådan bruges Service Workers i JavaScript

Service Worker API ( MDN ) giver den grænseflade, der giver dig mulighed for at oprette og interagere med servicemedarbejdere i JavaScript.