DEV Community

Michael Fatemi
Michael Fatemi

Posted on

Turn your Create React App into a Progressive Web App in 100 seconds

Progressive Web Apps (PWAs) let regular apps become accessible offline. They also have access to more features than regular apps.

React Apps need two features to become Progressive Web Apps.
First, they need a service worker, which does work in the background of the app. Second, they need a manifest.json file in the public folder, which includes the name of the app, the home page, and icons.

If you're starting fresh, you can use the Create React App template cra-template-pwa (or cra-template-pwa-typescript) to bootstrap this process. If you want to create a React app from the start like this, use the command npx create-react-app app-name --template cra-template-pwa or npx create-react-app app-name --template cra-template-pwa-typescript.

But, if you're like me, you didn't think to add this template in the beginning, and are wondering how to add it to an existing app.

1. manifest.json

manifest.json goes in the public folder.

Most parts are self-explanatory. You can generate this file with websites like Simicart's.

Here's an example. Note that this requires favicon.ico, logo192.png, and logo512.png to be available in the public folder.


{
    "short_name": "App",
    "name": "My App",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
        },
        {
            "src": "logo192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "logo512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}


Enter fullscreen mode Exit fullscreen mode

2. service-worker.js

For a baseline, go to the cra-template-pwa github.

Copy service-worker.ts and serviceWorkerRegistration.ts into the src folder.

Then, at the top of your index.tsx (or any entrypoint), import the service worker registration like so:


import * as serviceWorkerRegistration from './serviceWorkerRegistration';

Enter fullscreen mode Exit fullscreen mode

At the bottom of your index.tsx, add the following code to opt into an "offline-first" app:


serviceWorkerRegistration.register();

Enter fullscreen mode Exit fullscreen mode

Learn more about PWAs

Discussion (3)

Collapse
loopmode profile image
Jovica Aleksic

Here's a helper I wrote to easily implement "updates available, click to refresh" buttons.

npmjs.com/package/@loopmode/cra-wo...

Collapse
loopmode profile image
Jovica Aleksic

It's three years old now without any updates, but when I recently used it with latest CRA, it still worked flawlessly. Should make a better readme and example gif, and bump the version to a solid 1.0 :)

Collapse
capscode profile image
capscode

Wow, amazing and helpful too :)