Senior Software Engineer - 08 October 2021 -
Senior Software Engineer - 08 October 2021 -
Web Workers Creation
Workers can be instantiated like,
Communication With Workers
The Communication process between workers and client will be achieved by listening to messages from each other. Below code is a sample to add a listener for both client and workers in which they have implemented onmessage function, which is the listener. To send messages to the workers and clients, use the postMessage method to post messages to each other.
The service worker instance, has terminate function that can be called to terminate.
Service workers are specialized workers that run in the background and are separate from a web page. This acts like a proxy network and cache that helps developers build an offline experience for the web pages. Like web workers service, the worker also uses the postMessage API to communicate from client web pages. Since this can act as a proxy, the registration of service workers is restricted to pages served over HTTPS. For development purposes, localhost can be used to register the service workers.
Let’s discuss the service workers lifecycle and communication with the client. Here, I have taken an example of a web page with some static content and some dynamic forms in which users can upload data.
Service Workers Registration
To register service workers, a web page should provide a path to the service workers file as given below:
Here, the service workers are placed at the root path. This way, the service workers can intercept fetch events in your domain. If the service workers are registered with path /example/service-worker.js then the service workers can intercept all the fetch events starts with /example/. Eg. /example/abc or /example/xyz.
Service Workers Installation
When a page tries to register service workers, it kicks off the install listener that is present in the service workers file. Through this event the listener is triggered when the service workers are first installed. The installed event can look like as mentioned below:
In the above example files, main.css, main.js and index.html will be added to the cache.
Service Workers Activation
When the service workers are installed, it enters into the next phase which is activation. We can clean the old cache during the activation and set up for IndexedDB to store some dynamic data. In the example we have a form in which there are some text fields and some files to be uploaded. We can set up IndexedDB to store those files in case the user goes offline while saving the form data to the server.
Caching and Responding
Service workers are meant for offline experience. So, we will need some caching server requests. To do so, we can listen to fetch events and respond accordingly.
Communication With Service Workers
The communication between the client and service workers happens through postMessage API. There are several ways a client can communicate through service workers. Let’s take the above example where the user has made some entries in the form and failed to upload it because of the unavailability of the network.
Here, we will be discussing the client page that is making a request to the service workers to upload and show the communication from the service workers. Client pages have a listener to the online event. When the network is online, the client requests the service workers to retry the upload. When the network connection is restored, try uploading the form data to the server by communicating with the service workers on-demand, or the service workers make it automatically by checking the status of upload items present in IndexedDB.
As one can guess, the Broadcast channel allows us to communicate to browsing contexts. In this case, both the client and the service workers use the same track to communicate. It is the most effortless setup for communication; however, not all browsers currently support the broadcast channel.
Note: Check the browser support before using it.
Let’s assume retryFailedUpload function has a job that is to retrieve data from IndededDB and then make a network request to save the data to return a promise indicating success/failure.
The service workers have all the clients and can communicate through one or more clients by sending messages to clients. Service workers have references to connected clients ordered by the last focused client. The service workers can target clients and post a message. Thus, the client can use the service workers controller to send messages to the service workers.
Using channel messaging, we can listen to the messages for a channel port sent by the service workers Message channel instance contains two ports, namely port1 and port2. The client can listen to messages from the service workers and the service workers send the messages to the listening port. In the code below, the first client sends a message to keep a reference of the client port on which the service workers can send the messages.
Uses and More
Web workers are helpful when performing long-running tasks or some periodic tasks. It does not have a restriction on the number of workers created. A page can have multiple web workers; also, a worker can instantiate workers.