PWA: Turning Your Web App into a Native-Like App

Progressive web app

github

www.rohitpakhrin

React web app can be converted to be used as native app with help of PWA

This blog website rohtpakhrin.com.np was added PWA feature for native app experience.

Adding PWA feature is very simple and straightforward in react web app. In contrast the steps are only adding manifest.json file and icons.

All the other things will work seamlessly afther this.

Add manifest.json

Add manifest.json file inside public folder with following contents.
{
"short_name": "Rohit Blog",
"name": "Pakhrin's Coding journey",
"icons": [
{
"src": "icon-192*192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512*512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

Index.html changes

Add following to the html file.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<meta name="theme-color" content="#000000">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/icon-192*192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Your app name">

Add Icons -> File structure

The file structure after adding the icons and manifest.json file inside public folder.

Development Steps are Complete

After this you can build your app and check in your mobile browser.

Adding to Home Screen

Step 1: Opening in Safari

Open your website in safari and press share button at the bottom of the screen.

Step 2: Adding to Home Screen

Then press add to home screen. This will generate a app icon on your home screen

Step 3: Click on app icon and use like a native app

App Icon will be available in your home screen and you can use it as a native app. App will be full screen as you have added standalone in your manifest.json file.

And the best thing is notifications will also work without opening the app. (It will require separate setup methods)

You can checkout here in the link what web app can do.
whatwebcando.today

Optional: Keys breakdown

1. short_name
   This is the short name of your web app, which is used when there is insufficient space to display the full name (e.g., under the app icon on the home screen).

2. name
   This is the full name of your web app, which is used in contexts where there is more space available (e.g., in the installation prompt).

3. icons
   This array contains objects that define the icons used for your web app. Each icon object includes:

4. start_url
   This is the URL that your web app will start at when launched. Using "." means the root of your app.

5. display
   This parameter defines the display mode of your web app. "standalone" makes your app look and feel like a native app without the browser UI (e.g., no address bar or browser navigation buttons).

6. theme_color
   This is the color of the theme for your web app. It affects the color of the app's title bar in some browsers.

7. background_color
   This is the background color of your web app's splash screen, which is displayed while your app is loading.

Comments

[Deepak Kumar]

Hello everyone,

I hope you're all doing well. I recently launched an open-source project called the Ultimate JavaScript Project, and I'd love your support. Please check it out and give it a star on GitHub: Ultimate JavaScript Project. Your support would mean a lot to me and greatly help in the project's growth.

Thank you!

[vigneshiyergithub]

How do you ensure App updates are served real-time and cache is invalidated?