Turn a WordPress website into a PWA

I needed to investigate how difficult it was to make a PWA from an existing WordPress website. What better way of doing that than turning my own WP blog into a PWA?

Progressive Web Apps in general

“A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.” (Wikipedia)

In layman’s terms a progressive web application is a web application with a wrapper that allows you several cool functionalities that allow a user the experience of a native mobile application while using a web application. Not the whole experience, but a part of it for sure. Some of the most important features of PWAs include installation on your machine, push notification, availability in stores etc. I like an article from Amberley Romo that discusses PWA’s in more detail so I ask you to check that one out.

A feature that I really like is that a PWA app (so, a web app) can actually work on your phone when you are offline. OK, so “work” does not necessarily mean “work optimally”, but it can have a lot of the content there so in some cases it is possible you will not even feel the difference.

How to make your WP website into a PWA?

I needed to investigate how to make an existing WordPress page into a PWA. So, I decided I’ll test the process with my own blog which is running on WordPress. Just to note, my blog is really a simple site with very few plugins so I cannot guarantee that this process will work with more complex sites or not be in collision with some of the existing plugins.

There are ways to turn a website into a PWA manually and they include writing your own manifest and service worker, but this is not going to be a part of this article.

WordPress has an ever-growing community that has already developed several plugins that can be used for turning your website into a PWA. For no particular reason I chose Progressive WordPress – it looked the cleanest and the simplest to use.

Progressive WordPress handy features

After installing the plugin, the user interface is extremely clear and simple:

In the Add to homepage section you can configure some values which are basically a part of the PWA’s manifest. This includes the app name, short name, icon, theme colours etc. It is also possible to add different tracking URLs if you want to measure referrers, marketing mediums etc.

In the Offline usage you can play around with caching and which data will be available in offline mode and how. You can control when the caching takes place, which pages are going to be cached and what is going to be the default homepage if the user is indeed offline.

The third part of the plugin is reserved for Push notifications. By default Push notifications are connected to Firebase. According to the documentation and the UI provided by the plugin, connecting to Firebase should be extremely simple – literally just adding the Server Key and Sender ID. However, this did not work for me – I always got an error message that the device could not subscribe.

Fortunately, since the plugin version 2.1.0. Progressive WordPress supports OneSignal (even though it is not shown or noted in the UI). In order for the OneSignal to become the push notification service, you need to install the official OneSignal – Web Push Notifications plugin.

Setting up OneSignal

OneSignal is a service for push notification delivery. After you create an account (and there is a free plan which allows you 30k web subscribers plus unlimited mobile), you need to set it up.

The setup includes several steps and it is pretty straight forward, but I will outline some of the key moments here:

• You need to set up Web Push platform for all browsers except Safari
• You need to set up Web Push platform for Safari specifically
• You need to copy the two JS files (the SDK) to your website’s root folder

Once all of this is connected OneSignal takes care of everything else. In OneSignal itself you can track your subscribers, send new push notifications, keep track of reports and a lot of other stuff. Covering all functionality would take (at least) one more blog post.

In the OneSignal – Web Push Notifications plugin you can configure pretty much everything and anything regarding the push notifications and subscriptions: when will the user be prompted, how they will be prompted, what is the text for subscription going to be, what is the text for unsubscription going to be etc.

I chose the option to add a “bell” button to my website which the user can see at any time and just click it in order to subscribe and unsubscribe.

One of the cool settings of the plugin is that you can set it so it automatically sends a push notification about any new post or page published. I really like that one, as I would forget to send these if I had to send them manually.

Final result

After all of this the final result is that, when you go to https://mariomucalo.com on your mobile device, you have the option to add it to your home screen. When you click it, you get the icon on your mobile phone’s desktop like you would any other.

It works both online and offline and it provides users with a seamless browsing experience, just like a native app would.

When I send a push notification from OneSignal (or from the OneSignal plugin!), users get it as they would any other notification.

Things to consider

In order for all this to make sense you should pay attention to several things:

• The WordPress website needs to be fast. If you want to see about loading times, a good tool to check out is Lighthouse.
• The WordPress website needs to be responsive. If it is not, then the whole thing will look like it is falling apart.
• Some features will not work (like push notifications to iOS as the world is still debating with Apple on the fact that they should really be supporting this).

Pushing to PlayStore and AppStore

I have not done this (yet) myself. However, it has been possible to push a PWA to the PlayStore for a long time now, and since recently the AppStore allows them as well. As well as the Microsoft store. So, theoretically, for the price of one code base you can become present in 3 new marketplaces.

An article on publishing PWA’s to all stores by JudahGabriel Himango is a good starting point to start learning more about this. Perhaps, when I get the time to get into it myself it will turn out to be a blog post topic itself.

Conclusion

If you have a really simple WordPress website which is fully responsive, turning it into a PWA can take literally minutes. However, as the site gets more complicated and the requirements become greater, as the number of plugins grows, I assume the level of complexity of turning a WP site into a PWA follows along.

I sincerely do hope that this post can at least be a starting point for someone needing to do this particular task.