Make your wordpress site a PWA in under 5 minutes

Introduction

Recently I enabled PWA features for my blog after i did extensive research for implementing PWA on to a wordpress site. I did this research for a client and was amazed by the benefits a website could acquire once PWA is enabled. I will explain those below.

What is a PWA?

PWA , short form for “Progressive Web Apps” is a collective set of standards which can be implemented on to a website in order evolve your website to mock a native app and provide its features . In plain words, Once you implement PWA, people will be able to install your website as an app to their device and they will get more engaged to your content once that is done, just like a Native app downloaded from Play store/App store.

Why do you need a PWA for your wordpress website?

So before PWA, People had their websites, and for each system they had to make Native apps which can be deployed to play store and app store to engage more audience with the site/system. There were many problems that people faced to develop native apps:

Development cost/effort, as apps had to managed in separate codebase for android and ios (i.e java and swift). Eventually, hybrid apps came into being which reduced the development effort significantly by providing single codebase across platforms (like ionic, flutter, react native etc.)

Learning curve: Developers had to learn multiple skills i.e, Java, objective c, Swift etc. After hybrid apps came into being, its was all about javascript but still you need to know the above mentioned native languages if in case some functionality is not available in the open source. Then you will have to create the bridge plugin yourselves.

Time to Go live: As two codebases were used and maintained, the apps would take a long time to go live.

Stores’ Formalities : There is a lot of procedure involved in publishing the apps in both the store and that could really become a headache. For eg, If you want to publish an ios app to appstore, you need a appstore connect account which costs around 99 USD per year, a developer account. You need to verify yourself by creating certificates for your device in which you are developing the app. If all that is not enough, every time you publish an app (update for app), it would take minimum of 2 working day for apple to review your app and make it live.

Stores’ charges : Moreover, every profit you make from the app, i.e if a user buys a product from your app and pays for it from google pay or apple pay, Stores get 30% of your revenue for making it all happen. (*slow claps*).

slow claps!

In order to tackle these issues, the concept of PWA was born. The idea was Website owners should be able to create an installable version of their website, which users can add to their device home screen irrespective of the platform i.e android or ios. the feel of the install process should so similar to the native app that, users shouldn’t be able to tell the difference. PWA also served another purpose. When hybrid apps were gaining popularity, people started wrapping their websites, into the Cordova app shell and publishing those on o the AppStore. One thing to note is that it takes a lot of effort and resources to maintain one app for the AppStore. when someone publishes a website itself just for the purpose of gaining user audience to their website, the app stores are at loss. With PWA, website owners won’t have to publish their websites on to AppStore. They can now reach a greater audience and reduce bounce rate with PWA.

Pros and cons of PWA

Pros:

  • no need to publish to AppStore
  • single codebase across all platforms.
  • no extra development effort.
  • no learning curve (just need to know HTML,CSS,javascript)
  • it supports many native-like features i.e web notifications, offline content (caching), improved UX for slower networks like 2g/3g, etc.

Cons:

  • extensive support for android but minimal support from ios
  • major features won’t work in ios such as web notifications
  • offline support for ios is minimal i.e only 50mb is available for a PWA to store files. Moreover, if the app session is destroyed, apple phones will purge the cache automatically after a few hours, unlike android devices
  • Modern browsers are incorporating a lot of native features like webcam, microphone access, etc. and many experimental APIs are being developed for the sake of PWA like payments API to make payment in one click from a website like apple pay/ google pay. But lots of things are still unstable as PWA is still in its infancy and it will take time to gain support from apple and google to develop and support more native-like features.
  • It’s even harder for Adding PWA features to WordPress because
    • First of all, the WordPress site is not primarily a web app. To take maximum advantage of the pwa, the site should be a web app built with a mobile-first approach. I am not sure, but there might be themes that have specialized templates for PWA to provide a rich app-like look and feel. If not, customizing PHP templates to create on would take a good amount of time.
    • WordPress sites mostly have a lot of plugins installed to handle different functionalities. these plugins are developed by different authors and they have their specific CSS and js files which when loading affects the overall website performance. It’s not good for the PWA approach. I handle it with a yet another plugin called AutoOptimize which uglifies and minifies all the CSS and JS file and loads a single file thus improving performance. Be aware that this is just the laziest approach to optimization.
    • Multiple service workers on the WordPress site due to plugins installed can lead to interruption of PWA features on the site. Caching plugins have their own service workers so when the website is loaded their service-worker is also loaded along with the one in which PWA is defined. The browser runs only one service worker at a time. So, the one which is loaded fast and first runs first. That means if the PWA service worker doesn’t load first the site wouldn’t work as a PWA. The solution to this is to not use any plugins which have their own service works whit it installs on the browser.

Installation

If you are as lazy as i am, you might be looking for the easiest solution to make your WordPress website into a PWA as fast as possible. Well, it is not entirely impossible. Just do the following:

Install the plugin

This is one awesome plugin which handles all the settings necessary for providing basic pwa features to your users like:

  • add app to homescreen
  • app icon
  • splashscreen
  • caching for offline

Download it from here: https://wordpress.org/plugins/super-progressive-web-apps/

Another plugin you need is to enable web notifications on your website. This is another awesome plugin that helps to do so. Download the plugin from here : https://wordpress.org/plugins/onesignal-free-web-push-notifications/

Add the following settings

The dashboard for Setting up PWA looks something like this:

superPWA plugin dashboard in wordpress
super PWA dashboard settings

It is really self-explanatory. Once you set all of these according to your needs, you get yourself a basic PWA.

As for the one signal setup, you will have to go to its official site, i.e https://app.onesignal.com/ and register an account there. Once that is done, you will get the api key from the dashboard, create an app for your website and then you will be provided with an app id , api key. Copy it and add it to one signal configuration page (which will look something like below. Safari webpush id is needed if you want to show pushnotification for safari browser.)

onesignal plugin dashboard in wordpress

Conclusion

You can set all the settings as shown above, once that is done, voila! you have website is now a PWA and you are ready to engage more users and enjoy more conversions!

If you found this article helpful, do subscribe to my notifications and let me know if this worked for you in the comment section below or if you found more helpful approach to the problem. I really would love to hear it.

45
45