enable service worker for progressive web app

package.json

@@ -10,6 +10,7 @@
 		"@testing-library/user-event": "^12.1.10",
 		"@types/node": "^14.14.37",
 		"@types/react": "^17.0.3",
+		"@types/react-dom": "^17.0.9",
 		"@types/react-router-dom": "^5.1.7",
 		"dotenv": "^8.2.0",
 		"react": "^17.0.2",
@@ -19,7 +20,12 @@
 		"react-router-dom": "^5.2.0",
 		"react-scripts": "4.0.3",
 		"typescript": "^4.2.4",
-		"web-vitals": "^1.0.1"
+		"web-vitals": "^1.0.1",
+		"workbox-cacheable-response": "^6.1.5",
+		"workbox-expiration": "^6.1.5",
+		"workbox-routing": "^6.1.5",
+		"workbox-strategies": "^6.1.5",
+		"workbox-webpack-plugin": "^6.1.5"
 	},
 	"scripts": {
 		"start": "react-scripts start",

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
+	"short_name": "WheelShare",
-  "name": "Create React App Sample",
+	"name": "WheelShare",
 	"icons": [
 		{
 			"src": "favicon.ico",

src/index.tsx

@@ -4,6 +4,7 @@ import './index.css';
 import App from './components/App';
 import reportWebVitals from './reportWebVitals';
 import AuthenticationWrapper from './components/Authentication/AuthenticationWrapper';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
 ReactDOM.render(
 	<React.StrictMode>
@@ -14,6 +15,11 @@ ReactDOM.render(
 	document.getElementById('root')
 );
 
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://cra.link/PWA
+serviceWorkerRegistration.register();
+
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

src/service-worker.ts

@@ -0,0 +1,81 @@
+/// <reference lib="webworker" />
+/* eslint-disable no-restricted-globals */
+
+// This service worker can be customized!
+// See https://developers.google.com/web/tools/workbox/modules
+// for the list of available Workbox modules, or add any other
+// code you'd like.
+// You can also remove this file if you'd prefer not to use a
+// service worker, and the Workbox build step will be skipped.
+
+import { clientsClaim } from 'workbox-core';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate } from 'workbox-strategies';
+
+declare const self: ServiceWorkerGlobalScope;
+
+clientsClaim();
+
+// Precache all of the assets generated by your build process.
+// Their URLs are injected into the manifest variable below.
+// This variable must be present somewhere in your service worker file,
+// even if you decide not to use precaching. See https://cra.link/PWA
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Set up App Shell-style routing, so that all navigation requests
+// are fulfilled with your index.html shell. Learn more at
+// https://developers.google.com/web/fundamentals/architecture/app-shell
+const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+registerRoute(
+	// Return false to exempt requests from being fulfilled by index.html.
+	({ request, url }: { request: Request; url: URL }) => {
+		// If this isn't a navigation, skip.
+		if (request.mode !== 'navigate') {
+			return false;
+		}
+
+		// If this is a URL that starts with /_, skip.
+		if (url.pathname.startsWith('/_')) {
+			return false;
+		}
+
+		// If this looks like a URL for a resource, because it contains
+		// a file extension, skip.
+		if (url.pathname.match(fileExtensionRegexp)) {
+			return false;
+		}
+
+		// Return true to signal that we want to use the handler.
+		return true;
+	},
+	createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+);
+
+// An example runtime caching route for requests that aren't handled by the
+// precache, in this case same-origin .png requests like those from in public/
+registerRoute(
+	// Add in any other file extensions or routing criteria as needed.
+	({ url }) =>
+		url.origin === self.location.origin && url.pathname.endsWith('.png'),
+	// Customize this strategy as needed, e.g., by changing to CacheFirst.
+	new StaleWhileRevalidate({
+		cacheName: 'images',
+		plugins: [
+			// Ensure that once this runtime cache reaches a maximum size the
+			// least-recently used images are removed.
+			new ExpirationPlugin({ maxEntries: 50 }),
+		],
+	})
+);
+
+// This allows the web app to trigger skipWaiting via
+// registration.waiting.postMessage({type: 'SKIP_WAITING'})
+self.addEventListener('message', (event) => {
+	if (event.data && event.data.type === 'SKIP_WAITING') {
+		self.skipWaiting();
+	}
+});
+
+// Any other custom service worker logic can go here.

src/serviceWorkerRegistration.ts

@@ -0,0 +1,146 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://cra.link/PWA
+
+const isLocalhost = Boolean(
+	window.location.hostname === 'localhost' ||
+		// [::1] is the IPv6 localhost address.
+		window.location.hostname === '[::1]' ||
+		// 127.0.0.0/8 are considered localhost for IPv4.
+		window.location.hostname.match(
+			/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+		)
+);
+
+type Config = {
+	onSuccess?: (registration: ServiceWorkerRegistration) => void;
+	onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+	if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+		// The URL constructor is available in all browsers that support SW.
+		const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+		if (publicUrl.origin !== window.location.origin) {
+			// Our service worker won't work if PUBLIC_URL is on a different origin
+			// from what our page is served on. This might happen if a CDN is used to
+			// serve assets; see https://github.com/facebook/create-react-app/issues/2374
+			return;
+		}
+
+		window.addEventListener('load', () => {
+			const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+			if (isLocalhost) {
+				// This is running on localhost. Let's check if a service worker still exists or not.
+				checkValidServiceWorker(swUrl, config);
+
+				// Add some additional logging to localhost, pointing developers to the
+				// service worker/PWA documentation.
+				navigator.serviceWorker.ready.then(() => {
+					console.log(
+						'This web app is being served cache-first by a service ' +
+							'worker. To learn more, visit https://cra.link/PWA'
+					);
+				});
+			} else {
+				// Is not localhost. Just register service worker
+				registerValidSW(swUrl, config);
+			}
+		});
+	}
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+	navigator.serviceWorker
+		.register(swUrl)
+		.then((registration) => {
+			registration.onupdatefound = () => {
+				const installingWorker = registration.installing;
+				if (installingWorker == null) {
+					return;
+				}
+				installingWorker.onstatechange = () => {
+					if (installingWorker.state === 'installed') {
+						if (navigator.serviceWorker.controller) {
+							// At this point, the updated precached content has been fetched,
+							// but the previous service worker will still serve the older
+							// content until all client tabs are closed.
+							console.log(
+								'New content is available and will be used when all ' +
+									'tabs for this page are closed. See https://cra.link/PWA.'
+							);
+
+							// Execute callback
+							if (config && config.onUpdate) {
+								config.onUpdate(registration);
+							}
+						} else {
+							// At this point, everything has been precached.
+							// It's the perfect time to display a
+							// "Content is cached for offline use." message.
+							console.log('Content is cached for offline use.');
+
+							// Execute callback
+							if (config && config.onSuccess) {
+								config.onSuccess(registration);
+							}
+						}
+					}
+				};
+			};
+		})
+		.catch((error) => {
+			console.error('Error during service worker registration:', error);
+		});
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+	// Check if the service worker can be found. If it can't reload the page.
+	fetch(swUrl, {
+		headers: { 'Service-Worker': 'script' },
+	})
+		.then((response) => {
+			// Ensure service worker exists, and that we really are getting a JS file.
+			const contentType = response.headers.get('content-type');
+			if (
+				response.status === 404 ||
+				(contentType != null && contentType.indexOf('javascript') === -1)
+			) {
+				// No service worker found. Probably a different app. Reload the page.
+				navigator.serviceWorker.ready.then((registration) => {
+					registration.unregister().then(() => {
+						window.location.reload();
+					});
+				});
+			} else {
+				// Service worker found. Proceed as normal.
+				registerValidSW(swUrl, config);
+			}
+		})
+		.catch(() => {
+			console.log(
+				'No internet connection found. App is running in offline mode.'
+			);
+		});
+}
+
+export function unregister() {
+	if ('serviceWorker' in navigator) {
+		navigator.serviceWorker.ready
+			.then((registration) => {
+				registration.unregister();
+			})
+			.catch((error) => {
+				console.error(error.message);
+			});
+	}
+}