What is a Progressive Web App (PWA)? & How to make it in WordPress? (2019)

What is a Progressive Web App (PWA)?

You might be testing your website using Google Chrome’s Lighthouse Audit tool and see a criteria of test called Progressive Web App (PWA) and you ask yourself, what is that?

Definition:

In simple terms, a Progressive Web App is website or a web app that is built to serve all users regardless of their choice of browser, to deliver the website content in an app-like layout.

Is it a Mobile App? No!, Mobile apps are primarily hosted on the user’s mobile phone and communicating with server’s database or a cloud app, but PWA are different, they are just normal websites that are displayed like an app on a user’s mobile phone without any app development

PWA are hosted on the developer’s server, think about it as it is your own private browser with your website as the homepage

Progressive web apps must meet certain criteria to be fully functional which you can check through the Google Chrome’s Developer Tools “Audit” Section

The Criteria:

  1. Progressive: Works for every visitor, no matter what browser they use as they’re built with progressive enhancement.
  2. Responsive: Automatic resizing & Re-styling of layout and all elements to fit the size of the viewing device, like mobile, tablet, etc.
  3. Connectivity independent: uses service workers manifest JS file to work offline.
  4. App-like: Uses the devices app-shell to deliver your content in app-like layout and interactions.
  5. Fresh: Always up-to-date due to the service workers process.
  6. Secured: Must be delivered over HTTPS connection to ensure visitor’s information safety.
  7. Engagement: Makes it easier to engage with your visitors using Push Notification Services.
  8. Easy: Allows users to install the app-like website on their home screen without going through any hassle with app stores.

How to create a progressive web app of your website?

If you are using WordPress as your website’s content management system, you can easily add a plugin like Super Progressive Web Apps and fill in the required information as show below.

Steps to setup Progressive Web App on your WordPress website (with pictures)

  1. Login to your WordPress admin area
  2. Go to Plugins in the left side menu and choose Add New
  3. Search for Super Progressive Web App
  4. Install & Activate it
  5. Enter the information as shown below in the image

Search & Intsall Progressive web app

Search for Super Progressive Web Apps Plugin

 

progressive web app Configuration 1

Enter Application Name, Short Name, and Choose Logo

 

progressive web app Configuration 2

You don't need to change anything in this part

 

And Congratulations, you have successfully created your progressive web app with basic features.

You can always check for any errors by going to Google Chrome's Developer tools and Auditing the website.

if you see the test result is like image below, then you're all good

 

progressive web app Test Chrome

 

You can also test your settings by viewing your website from a mobile phone and you will find at the bottom "Add to home" like shown in the image below

 

Mobile progressive web app

Now, I know what you're thinking, will creating a progressive web app version of your website will affect your page speed?

Simple answer: No, it will hardly have any affect on your website's loading speed.

 

As you see below, after a quick test on GTMetrix my website speed has scored 0.5s (YES! half a second). and that can easily be achieved by optimizing Page Speed of your website. 

 

wordpress page speed

Leave a Reply

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

2 comments on “What is a Progressive Web App (PWA)? & How to make it in WordPress? (2019)”

  1. Hi, great article.
    I also read your OxygenBuilder article.
    Does the PWA plugin work well with an OxygenBuilder designed website?
    Thansk.

Latest From My Blog

November 1, 2019
Stop Procrastination: 3 Tips for freelancers

One of the biggest pros of becoming a freelancer, is flexible working hours, but it can be your worst enemy if you can't control your production flow and stop procrastination.  Procrastination or as some people call it "Freelancer's Rut" can be identified as a method to postpone important tasks thinking you can still do it […]

Read More
October 11, 2019
Oxygen Builder The Best Builder for WordPress?

Don't we all want to create more innovative work with endless possibilities within a shorter timeframe? Well, Oxygen Builder team at Soflyy made this come true. The creators of WP All Import & WP Sandbox have created what I consider the most user friendly, feature rich, & advanced WordPress builder I've ever seen yet, and […]

Read More
July 28, 2019
Website Costs in UK: Definitive Guide (2019)

If you're thinking of having a website for your business, this is the most definitive guide you will ever need to know about the website costs in UK. To have a website up and running, you will need 3 main things. 1. Domain Name: A domain name is like your physical address if someone asks […]

Read More
July 18, 2019
What is a Progressive Web App (PWA)? & How to make it in WordPress? (2019)

What is a Progressive Web App (PWA)? You might be testing your website using Google Chrome’s Lighthouse Audit tool and see a criteria of test called Progressive Web App (PWA) and you ask yourself, what is that? Definition: In simple terms, a Progressive Web App is website or a web app that is built to […]

Read More

Subscribe To my Mailing List

Don't Worry, I won't spam you

I send mail once a month with my latest offers and discounts
© Scott MacQuoid 2019. All Rights Reserved. -
Privacy Policy
twitterfacebooklinkedinyoutubeinstagrampinterest-p