DEV Community

Rohit Pakhrin
Rohit Pakhrin

Posted on

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

Image description

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

Image description

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

Step 2: Adding to Home Screen

Image description
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

Image description

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.

Top comments (2)

Collapse
 
vigneshiyergithub profile image
vigneshiyergithub

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