Here’s why I converted my blog site to become a PWA (Progressive Web App)
In developed economies such as the UK and the US, we now spend almost twice as long online using a smartphone than using laptops or a PC.
In fact, in my final months of working with KPMG, their entire workforce was being kitted out with tablet PCs. Hybrid tablet laptops with Windows as the operating system.
Clients I’ve worked with have found it difficult to justify the cost of Apps for web experiences. A developer friend of mine mentioned PWAs and I became curious to find out more.
Progressive Web Apps — best of both
The concept for a PWA is simple, they are websites that feel like apps you would find in an App Store.
And they can accessed through a conventional URL with HTTPS. This makes them search friendly for search engines.
With features such as push notifications, wake, refresh and instant loading for websites; they give us the opportunity to get the best optimised experience for any device.
I’m taking things back to basics so that I can explain some of the tech involved. So I apologise if you are already familiar with these concepts.
To create a Progressive Web App, developers created a concept called service worker. This is a bit of code that fetches information without affecting the main code that is the website.
It allows the PWA to fetch information to store it on your device. That means the website behaves as if it were an app on your device. After the first visit, it doesn’t need to stay connected for the website to be present on the device.
So how easy is it to create a Progressive Web App without much experience of coding?
For someone like me for instance, who is familiar with code, but not enough to call themselves a developer.
First of all, I tried the PWA Builder.
I put my blog website URL in the box and waited. The page then analysed my site for any information that was missing.
The analysis showed that I am missing icon images to use to launch the website from a mobile device.
The next step of the builder created the Service Manager code for me to download.
Code generated for web, windows, android and IOS. Now before I get too excited, the PWA builder is by Microsoft.
At the moment, Microsoft seems to making technology easy for people to access. Microsoft have embraced the opensource model.
That is to say they make it easy to transfer or adapt code to work in Windows and elsewhere.
The logic is of course clear. Microsoft make their ecosystem an easy choice for everyone.
There’s a widget or Plugin for that
Turns out, I could not fathom out how to add the code to my blog site using WordPress and the premade template.
I can just about change the CSS and entertain the idea of changing HTML. Looking at the code sample in the PWA is deceptive. It looked simple to put in place.
It wasn’t simple, I needed to access something called “The Manifest for Web Apps”.
Whenever I get stuck, Google search is my best friend and ally. I typed in the words “Progressive Web Apps Wordpress” into the search bar.
The first result of my search was for a Plugin for PWA.
Rather than go down the DIY route of adding code generated by the PWA tool… There’s a plugin ready to go in the WordPress community of Plugins.
It’s not that I favour WordPress above other Content Management Systems. I’ve worked with open source Drupal as well as Umbraco as well as enterprise level ones such as SiteCore.
They all have their particular strengths. It’s about picking the one that best suits the task in hand.
For me WordPress was a clear choice for a personal blog. It has a community of developers that are helpful. Plus bloggers who want to share their experience.
The clincher was the fact that it needed zero knowledge or skills for programming or coding.
I installed the plugin and followed the instructions.
Create a Google Firebase account.
I will explore the tools available in Firebase another time. Right now, I’m interested in getting my blog site converted into a PWA.
It took a while to figure out as I’m not that patient when it comes to reading through instructions. If anyone who writes instructions out there, please take note:
It’s helpful to provide a screen grab as it helps identify the page or function to look for:
To activate the plugin — you need to open and complete some details from the Firebase account. The starter license for Firebase is free, so it’s great to be able to experiment and find out more about the features.
Once created, there is a toolbar for the settings. Toggle this, which then opens up a series of tabs. Select “Cloud Messaging” and copy the code from this into the plugin, the screengrab below shows the code generated in Firebase to use in the WordPress Plugin.
My reason for doing this isn’t random. I like exploring new ideas and technology, it also means I learn something new from the experience.
Here’s why I made my blog site a PWA. I’ve noticed that I get push notifications on my mobile for tweets and Instagram posts. They are a distraction and I’ve learned to ignore them when I need to focus on a task.
But, when I’m receptive to them, they make me want to click and explore the new notification.
For brands seeking to increase audience engagement, a push notification generates awareness. It puts the brand in the pockets of their target audience.
Whilst it’s possible to develop a Web App, the downside is that it requires Wifi or 4G/3G access to connect to the web.
It seems out of the box plugin for WordPress is a simple solution that saves the website pages on the local device.
PWA removes the barriers of App Stores, creating an app like website and that is the point. It can brings your audience closer to your brand, whether connected to the web or offline.
I’ve enjoyed the process of converting my site to a PWA and now that I know it is relatively simple — a child could do it…. (me) as a proof of concept for me to explain what’s involved in simple terms. It also means I can explore on future projects wider benefits and use cases, especially when a client asks about whether to build an App or not.
This story is published in The Startup, Medium’s largest entrepreneurship publication followed by 320,924+ people.
Subscribe to receive our top stories here.
