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 […]
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:
- Progressive: Works for every visitor, no matter what browser they use as they’re built with progressive enhancement.
- Responsive: Automatic resizing & Re-styling of layout and all elements to fit the size of the viewing device, like mobile, tablet, etc.
- Connectivity independent: uses service workers manifest JS file to work offline.
- App-like: Uses the devices app-shell to deliver your content in app-like layout and interactions.
- Fresh: Always up-to-date due to the service workers process.
- Secured: Must be delivered over HTTPS connection to ensure visitor’s information safety.
- Engagement: Makes it easier to engage with your visitors using Push Notification Services.
- 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)
- Login to your WordPress admin area
- Go to Plugins in the left side menu and choose Add New
- Search for Super Progressive Web App
- Install & Activate it
- Enter the information as shown below in the image
Search for Super Progressive Web Apps Plugin
Enter Application Name, Short Name, and Choose Logo
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
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
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.
Hi, great article.
I also read your OxygenBuilder article.
Does the PWA plugin work well with an OxygenBuilder designed website?
Thansk.
Thanks, Mate.
Yes, it works perfectly with Oxygen Builder with the same setup as explained in the article