PWA: Turning Your Web App into a Native-Like App
Tags: pwa, react
Published: 2024-06-28 06:29:01

## Progressive web app

[github](github.com/roitpak/Blog/pull/55/files)

[www.rohitpakhrin](www.rohitpakhrin.com.np/667bf45e605d249f35c5)

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

This blog website [rohtpakhrin.com.np](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9zmf9tljogpyoyluk7e.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdy9fz2zhlieicgd0yne.png)

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

Step 2: Adding to Home Screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwgvp18qga9hohd883iq.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqrued9mp2d2hda23juh.png)

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](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.