Meaning and use cases of PWA

PWA or Progressive Web Application is a technology that was announced by google in 2015. A PWA application is a website that uses new and modern technologies but its functionality is like a normal mobile application. To make it easier to understand, PWA is a website that uses chrome, firefox, and other browsers to enter inside the mobile application you are going to use.

 

What can I do to make a PWA website for myself?

For this functionality, you can use the WP MOBILI plugin. After installing the plugin, you need to go to the setting of the plugin in Settings > PWA.

 

Setting the PWA using WP MOBILI

WP MOBILI plugin gives the functionality and setting for you to set up a fully useable and customizable PWA application.

In the Setting > PWA, a page there are different fields that any of the changes you make on that page are shown to you in the live view on a phone.

Basic Details:

This is the part in which you need to give the basic settings and shows the default settings of your website which you can change on your own.

PWA status field: When disabling this field, the functionality of PWA will be disabled fully.

Short name field: Short name is used on the user’s home screen, launcher, or other places where space may be limited.

Name field: Name is used when the app is installed.

Description field: The description property describes the purpose of your app.

 

Icons part:

When a user installs your PWA, you can define a set of icons for the browser to use on the home screen, app launcher, task switcher, splash screen, and so on.

In this part, two sizes of 192*192 and 512*512 are needed but you can click on Show More options… and set other sizes.

 

Colors part:

In this part, you can set and choose the main colors of your web app.

Background field: This color is for the background color of your application and will be shown while loading the application.

Theme field: The Theme field sets the color of the tool bar, and may be reflected in the app’s preview in task switchers.

Source: https://web.dev/