ShareService: a library for building multiple tabs react app

#react #sharedworker #multipletabs

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 library to help you centralize your business logics and services and build a multiple tabs react app without pain.

How it work

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

App creates SharedWorker to load data generate UI state when user open first tab.
App gets UI state from existing SharedWorker instance when user load second tab.
App send action to execute in SharedWorker instance when user has action in web page
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

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

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

	import React from 'react';
	import ReactDOM from 'react-dom';

	import { initSharedService } from '@shared-service/react';

	import App from './App';

	const worker = new SharedWorker('./worker.js', { type: 'module' });
	initSharedService(worker);

	ReactDOM.render(
	<React.StrictMode>
	<App />
	</React.StrictMode>,
	document.getElementById('root')
	);

view raw shared-service-react-root-endpoint.js hosted with ❤ by GitHub

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

	import { SharedServiceServer } from '@shared-service/core';

	const sharedServiceServer = new SharedServiceWorker({
	count: 0,
	});

	/global self/
	self.onconnect = function(e) {
	sharedServiceServer.onNewPort(e.ports[0]);
	};

view raw shared-service-worker.js hosted with ❤ by GitHub

4 . In react component:

	import React from 'react';
	import { useSharedState } from '@shared-service/react';

	export default function App() {
	const [count, setCount] = useSharedState('count', 0);
	return (
	<div className="App">
	<div className="Counter">
	<p>
	Counter:
	{count}
	</p>
	<button type="button" onClick={() => setCount(count + 1)}>
	+1 to global
	</button>
	</div>
	</div>
	);
	}

view raw shared-service-react-app.js hosted with ❤ by GitHub

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:

	sharedServiceServer.registerExecutor('increaseCount', () => {
	const count = sharedServiceServer.getState('count');
	sharedServiceServer.setState('count', count + 1);
	});
	sharedServiceServer.registerExecutor('markAsCompleted', (id) => {
	const tasks = sharedServiceServer.getState('tasks');
	const updatedTasks = tasks.map(task => {
	if (id === task.id) {
	return {...task, completed: true }
	}
	return task;
	});
	sharedServiceServer.setState('tasks', updatedTasks);
	});

view raw shared-service-executors.js hosted with ❤ by GitHub

Send the action in react component:

	import React from 'react';
	import { useSharedState } from '@shared-service/react';

	export default function App() {
	const [count] = useSharedState('count', 0);
	const increaseCount = () => {
	return $sharedService.execute('increaseCount');
	};
	const markAsCompleted = () => {
	return $sharedService.execute('markAsCompleted', ['todo-id']);
	};
	return (
	<div className="App">
	<div className="Counter">
	<p>
	Counter:
	{count}
	</p>
	<button type="button" onClick={increaseCount}>
	+1 to global
	</button>
	<button type="button" onClick={markAsCompleted}>
	Click to mark as completed
	</button>
	</div>
	</div>
	);
	}

view raw shared-service-react-executor.js hosted with ❤ by GitHub

5 . Data persistence

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

	import localforage from 'localforage';

	async function initStorage() {
	const storage = localforage.createInstance({
	name: 'myApp',
	});
	await storage.ready();
	const keys = await storage.keys();
	const promises = keys.map((key) =>
	storage.getItem(key).then((data) => {
	sharedServiceServer.setState(key, data);
	}),
	);
	await Promise.all(promises);
	sharedServiceServer.on('stateChange', ({ key, state }) => {
	storage.setItem(key, state);
	});
	}

	initStorage();

view raw shared-service-worker-data-persistence.js hosted with ❤ by GitHub

Online demo

We have online demo here. For full demo source code, please refer here.

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 to make app work at Safari.

There are some TODO for shared-service library: