What is PWA?

The Progressive Web App(PWA) is an application developed from a website that uses HTML, CSS, Javascript, and some frameworks like Angular/React. The User Interface of the website is designed mobile responsive so that it looks and behaves like a mobile app. So we can use it as web pages or mobile apps according to need.

So are you excited to convert your website to App? Then let's start with it.

**Prerequisite - You should have an existing react website. **

We will need a service worker which runs in the background and helps to handle the network request. The main aim is to improve reliability by providing offline access, as well as boost page performance.

For converting React Web App to PWA we have to create two service worker-related files under the src folder of our project.

1. service-worker.js https://raw.githubusercontent.com/gavandivya/neogLuckyBirthday/main/src/registerServiceWorker.js

2. registerServiceWorker.js https://raw.githubusercontent.com/gavandivya/neogLuckyBirthday/main/src/service-worker.js

Now you are just required to add two lines in index.js under the src directory. You can refer to my index.js if you face any issues while editing it.

https://raw.githubusercontent.com/gavandivya/neogLuckyBirthday/main/src/index.js

We import the registerServiceWorker and then use .register() to consume the service worker in our project.

index.js

import * as reg from './registerServiceWorker';

reg.register();

The manifest file contains information regarding how the app should appear and function. Make changes in the manifest.json under the public directory . The two major changes are the short name and icon both will have their default value.

The short name denotes the App name which is visible to the user.

icons array has the object of image property which includes its src, size, and image type.

The 192 x 192 and 512 x 512 size images are used as the App logo. Downloaded them from https://favicon.io/emoji-favicons/birthday-cake/

manifest.json

{
  "short_name": "Lucky Birthday",
  "name": "Is Your Birthday Lucky?",
  "icons": [
    {
      "src": "favicon-32x32.png",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "cakeimg-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "cakeimg-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Once all the changes are done run npm run build to make a production build. Now the build is ready to be deployed. I deployed the app on netlify.com you can use some other hosting platforms as well.

Link generated after deployment - https://gavandivya19-luckybirthday.netlify.app/

You should get a similar pop-up on the chrome browser asking for installing the app

You should get a similar pop-up as seen in the screenshot on the mobile asking for installing the app

As we know, a PWA can be opened with a search engine and accessed through a browser we can't share the .apk file because only one opening the link on the browser will be able to download the app.

In the normal process to make a .apk (Android App) from PWA, we need to configure some files using Android Studio.

Just for trial to convert PWA to .apk without writing any code I used https://appmaker.xyz/pwa-to-apk

Hurray! The .apk is generated and can be shared with all your favorite contacts.

On installing the Android App we will be able to see the short name and icon we added in manifest.json.

I hope now you have got a better idea and clear understanding of how easy it is to convert an existing React web app to PWA. So are you excited to make your own PWA?