How to turn your WordPress site into a Progressive Web Application (PWA)

You’ve decided that you’d like to turn your website into an app, what next? Well one route is turning your site into a PWA – a Progressive Web App.

In this blog post, we talk about how you can combine the benefits of native mobile apps and the openness of the web using Progressive Web Apps (PWA) with WordPress.

What is a Progressive Web Application (PWA)?

A progressive web application (PWA) is a type of application that is delivered through the world wide web. They are usually created using HTML, CSS and JavaScript just like make a normal website. Unlike native mobile apps (e.g. Snapchat), progressive web apps run through a web browser just by accessing a web address, and so don’t need to be downloaded through an app store such as Apple’s App Store or the Google Play Store.

However, it is possible to install a progressive web app onto a mobile home screen with an icon so a user can open the apps with a simple click. Progressive web apps can be used without internet access (offline) with the help of service workers. Progressive web apps can also send notifications to the user.

Benefits of Progressive Web Application (PWA)?

• PWAs are cheaper than other apps: content only needs to be produced once, it saves time and money compared to creating content separately for iOS, Android, and a website.  
• PWA allows your app to be viewed offline: with the help of service workers the site can cache assets of the website, so the user loses internet connection and some content will be displayed. 
• No App store required: since the PWA is running through the web the user does not have to go through the hassle of downloading your app through an app store.
• Improved page speed: by upgrading your website to a progressive web app and following Progressive Web App Checklist outlined by Google will improve the user experience of your site as one of the benefits of service worker caching allows your webpage to load quicker. 

Convert Your Site Into PWA

There are two main ways to convert your WordPress website into a progressive web app. You can either manually develop your WordPress progressive web app with a JavaScript framework like React.js or to use one of several progressive web app WordPress plugins that are available.

1. Manually Develop Your PWA

Developing your progressive web app may be costly, as it requires time and coding knowledge. The developer(s) need to know JavaScript frameworks such as Vue.js or React.js and static site generators like Gatsby.js. I have written a blog of the benefits and drawbacks of building a headless WordPress site here. If you do decide to build a PWA site make sure to follow Google Chrome’s Progressive Web App Checklist and test your web page with the lighthouse tool to make sure your website is running optimally.

2. Use a WordPress Plugin

If you have no coding experience I would recommend using a WordPress PWA plugin to save you time and cost.

• SuperPWA – SuperPWA is easy to set up and configure. It takes less than a minute to set-up your Progressive Web App.
• PWA for WP and AMP – PWA for WP & AMP gives your website an app-like experience to your users which will get your website to their home screen and works instantly like an app with offline support.
• Progressive WordPress (PWA) – Progressive WordPress (PWA) enables PWA features on your WordPress website. Progressive WordPress encourages users to add your website to their home screen. It allows offline usage by pre-caches all critical assets of your website so no more error downasaur!

Send Push Notifications

You can also send push notifications automatically when a new post is published to your WordPress site using One Signal Plugin. PWA WordPress plugins like SuperPWA work with One signal plugin so your users who are using your PWA app can receive push notifications from your site.  Below is an example of a push notification.  

The Conclusion

If you have coding experience and are knowledgeable of Javascript Frameworks like React.js, manually developing your PWA site would be the best option for you. However, for owners of WordPress websites who are not tech-savvy and want an off the shelf solution, PWA Plugins for WordPress like SuperPWA are the way to go. As these plugins can save you the time when dealing with the process of building a PWA.