Are you looking to install a progressive web app (PWA) on your WordPress blog and don’t know how to efficiently install it? When you visit my blog (TheWPX), you’ll see that I also installed PWA on my blog to allow the end-user to install the app on their device.
The number of websites using PWA is increasing day by day, not just WordPress websites, but custom coded sites also installing PWA or Progressive Web App on their platform or site because it adds the power to add your website to the home screen, offline navigation, and easily reachability.
Did I forget to mention that not directly but indirectly PWA is a ranking factor in Google?
I know what you’re thinking right now, you’re thinking about how you can enable the PWA feature on your website. Isn’t it?
So, here I’m with another exclusive article on setting up PWA or Progressive Web App on your WordPress website within a minute or two without conflicting with any WordPress files.
But before we get started, let’s learn what PWA is and the benefits of using it on our websites.
What Is a Progressive Web App?
If you’re here, you’re likely familiar with the PWA or progressive web app, but to just refresh, PWA are mobile sites built with a JavaScript framework that delivers an app-like experience to users.
PWA look’s good and works like a regular site but with some functionalities of the mobile app.
To build a progressive web app experience for users, it has to be;
- Fast: It should take minimal time to load the content for users.
- Reliable: It has to load instantly, even on slow connections with no issue.
- Responsive: It should be responsive in nature and it has the capability to support various devices and device sizes.
In simple words, PWA is the future of the web browsing experience and the best thing about using PWA is, you don’t need to re-code your website completely. Depending upon the type of website, there are several ways to design the PWA.
PWA Sites has shown 4x more time spent on the site as compared with the non-PWA site. It runs directly, supports cross-device, and works best with poor connections too.
Here is the study on the official Google’s developer website, which shows that Twitter Lite PWA significantly increases engagement and reduces data usage.
And Nicolas Gallagher, the Engineering Lead for Twitter Lite, notes:
Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter. The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.
Not limited to Twitter, here are the stats from the PWAStats, which show extraneous changes in popular websites after installing the PWA.
So don’t delay it now and install the PWA feature on your website with the easy steps I’m going to share in this post.
Along with all these, If you’re using a WordPress website, then installing PWA will take less than a minute for you and with no hassle.
Prerequisites to Setup a PWA in WordPress
Here are a few things which you should have to take care of before installing PWA on your website. Before following the steps we’re going to share below, make sure your website uses all these technologies for compatibility.
- HTTPS or SSL: Before installing the PWA, make sure your website uses HTTPS or SSL connection to serve webpages.
- WordPress Version: You need to make sure you’re using a WordPress version 3.5.0 or above.
- PHP Version: The minimum PHP version required for PWA is 5.3, so make sure your website uses 5.3 or above PHP version.
How to Build PWA with WordPress
Building a PWA with WordPress is easy. You can follow the tutorials I’m going to share below to activate the progressive web app on your WordPress device. It doesn’t matter which type of WordPress website you’re converting with the PWA, this method works well with every type of WordPress website.
Basically, in this guide, I’m going to share steps using a plugin named “Super PWA” for enabling the PWA feature on our website. The plugin works perfectly with a Website with over 100K+ traffic, a website with no traffic, and even with a WooCoomerce website.
Before we start, you’ve to make sure your website pages are served over HTTPS or SSL and the plugins can write in the WordPress directory.
So let’s get started…
So, the first step is to download the “SuperPWA” plugin from the WordPress repository. And to download the plugin, visit Plugins > Add New and search for the “SuperPWA” plugin. You can also click here to download the plugin instantly.
Once you search for the plugin in the WordPress repository, it will show the option to install directly to your site. Click on the “Install Now” button to start installing “Super Progressive Web Apps” on your WordPress website.
Once you installed and activated the plugin, it will get installed and will redirect you to the customization page. From the customization page, you can make necessary changes in PWA settings according to your needs and requirements.
Once the PWA customization page gets opened, enter the name of your application, a short name, description, and icons. You’ll also get the option to change the background color of your application and to change the theme color.
Once you have done making all these changes, then scroll down the page.
Once you scroll down the page, it will show some more settings for PWA. Here I’m explaining a few options for you to make installing PWA easy;
- Start Page: The start page of your PWA page (As I installed PWA on a new site so, it isn’t showing any page here).
- Offline Page: You can choose the page which will show to your users if they don’t have a working internet connection and the page isn’t available in the cache.
- Orientation: The device orientation. You can choose between three options there and I recommend choosing the first one which is “follow the device orientation”.
- Display: You’ll get the option to choose between Minimal UI, Standalone, Browser, and Full Screen.
Once you choose the options according to your website and your needs, then save the settings by clicking on the “Save Settings” button.
It will save the settings in your WordPress website and generate the service worker and the manifest file for your website along with the details you entered during setting up the PWA.
Once you have done everything I shared above, it will enable the PWA capability on your website and you can see the PWA option on your website (as shared in the image above).
You’ll also get a few add-ons with SuperPWA. And for checking the Add-ons, go to SuperPWA > Add-ons. These add-ons will further help you to track the performance using PWA and to add Apple Touch icons for compatibility with iOS devices and your website.
Bingo! you’ve done successfully setting up PWA on your WordPress website. 🙂
PWA Plugins for WordPress
Here are a few plugins for enabling PWA functionality in WordPress easily. You can use these plugins on your website with no hassle and instantly enable the PWA functionality.
So these are as follows;
1. Super Progressive Web Apps
Super Progressive Web Apps is one of the most popular plugins to enable PWA functionality on the website. The plugin is really quick, and it helps to make your website PWA enabled within a few seconds or a minute.
This is the plugin that I’m using right now on this blog (TheWPX). Whenever your visitor visits your website on a supported device, it shows a message to “Add to Home Screen”. And when visitors click on the option, it instantly adds your PWA website into their device with the icon you set during the installation period.
And after that, any page they view will be cached and made available offline to them.
Pros
- Quick and easy to install.
- Add-ons for apple touch icons & search engines can access it.
Cons
- Only Cached Pages Available Offline.
- No Google Analytics Support.
2. WordPress Mobile Soft
Another most popular plugin you’ve got is “WordPress Mobile Soft“. The plugin is a premium plugin that will cost you approx $25 on CodeCanyon. It is another plugin that is quick and easy to set up on your WordPress website and provides you with more options in your Website.
With the help of this plugin, you can enable PWA, improve website performance on both mobile and desktop, and come with push notification support.
Along with it, the caching with service workers will also reduce the time to load pages and resources.
Pros
- SEO-Friendly URLs.
- It won’t affect your WordPress theme.
- You c opt to use PWA on both desktop and mobile.
Cons
- Not tested with the latest WordPress version.
- It may not support all WordPress add-ons.
3. PWA for WP & AMP
Another most popular for enabling the PWA functionality on our website is “PWA for WP & AMP”. The plugin is available for free in the WordPress repository. It has more than 20,000+ active installations during writing this post, and it continuously grows and it also comes with a 4.5-star rating.
This plugin will also help you to enable PWA functionality on your website, even if you’re using AMP on your website. With AMP active pages, it still shows the option to “Add to Home Screen” on a supported device, and it is one of the best things which I liked in this plugin.
Pros
- It shows PWA on AMP pages.
- Support OneSignal push notifications.
- Continuous development and improvements.
Cons
- Pull to refresh and other important features are available in the premium version only.
4. Progressive WordPress (PWA)
Another plugin in our list is “Progressive WordPress (PWA)“, which is another widely used plugin for enabling PWA functionality on the website. It has more than 3,000+ active installations as of writing this post with the highest 5-star ratings by users.
Like the plugins we shared above, it supports the “Add to Home Screen” option with cache page views offline. It also supports push notifications using OneSignal and supports PWA on AMP pages.
With the help of this plugin, you can easily send push notifications from the WP admin interface.
Pros
- Support push notifications and OneSignal.
- Shows PWA on AMP Pages.
- Send push notifications from the WP admin panel.
Cons
- Manually configurations if not using compatible AMP plugins.
5. PWA for WordPress
The last plugin which I’m sharing today is “PWA for WordPress“. It is another wordpress plugin that you can use to enable the PWA functionality on your website – but I’ll not recommend using this plugin because it isn’t tested with the last 3 major WordPress updates.
The plugin has 700+ active installations in the WordPress repository with 5-star ratings by four users. Once the plugin is installed, it creates two files “Manifest” and “ServiceWorker” on your website for enabling the PWA.
The manifest file is a JSON file that has configurations of web applications and the ServiceWorker is a JavaScript file that controls PWA’s functions.
Pros
- Choose which URLs to exclude from the PWA cache
- Support for multisite setups.
Cons
- It isn’t tested with the recent WordPress version.
- Not the first thought for PWA installation.
Google’s PWA Guidelines
When it comes to creating a PWA for your website, Google offers a set of guidelines that includes a list of potential issues and how to fix them.
But here we’ve listed some of the major guidelines, which are necessary, and you should have to take care of them before creating a PWA for your website.
These are as follows;
- Site Uses HTTPS
- Responsive Design for Every Device
- All App URLs Load Offline
- Loading Should be Fast (Even on 3G)
- Every Page Must Have a URL
- Site Supports Cross-Browser Compatibility
- Page Transitions are Fast & Smooth
and many more.
You can also use tools like Lighthouse to test the implementation and errors of PWA easily. It audits your website for potential errors and also shows the ways to improve them.
Progressive Web Apps on Desktop
PWA or Progressive Mobile Apps are now available for Desktop, as well as other popular devices including macOS, iPhone, Android, and Linux. The functionality is available after Chrome 73 browser version and now it supports desktop too.
The PWA on the desktop is visible after the address bar of the browser as shown in the image above.
Wrapping Up!
So in this guide today, I tried my best to explain about the progressive web apps or PWA. I also shared the ways through which you can enable PWA functionality on your WordPress website and shared a few plugins which can enable this functionality.
PWA is an important thing which I personally think is suitable for you to increase the performance on both desktop and mobile devices. Not directly, but yes, it is a ranking factor that helps to rank your website more on Google.
So I highly suggest enabling the PWA functionality on your website.
If you liked this article or want to share something with us, then please leave a comment below, and don’t forget to share this post with your friends, family, and followers. 🙂
