javascript - Vad kan service workers göra som web workers inte kan?

Vad kan servicemedarbetare göra som webbarbetare inte kan? Eller tvärtom?

Det verkar som att webbarbetare är en delmängd av funktionaliteten hos servicearbetare. Är detta korrekt?

Svar #1

Buksys svar är korrekt men enligt min åsikt besvarar det inte den ursprungliga frågan, nämligen: "Vad kan service workers göra som web workers inte kan? Eller tvärtom?"

Det finns grundläggande skillnader i deras livscykel och antalet instanser per ursprung som du kan ha. Kort sagt:

               | Web Workers  | Service Workers  |
|--------------|--------------|------------------|
| Instances    | Many per tab | One for all tabs |
| Lifespan     | Same as tab  | Independent      |
| Intended use | Parallelism  | Offline support  |

Buksys svar är i princip den sista raden i tabellen. Källa: Jag tog denna tabell från Demystifying Web Workers and Service Workers av Nolan Lawson, med början från bild 35.

Specifikt, här är hur du startar och avslutar webbarbetare:

Att använda Web Workers

medan servicearbetare har sin egen livscykel, vilket faktiskt är deras "mest komplicerade del":

Servicearbetarens livscykel

Så livscykeln är en grundläggande skillnad mellan de två (en konsekvens av deras avsedda användning).

Det brukade finnas en stor skillnad i webbläsarstöd: Service workers var inte tillgängliga alls i Safari för iOS fram till 11.3 (2018-03-29), se Kan jag använda service workers? Däremot hade web workers ett mycket bättre webbläsarstöd redan 2012: Kan jag använda web workers?

Om du måste stödja IE11 kan du bara använda webbworkers: IE11 har inga service workers, och tydligen är slutet för stöd för IE11 den 14 oktober, 2025.

Det finns subtila skillnader i deras API-stöd mellan webbläsare, se HTML5 Worker Test (även av Nolan Lawson). I en viss webbläsare kan en typ av worker stödja ett visst API-anrop medan den andra inte gör det. Besök den sidan och testa din egen webbläsare!

Svar #2

Det är en stor skillnad i vad de är avsedda för:

Webbjobb

Webb-arbetare erbjuder ett enkelt sätt för webbinnhåll att köra skript i bakgrundstrådar. Arbetartråden kan utföra uppgifter utan att störa användargränssnittet. Dessutom kan de utföra I/O med hjälp av XMLHttpRequest (även om attributen responseXML och channel alltid är null). När en arbetare har skapats kan den skicka meddelanden till JavaScript-koden som skapade den genom att posta meddelanden till en händelsehanterare som specificerats av den koden (och vice versa).

Källa - Använda Web Workers

Service Worker

Service workers fungerar i huvudsak som proxyservrar som sitter mellan webbapplikationer och webbläsaren samt nätverket (när det är tillgängligt). De är avsedda att (bland annat) möjliggöra skapandet av effektiva offline-upplevelser, fånga nätverksförfrågningar och vidta lämpliga åtgärder baserat på om nätverket är tillgängligt och uppdaterade resurser finns på servern. De kommer också att tillåta åtkomst till push-notiser och API:er för bakgrundssynkronisering.

Källa - Service Worker API

Så Web Workers är praktiska för att köra resurskrävande skript utan att användargränssnittet fryser, medan Service Workers är användbara för att ändra svaret från nätverksförfrågningar (till exempel när man bygger en offlineapp).

Svar #3

Servicearbetare

Service workers är en proxy mellan webbläsaren och nätverket. Genom att avlyssna förfrågningar som görs av dokumentet kan service workers omdirigera förfrågningar till en cache, vilket möjliggör åtkomst offline.

/* main.js */

navigator.serviceWorker.register('/service-worker.js');



/* service-worker.js */

// Install 
self.addEventListener('install', function(event) {
    // ...
});

// Activate 
self.addEventListener('activate', function(event) {
    // ...
});

// Listen for network requests from the main document
self.addEventListener('fetch', function(event) {
    // ...
});

Webbjobb

Webbworkers är allmänna skript som gör det möjligt för oss att avlasta processorintensivt arbete från huvudtråden.

/* main.js */

// Create worker
const myWorker = new Worker('worker.js');

// Send message to worker
myWorker.postMessage('Hello!');

// Receive message from worker
myWorker.onmessage = function(e) {
  console.log(e.data);
}

Originalinlägg här

Relaterade artiklar