You can create Progressive Web Apps from scratch or can convert any of your existing web applications into PWA.
Create the manifest file:
The first step is to create a manifest file for your web application.
It's a JSON file that has either ‘.json’ or ‘.webmanifest’ extensions. It communicates extra information about the app to the browser. For eg. the Name of the app, the short name to display, the icon on the home screen, etc. The manifest file helps web apps to be downloadable and represented as native apps on mobile devices as well as desktops. Modern browsers are aware of how to use this information.
Create a manifest.json into the root folder of your application. It looks like this,
id: This is an optional member to identify the app uniquely. Different browsers have different default strategies if it is not mentioned.
name: It's a string that represents the name of the application. It is displayed to the user. The application name can be provided in multiple languages.
short_name: As the name suggests you can provide a short name to your application. Browsers use this name to overcome space constraints.
description: It’s a text explaining your application. It can be provided in multiple languages.
start_url: It's a URL of a page that displays on launch. It can be an absolute or relative URL. The relative URL is relative to the manifest URL.
display: This property controls the browser UI elements for the application. It supports different options, like, fullscreen (displays application in all available display areas), standalone (Application looks like a standalone app. User agent would exclude navigation UI), minimal-ui (Application looks like a standalone app with minimal UI of user agent available), browser (Opens in conventional browser).
In case, your preferred display is not supported in the browser, the fallback chain is - fullscreen->standalone->minimal-ui->browser.
display_override: The fallback display order can be overridden using this property. Eg. ['minimal-ui', 'standalone', 'browser']
background_color: This property allows you to set the background color of the display area while your application is loading.
theme_color: Using this property you can define the browser theme color.
orientation: Define the browser orientation to launch your application. It can be changed using the Screen Orientation API later.
Icons: Using this property we can define a set of icons that the browser can use on the home screen, splash screen, etc.
It is an array of image objects, where each object contains src (image URL), sizes (space-separated image dimensions), type (media type of an image), and purpose (purpose of icon, eg. monochrome, maskable, or any).
If you keep src as a relative path, its relative to the manifest.json file.
Add the manifest file to your web app and test:
Now, include manifest.json in your HTML head tag. Please note the rel is manifest, and not stylesheet.
Make sure to include it on each web page.
To verify your manifest.json file, the Google Chrome browser is recommended.
Open developer tools, and click on 'Application'. On the left column under 'Application', you would find the 'Manifest' link. That will show your manifest file visually. It will also prompt if there is any error in your manifest.json file.
Please note that the manifest file is not supported in each and every browser. You can refer https://developer.mozilla.org/en-US/docs/Web/Manifest for a detailed compatibility list.
Stay tuned to know about service workers in PWA.
