Noobs Guide to create Progressive Web App using ReactJs

Rahul Verma
Nov 10, 2017 · 2 min read

Note: This post is still in development. I am a noob when it comes to web-frontend dev who till 12 hours back had used JS only for showing alert on some jsp pages. I became aware Progressive Web Apps today only when was asked to create PWA for an existing android app during an inprogress hackathron.

Will refactor this post once I am done with my project, cheers !!


Steps :

  1. Create a React project using WebStorm IDE (or create-react-app via cmd)
  2. In public folder add icon set having icons for size : 128,144,152,192,256,512
  3. In public/manifest.json add the icons entry. Post that it would look something like this:
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]

4. In case you to deploy the app on a different path instead of ROOT (tomcat lingo), you need the specify base path. To do this, simply create a .env.production file at top level of project (next to package.json). The contents should look like this(assuming the app access path will be https://server/pwa):

PUBLIC_URL=/pwa

5. Finally change the following line in public/index.html :

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

to

<meta name="viewport" content="width=device-width, initial-scale=1">

Now build the app and deploy it on a server that serves on https. This is important because react won’t register service-worker in dev mode resulting in audit failure by lighthouse.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade