服务工作者与共享工作者

Question

What is the difference between Service Worker and Shared Worker?

When should I use Service Worker instead of Shared Worker and vice versa?

Answer 1

A service worker has additional functionality beyond what's available in shared workers, and once registered, they persist outside the lifespan of a given web page.

Service workers can respond to message events, like shared workers, but they also have access to additional events. Handling fetch events allows service workers to intercept any network traffic (originating from a controlled page) and take specific actions, including serving responses from a Request / Response cache. There are also plans to expose a push event to service workers, allowing web apps to receive push messages in the "background".

The other major difference relates to persistence. Once a service worker is registered for a specific origin and scope, it stays registered indefinitely. (A service worker will automatically be updated if the underlying script changes, and it can be either manually or programmatically removed, but that's the exception.) Because a service worker is persistent, and has a life independent of the pages active in a web browser, it opens the door for things like using them to power the aforementioned push messaging—a service worker can be "woken up" and process a push event as long as the browser is running, regardless of which pages are active. Future web platform features are likely to take advantage of this persistence as well.

There are other, technical differences, but from a higher-level view, those are what stand out.

Answer 2

A SharedWorker context is a stateful session and is designed to multiplex web pages into a single app via asynchronous messaging (client/server paradigm). Its life cycle is domain based , rather than single page based like DedicatedWorker (two-tier paradigm).

A ServiceWorker context is designed to be stateless . It actually is not a persistent session at all - it is the inversion of control (IoC) or event-based persistence service paradigm. It serves events, not sessions.

One purpose is to serve concurrent secure asynchronous events for long running queries (LRQs) to databases and other persistence services (ie clouds). Exactly what a thread pool does in other languages.

For example if your web app executes many concurrent secure LRQs to various cloud services to populate itself, ServiceWorkers are what you want. You can execute dozens of secure LRQs instantly, without blocking the user experience. SharedWorkers and DedicatedWorkers are not easily capable of handling many concurrent secure LRQs. Also, some browsers do not support SharedWorkers .

Perhaps they should have called ServiceWorkers instead: CloudWorkers for clarity, but not all services are clouds.

Hopefully this explanation should lead you to thinking about how the various Worker types were designed to work together. Each has its own specialization, but the common goal is to reduce DOM latency and improve user experience in web based applications.

Throw in some WebSockets for streaming and WebGL for graphics and you can build some smoking hot web apps that perform like multiplayer console games .

Answer 3

2022 06 Update

WebKit added support for the SharedWorker recently, see the details of the resolution in the issue link mentioned below.

2020 11 Update

Important detail for anyone interested in this discussion: SharedWorker is NOT supported by WebKit (was intentionally removed ~v6 or something).

WebKit team are explicitly suggesting to use ServiceWorker wherever SharedWorker might seem relevant.

For a community wish to get this functionality back to WebKit see this (unresolved as of now) issue.

Answer 4

Adding up to the previous great answers. As the main difference is that ServiceWorker is stateless (will shut down and then start with clear global scope) and SharedWorker will maintain state for the duration of the session.

Still there is a possibility to request that ServiceWorker will maintain state for the duration of a message handler.

s.onmessage = e => e.waitUntil((async () => {
  // do things here
  // for example issue a fetch and store result in IndexedDb
  // ServiceWorker will live till that promise resolves
})())

The above code requires that the ServiceWorker will not shut down till the promise given as the parameter to waitUntil resolves. If many messages are handled concurrently in that manner ServiceWorker will not shut down untill all promises are resolved.

This could be possibly used to prolong ServiceWorker life indefinitely making it effectively a SharedWorker . Still, do keep in mind that browser might decide to force a shut down if ServiceWorker goes on fo too long.