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
- Your WordPress website should be HTTPS secured. ie; green padlock displays at Address bar (Originate from a secure connection)
- 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.
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.
this is not a good plugin, we used it but it require SSL Certificate
FYI, for supporting any Progressive Web Apps the website should be served fully via https:// We are using it for about one year and its the best one that we tried and the support is really awesome!
Does this plugin offer a loyalty program feature? Thanks!
I’m not sure about it! Can you contact the SuperPWA developers via their website?
SSL certificates are free now. There’s no reason your site doesn’t have one. That doesn’t make this plugin bad, that makes your site not up to spec.
I agree with Sean…don’t blame the app maker.
Hey, very cool post to setup PWAs!! I am happy to find a lot of useful information here in the post, we need to develop more techniques in this regard, thanks for sharing it
My brother recommended I might like this web site. He was totally right.
This post actually made my day. You cann’t imagine simply how much time I had spent for this information! Thanks!