Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 8, 2023 07:16 pm GMT

How to use Service Workers with React and Vite

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-tscd app-sw

Now we can install the necessary dependencies:

yarn install comlinkyarn 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.tsimport { 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.tsexport 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.tsexport 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.tsexport 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 instanceexport 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.tsximport { 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.tsximport { 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:

gif

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.

Github Repo


Original Link: https://dev.to/franciscomendes10866/how-to-use-service-workers-with-react-17p2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To