Progressive Web Apps, that is PWAs, are a type of application that is developed using web technologies and can be installed on any device like a traditional application. Creating a simple PWA is very easy as it involves adding two important files to the project. After that, the PWA would be ready to be installed on any Operating System.
The below steps have to be followed to create a progressive web application:
Step 1: Create an HTML page that would be the starting point of the application. This HTML will contain a link to the file named manifest.json. This is an important file that would be created in the next step.
Step 2: Create a manifest.json file in the same directory. This file basically contains information about the web application. Some of the basic information includes the application name, starting URL, theme color, and icons. All the information required is specified in the JSON format. The source and size of the icons are also defined in this file.
Step 3: Create a new folder named images and place all the icons related to the application in that folder. It is recommended to have the dimensions of the icons at least 192 by 192 pixels and 512 by 512 pixels. The image name and dimensions should match that of the manifest file.
Step 4: Serve the directory using a live server so that all files are accessible.
Step 5: Open the index.html file in Chrome navigate to the Application Section in the Chrome Developer Tools. Open the manifest column from the list.
Step 6: Under the installability tab, it would show that no service worker is detected. We will need to create another file for the PWA, that is, serviceworker.js in the same directory. This file handles the configuration of a service worker that will manage the working of the application.
Installing the application:
- Navigating to the Service Worker tab, we see that the service worker is registered successfully and now an install option will be displayed that will allow us to install our app.
- Click on the install button to install the application. The application would then be installed and it would be visible on the desktop.
- For installing the application on a mobile device, the Add to Home screen option in the mobile browser can be used. This will install the application on the device.
- Manifest Section after all the steps have been completed
- Installing the web application using the Install app button
- The final application along with its desktop icon
- Convert minutes to hours/minutes with the help of JQuery
- General Introduction to Progressive Web Apps(PWA)
- Simple GET and POST request using Fetch API method by making custom HTTP library
- How to make simple PUT request using fetch API by making custom HTTP library ?
- Simple DELETE request using fetch API by making custom HTTP library
- How to place content under fixed flexbox navigation bar ?
- How to check whether a script is running under Node.js or not ?
- Making your WordPress Website More Secure
- Making a div vertically scrollable using CSS
- Making a QR code for a website
- PHP | Decision Making
- ES6 | Decision Making
- Difference between Fetch and Axios.js for making http requests
- Tips For Making Coding Websites Accessible
- DELETE request using XMLHttpRequest by making Custom HTTP library
- Get request using AJAX by making Custom HTTP library
- POST request using AJAX by making Custom HTTP library
- How to make PUT request using XMLHttpRequest by making Custom HTTP library ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.