How to Setup Progressive Web Apps on Your WordPress Website

Do you want to setup Progressive Web Apps on your WordPress website? Progressive Web Apps (PWA) are the modern websites that have the same user experience of a native mobile app. In this article, we will show you how to set up PWA in WordPress.

What is PWA?

PWA stands for Progressive Web Apps. It’s an enhancement of existing web technology that supports upon the modern web browsers. PWA installed websites load more faster than the normal, as they are working mainly via the service workers and web app manifest. Popular websites like Flipkart, Twitter, Telegram..etc launched their Progressive Web Apps and increased their traffic by 50-60% and offer better user experience via fast loading.

Advantages of PWA

• The ability to use the website even when offline
• SSL provides high security on all
• App Like Performance
• Fast loading
• No app store submission needed
• Can easily send notifications to users
• Push Notification

Requirements before setup of PWA

1. Your WordPress website should be HTTPS secured.  ie; green padlock displays at Address bar (Originate from a secure connection)
2. Website should be responsive (ie; website should work perfectly on mobile, tablet and desktop)

Setting up Progressive Web Apps or PWA in WordPress

When we searched on WordPress for the best plugin for Progressive Web Apps, that have good reviews and top support we find out a plugin called Super Progressive Web Apps.  We tried it and found its the best one for converting a WordPress website into PWA with a good user Interface, Multi site support, Push notifications and easy to setup.

Plugin Installation Steps

• First thing you need to do is install and activate the Super Progressive Web Apps plugin. (For that you can Click “Plugins” on your dashboard. Click “Add New” button and then search for “Super Progressive Web Apps”.
• From the search results you can see the plugin with name as first. Click “Install” and ‘Activate’ it.

Plugin Activation Steps

• Upon activation, you can head over to Settings » SuperPWA page to set the settings for your website’s PWA.

Super Progressive Web Apps (SuperPWA) WordPress Plugin Settings Page

Within the settings page, the plugin allows you to edit the details on App name, Short Name, Splash Screen Icon, Start URL and also helps to select the Offline page from the drop-down. On the Design tab, you can choose the background colour of the Splash Screen. You can also upload a logo of size 192px *192px and 512*512px for your Icon and Splash screen when PWA gets installed on phone.

• Application Name : Name of the application to mentioned when the Add to Home Screen comes
• Start URL : The page which loads when the user open the PWA
• Offline Page : The page which loads when the device is offline and the page is not cached earlier

However, you need to make sure to validate your PWA via the Lighthouse addon. We see a 100/100 performance by using the plugin.

We hope this article, helped you to learn how to set up Progressive Web App (PWA) on WordPress. You may also want to see our list of 9 Essential Plugins For Any WordPress Website.