How to make an existing React app installable (PWA)?

Question

I've implemented a web app with React. Now I would like to make it an installable Progressive Web App (PWA), i.e. the browser should show the default installation prompt when the user opens the app on a mobile device.

How do I achieve that?

Answer 1

First of all, you should read a general guideline on PWAs, for example, this one here: Learn PWA

In your case, you should read this section in particular: PWA installation

In a nutshell: Manifest and Service Worker

Both of them are required to be present in your app, so that the browser detects it as an installable PWA.

Situation A: Start a new React app from scratch with PWA functionality

There is a starter project available with create-react-app, which includes a working setup for an installable PWA app: https://create-react-app.dev/docs/making-a-progressive-web-app/

Situation B: Extend an existing React app with PWA functionality

If you are already working on an existing React app without PWA functionality, try the following.

1. In another directory, check-out the starter project from https://create-react-app.dev/docs/making-a-progressive-web-app/ (follow the steps there)
2. Copy the manifest (public/manifest.json) and related files (for example icons if you don't have any yet) into your existing project directory
3. Copy the service worker related files as well: service-worker.js and serviceWorkerRegistration.js
4. Register the service worker in your index.js file:

serviceWorkerRegistration.register();

5. Copy over everything with "workbox" from the package.json file. (Thanks dArKrEsQ)