23
loading...
Turn your Create React App into a Progressive Web App in 100 seconds
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
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.
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"
}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';At the bottom of your
index.tsx, add the following code to opt into an "offline-first" app:serviceWorkerRegistration.register();23