What is Web App manifest in ReactPWA

Progressive web app (PWAs) alow to users to use youe web application online or offline and install their apps into your smartphones(IOS/android). It is very easy to configure the manifest json file for making your own progressive web app(PWA).

Take clone of ReactPWA from here

https://github.com/Atyantik/react-pwa.git

Install dependency 

cd react-pwa && npm install

Run by this command

npm start

This default configuration for manifest.json after run npm start.

{    //title name for your PWA    "name": "PawJS",    "short_name": "PawJS",    // Possible values ltr(left to right)/rtl(right to left)    "dir": "ltr",    // language: Default en-US    "lang": "en-US",    // Orientation of web-app possible:    // any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-secondary portrait, portrait-primary, portrait-secondary    "orientation": "any",    "start_url": "/",    "background_color": "#fff",    "theme_color": "#fff",    "display": "standalone",    "description": "A highly scalable & plug-able, Progressive Web Application foundation with the best Developer Experience.",    "icons": [      {        "src": "/path-to-pwa-icon-size-192x192.png",        "sizes": "192x192"      }      {        "src": "/path-to-pwa-icon-size-512x512.png",        "sizes": "512x512"      }    ]  }

Now update your src/routes.js

You can update in this file src/routes.js. you can add custom configuration to routes.js as it is shared by both client and server and also we are talking about the rout /manifest.json

// ...other imports // Please import the desired icon import PwaIcon192 from "./resources/images/path-to-pwa-icon-192x192.png"; import PwaIcon512 from "./resources/images/path-to-pwa-icon-512x512.png"; export default class Routes {  apply(router) {    router.setPwaSchema({      "name": "MyProgressiveWebApp", // its title for your pwa app      "short_name": "MyPWA",      // Possible values ltr(left to right)/rtl(right to left) #optional      "dir": "ltr",      // language: Default en-US #optional      "lang": "en-US",      "icons": [            {              "src": PwaIcon192,              "sizes": "192x192"            },            {              "src": PwaIcon512,              "sizes": "512x512"            }      // you can add your own icon for you pwa app.            // // You can add extra size if you wish, but this is optional.      ]    });        // ..code    // router.hooks.initRoutes.tap...  } }

Manifest Properties

1 short_name and/or name: You have to provide at least the short_name or name property. short_name is used for the user's home screen, launcher, or other places where space may be limited and name is used for the app install prompt.

"short_name": "PWS", "name": "PowerSquare"

2 icons: you can add your site to there a home screen to define a set of icons for the browser to use. This app icon will places like the home screen, task switcher, splash screen, app launcher etc. icons is an array of images object every object must include the src, a size property and the type of image.

"icons": [  {    "src": "/images/icons-192.png",    "type": "image/png",    "sizes": "192x192"  },  {    "src": "/images/icons-512.png",    "type": "image/png",    "sizes": "512x512"  } ]

include a 192x192 pixel icon and a 512x512 pixel icon.

3 start_url: The start_url is used for the browser where your application should when it's launched. Its prevents the app from starting on whatever page user was on when they dded your app to their home screen. These start_url must direct the user redirect into your app, rather than a product landing page. 

"start_url": "/?utm_source=pwa"

4 background_color: background_color property is used for the splash screen when the application is first launched.

5 display: The display is used for the customizing you browser UI is shown when your app is launched. An example you can hide the address bar of the browser.

"display": "standalone"

display parameters

• fullscreen: It will open the web application without any browser UI and takes up the full screen of the available display area.
• standalone: This parameter used for web app to look and feel like a standalone native app. The app runs in it's own window, and hides standard browser UI elements like the URL bar.
• minimal-u: This parameter is not supported by chrome. It's similar to fullscreen.
• browser: Its similar as a browser experience.

6 orientation: A user can prefer selecting a specific orientation.

"orientation": "landscape"

7 theme_color: The theme-color is used for the sets color of the tool bar and in the task switcher.

Example of PWA

Note: Please visit this link http://https://developers.google.com/web/fundamentals/web-app-manifest/ for more information of web app manifest. Above are some details from the link.

Thanks for reading!