CRA to PWA đ
This is the most searched topic on the internet today, âHow to convert CRA (Create React App) to PWA (Progressive Web App)â.
To convert any website into PWA youâve to add to files:
- manifest.json
- service-worker.js
CRA already has a basic service worker file for registering the service worker, just open ./src/index.js
file and call the method serviceWorker.register();
or replace unregister()
to register()
This will cache all the static files and assets and make the website work offline. CRA has a very little configuration of PWA to work on any smartphone and it doesnât have an install popup configuration. So registering the service worker doesnât make the app install on a smartphone. We need to configure it by ourselves.
STEPS
- Make the web app installable
- Add Windows and iPhone supported tags
- Configure the service worker to cache network images too, not only static images.
Step 1/3:
We need to edit manifest.json file, open ./public/manifest.json
file and replace it with
{"short_name": "My App", // this will show on homescreen icon"name": "My App","icons": [{"src":"icon-192x192.png", // make sure icons must have appropriate sizes and path - my icon is in ./public/icon-192x192.png"sizes": "192x192","type": "image/png"},{"src":"icon.png","sizes": "512x512","type": "image/png"}],"orientation": "portrait","start_url": "/","background_color": "#222", // splash screen background color"theme_color": "#222", // notification panel color"display": "standalone"}
Step 2/3:
Windows and iPhone doesnât fully support PWAs with basic configuration, so we need to add âmeta-tagsâ for to make app work in Windows phone and iPhone. Add the given below meta tags in ./public/index.html
head section.
In CRA, /public/index.html, parent path represents â%PUBLIC_URL%â so it must be included with every static file, image or icon otherwise none of the assets will import.
For All Phones:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
For Windows Phone:
<meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#536878"><meta name="msapplication-navbutton-color" content="orange"><meta name="msapplication-TileColor" content="orange"><meta name="msapplication-TileImage" content="%PUBLIC_URL%/icon/icon-144x144.png"><meta name="application-name" content="My App"><meta name="msapplication-tooltip" content="My App Description"><meta name="msapplication-starturl" content="%PUBLIC_URL%/menu?utm_source=homescreen"><meta name="screen-orientation" content="portrait">
For iPhones:
<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="My App"><link rel="apple-touch-icon" href="%PUBLIC_URL%/icon.png"><link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/icon/icon-192x192.png"><link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/icon/icon-192x192.png"><link rel="apple-touch-icon" sizes="167x167" href="%PUBLIC_URL%/icon/icon-192x192.png">
Safari browser doesnât show splash screen so we need to make custom splash screens for each size of iPhone then add these meta tags for safari browser.
<link href="%PUBLIC_URL%/icon/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><link href="%PUBLIC_URL%/icon/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
Step 3/3:
One of the most asked question is how to cache network images in CRA, so this is the part we cover this problem.
CRA uses the workbox for PWA from registering a service worker to caching files.
At first, we need to make a build of CRA by running the command:
npm run build or yarn build
This will generate a build directory on the root of the project, now open ./build/service-worker.js
file and add this snippet above workbox.core.clients();
workbox.routing.registerRoute(// Cache Image File/.*\.(?:png|jpg|jpeg|svg|gif)/,new workbox.strategies.StaleWhileRevalidate({cacheName: 'images',plugins: [new workbox.expiration.Plugin({maxEntries: 60,maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days}),],}));
Here are some assets you can download and edit by yourself: Click here
Now your CRA is successfully converted to PWA and supported in android/ios/windows phones.
Hope you like it. đ
Thatâs All. â¤
Github: https://github.com/ManalLiaquat/
LinkedIn: https://www.linkedin.com/in/manalliaquat/
Portfolio: https://manalliaquat.github.io/
Website: https://stackbeans.com/
Donate: https://paypal.me/manalliaquat?locale.x=en_US â
Feel free to contact me đ