Introduction
Service Workers are a powerful and flexible tool that can enhance the functionality of your application. One of the unique aspects of Service Workers is that they are essentially empty when they are first created, and it's up to the developer to define their behavior using instructions and code. This allows developers to incrementally add functionality to their applications through the use of Service Workers, bringing them to life through the instructions they provide.
In this article, we will explore how to incorporate a Service Worker into a React application and compare the performance of an expensive function when it is executed in the main thread versus in a Service Worker. By the end of this tutorial, you will have a better understanding of how Service Workers can improve the performance of your React app.
Assumed knowledge
The following would be helpful to have:
- Basic knowledge of React
- Basic knowledge of Service Workers
Getting Started
To streamline the process of configuring the Service Worker and simplify communication between the app and the Service Worker, we will be using the comlink library.
Project Setup
Run the following command in a terminal:
yarn create vite app-sw --template react-ts
cd app-sw
Now we can install the necessary dependencies:
yarn install comlink
yarn install -D vite-plugin-comlink
The first change to be made is in vite.config.ts where we are going to import the comlink plugin and add it to the vite configuration:
// @/vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { comlink } from "vite-plugin-comlink";
export default defineConfig({
plugins: [react(), comlink()],
worker: {
plugins: [comlink()],
},
});
The next step is to go to vite-env.d.ts and add the reference to the vite plugin we installed:
// @/src/vite-env.d.ts
/// <reference types="vite/client" />
/// <reference types="vite-plugin-comlink/client" /> 👈 added this
Next, we'll create a file called utils.ts and define two functions inside it. The first function, called blockingFunc(), will be computationally expensive and will easily block the main thread.
// @/src/utils.ts
export const blockingFunc = () => {
new Array(100_000_000)
.map((elm, index) => elm + index)
.reduce((acc, cur) => acc + cur, 0);
};
// ...
The randomIntFromInterval() function generates a random integer within a specified range. For example, you might use this function to generate a random number between 1 and 10, like so: randomIntFromInterval(1, 10).
// @/src/utils.ts
export const blockingFunc = () => {
new Array(100_000_000)
.map((elm, index) => elm + index)
.reduce((acc, cur) => acc + cur, 0);
};
export const randomIntFromInterval = (min: number, max: number): number => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
// ...
Still in this file, we will create the instance of the service worker that will be used in the app, which we will name workerInstance.
// @/src/utils.ts
export const blockingFunc = () => {
new Array(100_000_000)
.map((elm, index) => elm + index)
.reduce((acc, cur) => acc + cur, 0);
};
export const randomIntFromInterval = (min: number, max: number): number => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
// worker instance
export const workerInstance = new ComlinkWorker<typeof import("./sw/worker")>(
new URL("./sw/worker", import.meta.url)
);
Before we can use workerInstance, we need to define our worker. As shown in the previous code snippet, let's create a folder called sw/ and a file called worker.ts inside it.
// @/src/sw/worker.ts
/// <reference lib="webworker" />
declare const self: DedicatedWorkerGlobalScope;
import { blockingFunc } from "../utils";
export const someRPCFunc = () => {
blockingFunc();
};
As you can see in the code snippet, the content inside it can be executed in the worker. We imported the blockingFunc() function as a named export called someRPCFunc().
What is someRPCFunc()? It's a method that can be remotely invoked through our worker instance using RPC (Remote Procedure Call), meaning it can be called from the main thread to the service worker.
Finally, we need to go to App.tsx to put everything we created to use. First, we need to import the necessary items:
// @/src/App.tsx
import { useCallback, useState } from "react";
import { workerInstance, blockingFunc, randomIntFromInterval } from "./utils";
// ...
Now, we'll define three functions that will serve as our callbacks. The first will utilize the service worker to call the costly function. The second will run the expensive function within the main thread. The third will generate a random number and save it in the component's state. Once these functions are defined, we can bind them to their respective buttons.
// @/src/App.tsx
import { useCallback, useState } from "react";
import { workerInstance, blockingFunc, randomIntFromInterval } from "./utils";
export const App = () => {
const [random, setRandom] = useState<number>(0);
const workerCall = useCallback(async () => {
await workerInstance.someRPCFunc();
}, []);
const normalFuncCall = useCallback(() => {
blockingFunc();
}, []);
const randomIntHandler = useCallback(() => {
setRandom(randomIntFromInterval(1, 100));
}, []);
return (
<section>
<button onClick={workerCall}>Worker Call</button>
<button onClick={normalFuncCall}>Main Thread Call</button>
<button onClick={randomIntHandler}>Random Int {random}</button>
</section>
);
};
If you've been following along with the steps in the article, you should be able to achieve a result similar to this one:
Expected behavior
When executing on the main thread, there should be a slight lag with the interaction of the random number button. However, when executing in the service worker there shouldn't be any delay because the execution is done in a different thread.
Conclusion
I hope you found this article helpful, whether you're using the information in an existing project or just giving it a try for fun.
Please let me know if you notice any mistakes in the article by leaving a comment. And, if you'd like to see the source code for this article, you can find it on the github repository linked below.
SOCIAL SHARE CARD GENERATOR