Web Sockets, Web Workers, Service Workers… these are terms you may have read or overheard. Maybe not all of them, but likely at least one of them. And even if you have a good handle on front-end development, there’s a good chance you need to look up what they mean. Or maybe you’re like me and mix them up from time to time. The terms all look and sound awful similar and it’s really easy to get them confused.
So, let’s break them down together and distinguish Web Sockets, Web Workers, and Service Workers. Not in the nitty-gritty sense where we do a deep dive and get hands-on experience with each one — more like a little helper to bookmark the next time I you need a refresher.
Quick reference
We’ll start with a high-level overview for a quick compare and contrast.
| Feature | What it is |
|---|---|
| Web Socket | Establishes an open and persistent two-way connection between the browser and server to send and receive messages over a single connection triggered by events. |
| Web Worker | Allows scripts to run in the background in separate threads to prevent scripts from blocking one another on the main thread. |
| Service Worker | A type of Web Worker that creates a background service that acts middleware for handling network requests between the browser and server, even in offline situations. |
Web Sockets
A Web Socket is a two-way communication protocol. Think of this like an ongoing call between you and your friend that won’t end unless one of you decides to hang up. The only difference is that you are the browser and your friend is the server. The client sends a request to the server and the server responds by processing the client’s request and vice-versa.
The communication is based on events. A WebSocket object is established and connects to a server, and messages between the server trigger events that send and receive them.
This means that when the initial connection is made, we have a client-server communication where a connection is initiated and kept alive until either the client or server chooses to terminate it by sending a CloseEvent. That makes Web Sockets ideal for applications that require continuous and direct communication between a client and a server. Most definitions I’ve seen call out chat apps as a common use case — you type a message, send it to the server, trigger an event, and the server responds with data without having to ping the server over and again.
Consider this scenario: You’re on your way out and you decide to switch on Google Maps. You probably already know how Google Maps works, but if you don’t, it finds your location automatically after you connect to the app and keeps track of it wherever you go. It uses real-time data transmission to keep track of your location as long as this connection is alive. That’s a Web Socket establishing a persistent two-way conversation between the browser and server to keep that data up to date. A sports app with real-time scores might also make use of Web Sockets this way.
The big difference between Web Sockets and Web Workers (and, by extension as we’ll see, Service Workers) is that they have direct access to the DOM. Whereas Web Workers (and Service Workers) run on separate threads, Web Sockets are part of the main thread which gives them the ability to manipulate the DOM.
There are tools and services to help establish and maintain Web Socket connections, including: SocketCluster, AsyncAPI, cowboy, WebSocket King, Channels, and Gorilla WebSocket. MDN has a running list that includes other services.
More Web Sockets information
- Introducing WebSockets – Bringing Sockets to the Web (web.dev)
- Thinking About Power Usage and Websites (Chris Coyier)
- The WebSocket API (MDN Docs)
- Latest browser support (Caniuse)
Web Workers
Consider a scenario where you need to perform a bunch of complex calculations while at the same time making changes to the DOM. JavaScript is a single-threaded application and running more than one script might disrupt the user interface you are trying to make changes to as well as the complex calculation being performed.
This is where the Web Workers come into play.
Web Workers allow scripts to run in the background in separate threads to prevent scripts from blocking one another on the main thread. That makes them great for enhancing the performance of applications that require intensive operations since those operations can be performed in the background on separate threads without affecting the user interface from rendering. But they’re not so great at accessing the DOM because, unlike Web Sockets, a web worker runs outside the main thread in its own thread.
A Web Worker is an object that executes a script file by using a Worker object to carry out the tasks. And when we talk about workers, they tend to fall into one of three types:
- Dedicated Workers: A dedicated worker is only within reach by the script that calls it. It still executes the tasks of a typical web worker, such as its multi-threading scripts.
- Shared Workers: A shared worker is the opposite of a dedicated worker. It can be accessed by multiple scripts and can practically perform any task that a web worker executes as long as they exist in the same domain as the worker.
- Service Workers: A service worker acts as a network proxy between an app, the browser, and the server, allowing scripts to run even in the event when the network goes offline. We’re going to get to this in the next section.
More Web Workers information
- “Off the Main Thread” (Chris Coyier)
- The State Of Web Workers In 2021 (Chris Coyier)
- Intro to Web Workers (Zapier)
- Web Workers API (MDN Docs)
- Latest browser support (Caniuse)
Service Workers
There are some things we have no control over as developers, and one of those things is a user’s network connection. Whatever network a user connects to is what it is. We can only do our best to optimize our apps so they perform the best they can on any connection that happens to be used.
Service Workers are one of the things we can do to progressively enhance an app’s performance. A service worker sits between the app, the browser, and the server, providing a secure connection that runs in the background on a separate thread, thanks to — you guessed it — Web Workers. As we learned in the last section, Service Workers are one of three types of Web Workers.
So, why would you ever need a service worker sitting between your app and the user’s browser? Again, we have no control over the user’s network connection. Say the connection gives out for some unknown reason. That would break communication between the browser and the server, preventing data from being passed back and forth. A service worker maintains the connection, acting as an async proxy that is capable of intercepting requests and executing tasks — even after the network connection is lost.
This is the main driver of what’s often referred to as “offline-first” development. We can store assets in the local cache instead of the network, provide critical information if the user goes offline, prefetch things so they’re ready when the user needs them, and provide fallbacks in response to network errors. They’re fully asynchronous but, unlike Web Sockets, they have no access to the DOM since they run on their own threads.
The other big thing to know about Service Workers is that they intercept every single request and response from your app. As such, they have some security implications, most notably that they follow a same-origin policy. So, that means no running a service worker from a CDN or third-party service. They also require a secure HTTPS connection, which means you’ll need a SSL certificate for them to run.
More Service Workers information
- Add a Service Worker to Your Site (Chris Ferdinadi)
- Service worker overview (Chrome Developers)
- Smaller HTML Payloads with Service Workers (Philip Walton)
- Service Worker Cookbook (Mozilla)
- Service Worker API (MDN Docs)
- Latest browser support (Caniuse)
Wrapping up
That’s a super high-level explanation of the differences (and similarities) between Web Sockets, Web Workers, and Service Workers. Again, the terminology and concepts are similar enough to mix one up with another, but hopefully, this gives you a better idea of how to distinguish them.
We kicked things off with a quick reference table. Here’s the same thing, but slightly expanded to draw thicker comparisons.
| Feature | What it is | Multithreaded? | HTTPS? | DOM access? |
|---|---|---|---|---|
| Web Socket | Establishes an open and persistent two-way connection between the browser and server to send and receive messages over a single connection triggered by events. | Runs on the main thread | Not required | Yes |
| Web Worker | Allows scripts to run in the background in separate threads to prevent scripts from blocking one another on the main thread. | Runs on a separate thread | Required | No |
| Service Worker | A type of Web Worker that creates a background service that acts middleware for handling network requests between the browser and server, even in offline situations. | Runs on a separate thread | Required | No |
The Difference Between Web Sockets, Web Workers, and Service Workers originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
source https://css-tricks.com/the-difference-between-web-sockets-web-workers-and-service-workers/
No comments:
Post a Comment