ShareService: a library for building multiple tabs react app
Tags: react, sharedworker, multipletabs
Published: 2021-08-21 17:30:27

{% youtube 9DrqGGgsE2I %}

We can use React to create single page apps easily, React helps us to render UI state. But for every new tab, app need to run our business logics and services to have data for react to rendering. So can we centralize our business logics and services?

`SharedWorker` is the solution. And we have [shared-service](https://github.com/shared-service/shared-service) library to help you centralize your business logics and services and build a multiple tabs react app without pain.

## How it work

![howitwork](https://miro.medium.com/max/1400/1*EsnZ2hRcmu0OYirBePRdBA.png)

SharedWorker instance will be reused by cross browser tabs with same domain until all pages are closed.

1. App creates SharedWorker to load data generate UI state when user open first tab.
2. App gets UI state from existing SharedWorker instance when user load second tab.
3. App send action to execute in SharedWorker instance when user has action in web page
4. SharedWorker instance send UI state to tabs that use it after action executing

## Work with ShareService library

I assume you have start a react app with `create-react-app`.

1 . First step: install it

```bash
$ npm install @shared-service/core @shared-service/react
```

2 . Init shared service in your react app root endpoint:

{% gist https://gist.github.com/embbnux/4bc7195554c0abed0db42de6793e92a3 %}

3 . Connect Shared Service in ShareWorker worker.js file:

{% gist https://gist.github.com/embbnux/6d19a3a1f56d4e6aeb38924557928d04 %}

4 . In react component:

{% gist https://gist.github.com/embbnux/f156a3062f2f0b160e5ccb9166f8fc42 %}

For simple state logic, we can just use `setCount` function return `useSharedState` to update it into `SharedService`.
For complex actions, we can send it to execute in `sharedServiceServer`.
Firstly register executor into `sharedServiceServer` at `worker.js`:

{% gist https://gist.github.com/embbnux/7a94cddc93a4c09bd9126ad5b4b8e14c %}

Send the action in react component:

{% gist https://gist.github.com/embbnux/02674501faa13d34e264a9bde423e8ab %}

5 . Data persistence

We can persist data in SharedWorker with IndexedDB. Here we use `localforage` lib to help us handle storage.

{% gist https://gist.github.com/embbnux/4e222d54838bc7e60fa5bd9083ad97ba %}

### Online demo

We have online demo [here](https://shared-service.github.io/todo-demo/). For full demo source code, please refer [here](https://github.com/shared-service/shared-service/tree/main/packages/demo).

### Problem

As SharedWorker is not supported for Safari and IE now, so we can’t run `share-service` at the shared worker for those Browser. You can take a look at [here](https://github.com/shared-service/shared-service/blob/main/packages/demo/src/index.js#L14) to make app work at Safari.

## More

There are some TODO for `shared-service` library:

1. Add support for `Vue.js` library.
2. Support Browser extension (with background API)
3. Support Electron main and render process

To make Browser extension and Electron app support the centralization service.

Original [link](https://medium.com/@embbnux/shareservice-a-library-for-building-multiple-tabs-react-app-2b00d04b25fa)