How to make Progressive web app in just 2 minutes in WordPress?

Progressive web applications are like native applications they are built using HTML CSS and JavaScript. They contain mainly two files one is a service worker and the second is manifest these two files play an important role in building a progressive web app. Today I am going to show you how you can convert your WordPress website into a progressive web app within just 2 minutes. First of all let me tell you what do you need for this mainly you need these things.

1-colour code

2- to logo icons of 192 pixels and 512 pixels in PNG format

Now you are ready to build progressive web just in 2 minutes why you are waiting let’s start building progressive web.

This contains these steps.

1- installation of plug-in

2 -settings of progressive web app

Installation of plugin

First of all, go to plugins>add new plugins> then insert super progressive web app you will show this plugin click on install button and then activate now you are ready to build a progressive web app for your website

2-Settings of progressive web app

In this step you have to set your progressive web app nowhere you can see a Dashboard of the super progressive web you have to manage all things from here let’s start.

Step 1

In the first step, you have to change the name of the progressive web app you can set your App name here then you have to put short name of your progressive web because sometimes devices do not have so much spelling space that’s why we put short name so that in its place it will display.

Step 2

The second step is to put a description of your application that’s very important.

Step 3

Thirdly you have to put your logo icons of 192 pixels and after that, you have to put logo 512 pixels. 192-pixel logo icon is for applications icon and 512 pixel is bar Splash screen so you have to put both logo icons as it is.

Step 4

You have to change the background colour you can select it white as am I am doing because mostly we display a Splash screen with white background colour.

Step 5

In this step, you have to change the theme colour of the theme you have to change theme colour so the top bar of the application should display the colour. I am choosing my colour scheme you can choose your colour scheme.

Step 6

In the next step you have to select starting page this is very important because application when the application is run then it will start from this page so you have to select it home page.

Step 7

The next step is to store offline pages you have to select the page you want to store in cash for offline using I am going to set with the default because I want to store home page which is a default page for offline use

Step 8

Next step you have to select the orientation of your applications I am setting it portrait because I need only portrait not others

Step 9

In the next step in the display mode, you have to select how you can display your applications whether you want to I want to keep it full-screen standalone mode minimal or Browser I want to use it as an app and it should look like an app that’s why I am setting it standloane.

Step 10

Next, you will show the status. First service worker is working and HTTPS is working progressive web app does not install on on Non HTTPS website you have to install SSL for using the progressive web app on your WordPress website.

Note:I hope you have learned how you can install progressive web app on your website in a very easy way.If you did not read the whole article then you can set all settings as it as and just change the name, colors.It will work fine.

Congratulations you have to convert your website into a Progressive web app successfully. Now you can install it where you want.For understanding installations process you can read this article.Click here

Leave a Reply

Your email address will not be published. Required fields are marked *