Looking to add a Progressive Web App (PWA) to your WordPress blog but confused about how to do it quickly and without hassles? When you swing by my blog, TheWPX, you’ll notice I’ve got PWA running, letting visitors install the blog like an app on their devices.
Nowadays, more and more websites, not just WordPress ones but even those custom-built from scratch, are hopping onto the PWA bandwagon. Why? Because it allows folks to add your site to their home screens, browse it offline, and access it super easily.
Oh, and did I mention that PWA can also help bump up your site’s ranking on Google, even if it’s indirectly?
I bet you’re now wondering how you can switch on the PWA feature for your own site, right?
Well, I’m here with a special article just for you. I’ll show you how to get PWA up and running on your WordPress site in no more than a minute or two and rest assured; it won’t mess with any of your WordPress files.
But before we dive in, let’s quickly get to grips with what PWA is and how it can be a game-changer for your website.
What Is a Progressive Web App?
If you’re here, you probably know about PWAs or progressive web apps. In case you need a reminder, PWAs are mobile sites created using a JavaScript framework that offer users an app-like experience.
PWAs have a visually appealing and functional design similar to regular websites, but they also incorporate certain features of mobile apps.
To create a progressive web app experience for users, certain criteria must be met.
- Fast: Content should load in minimal time for users.
- Reliable: Content must load instantly, even on slow connections, without issues.
- Responsive: The design should be responsive, supporting various devices and screen sizes.
Simply put, PWA is the future of web browsing and the great thing about it is that you don’t have to completely rewrite your website’s code. There are various ways to design a PWA, depending on the type of website.
PWA Sites have shown 4 times more time spent on the site compared to non-PWA sites. They run directly, support cross-device functionality, and work well even with poor connections.
You can find the study on the official Google developer website, which demonstrates that Twitter Lite PWA significantly increases engagement and reduces data usage. The study is available at this link.
Nicolas Gallagher, the Engineering Lead for Twitter Lite, states that Twitter Lite is now the fastest, most cost-effective, and most reliable way to use Twitter. The web app performs similarly to 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.
Don’t wait any longer; install the PWA feature on your website now using the easy steps I’ll share in this post.
If you have a WordPress website, installing PWA will be quick and hassle-free, taking less than a minute.
Prerequisites to Setup a PWA in WordPress
Before installing PWA on your website, ensure that your website is compatible with the following technologies. Take note of these prerequisites before proceeding with the steps we will provide.
- HTTPS or SSL: Before installing the PWA, ensure that your website uses an HTTPS or SSL connection to serve webpages.
- WordPress Version: Make sure you are using WordPress version 3.5.0 or above.
- PHP Version: The minimum PHP version required for a PWA is 5.3, so ensure your website uses PHP version 5.3 or above.
How to Build PWA with WordPress
Creating a PWA with WordPress is simple. You can follow the tutorials below to activate the progressive web app on your WordPress device. It doesn’t matter what kind of WordPress website you have; this method works for all types.
In this guide, I will share steps using a plugin called “Super PWA” to enable the PWA feature on our website. The plugin is compatible with websites of any traffic volume, including those with over 100K+ visitors, low traffic, and even WooCommerce websites.
Before we begin, ensure that your website pages are served using HTTPS or SSL and that the plugins have the ability to write in the WordPress directory.
Let’s begin…
First, download the “SuperPWA” plugin from the WordPress repository. To do this, go to Plugins > Add New and search for the “SuperPWA” plugin. You can also download the plugin instantly by clicking here.
After finding the plugin in the WordPress repository, you will see the option to install it directly on your site. Simply click on the “Install Now” button to begin installing “Super Progressive Web Apps” on your WordPress website.
After installing and activating the plugin, it will automatically redirect you to the customization page. From there, you can make any necessary changes to the PWA settings to meet your needs.
After opening the PWA customization page, enter your application’s name, short name, description, and icons. You can also change the background color and theme color of your application.
Once you have made all these changes, scroll down the page.
After scrolling down, you will find additional PWA settings. I will now explain a few options to simplify the installation process of PWA for you.
- Start Page: The initial page of your PWA (Since I installed PWA on a new site, it currently doesn’t display any page here).
- Offline Page: Select the page that will be shown to your users when they have no internet connection, and the page is not in the cache.
- Orientation: The device’s orientation. You can choose from three options, and I recommend selecting the first one, which is “follow the device orientation”.
- Display: Choose between Minimal UI, Standalone, Browser, and Full Screen.
After selecting the appropriate options for your website and needs, save the settings by clicking “Save Settings.”
This will store the settings in your WordPress website and create the service worker and manifest file for your website, including the details you provided during the PWA setup.
After following the steps mentioned above, PWA capability will be enabled on your website and you will be able to view the PWA option (as shown in the image).
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.
Great job! You have successfully set up a Progressive Web App (PWA) on your WordPress website.
PWA Plugins for WordPress
Here are some plugins to easily enable PWA functionality in WordPress. You can use these plugins on your website to quickly enable 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.
- Quick and easy to install.
- Add-ons for Apple touch icons and search engine accessibility.
- Only Cached Pages Offline.
- No Google Analytics Support.
2. WordPress Mobile Soft
Another popular plugin you have is “WordPress Mobile Soft.” This premium plugin costs approximately $25 on CodeCanyon. It is quick and easy to set up on your WordPress website and offers more options for your site.
This plugin enables PWA, improves website performance on mobile and desktop, and supports push notifications. It also reduces page and resource loading time through caching with service workers.
- SEO-Friendly URLs.
- It won’t affect your WordPress theme.
- You can opt to use PWA on both desktop and mobile.
- Not tested with the latest version of WordPress.
- May not support all WordPress add-ons.
3. PWA for WP & AMP
One more very liked option for adding PWA features to your website is “PWA for WP & AMP”. You can get this plugin without any cost from the WordPress store. When I was writing this, it is being used actively on more than 20,000 websites, and this number is always going up.
Plus, it has got a really good rating of 4.5 stars.
This plugin will help you enable PWA functionality on your website, even if you’re using AMP. With AMP-active pages, it still displays the option to “Add to Home Screen” on supported devices, which is one of the best features that I like about this plugin.
- It displays PWA on AMP pages.
- Supports OneSignal push notifications.
- Continuously developed and improved.
4. Progressive WordPress (PWA)
Another plugin on our list is “Progressive WordPress (PWA)“, another popular plugin for enabling PWA functionality on websites. It currently has over 3,000 active installations and has received the highest 5-star ratings from users.
This plugin, like the ones mentioned before, enables the “Add to Home Screen” feature for offline page views. It also supports push notifications through OneSignal and PWA on AMP pages.
Using this plugin, you can effortlessly send push notifications from the WP admin interface.
- Supports push notifications and OneSignal.
- Shows PWA on AMP pages.
- Sends push notifications from the WP admin panel.
- Manual configurations required 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.
- Select URLs to exclude from PWA cache
- Support for multiple site configurations.
- Not tested with latest WordPress version.
- Not the top choice 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.
However, we’ve listed some of the major guidelines that are necessary, and you should take care of them before creating a PWA for your website.
These are as follows:
- HTTPS used
- Responsive design for all devices
- Offline loading for all app URLs
- Fast loading, even on 3G
- Every page must have a URL
- Support for cross-browser compatibility
- Fast and smooth page transitions
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 on popular devices like macOS, iPhone, Android, and Linux. This functionality is supported by Chrome 73 browser version and includes desktop support.
The desktop PWA is visible after the browser’s address bar, as shown in the image above.
Wrapping Up!
In this guide, I explained progressive web apps (PWA) and shared how to enable PWA functionality on your WordPress website using plugins. PWA improves performance on desktop and mobile devices, and can indirectly help with Google rankings. I recommend enabling PWA functionality on your website.
If you enjoyed this article or have any thoughts to share, please leave a comment below and share the post with others. 🙂
