Progressive web applications (PWA) are one of the new innovations in web development. It’s like having a mobile application for your website without building it.
Progressive web applications let your website get a place on user’s smartphones like a native app.
It allows the users to load your website without an internet connection. It loads super fast and gives the feel of a real native mobile app. The PWAs are extremely reliable as a user will never see a dead screen even if they face connection issues.
PWA give users a better quality of user experience because they are fast and engaging:
If you are using WordPress, you can easily set up progressive web applications experience for your website or blog. In this tutorial, I’ll show you how to do that, step by step.
In this tutorial, I’ll show you how to set up a progressive web application for your WordPress website.
The whole process is simple and you don’t have to touch a single line of code.
To make this much simpler, I’ll use PWA for WP which is a free plugin to enable progressive web application in WordPress.
What is PWA for WP
PWA for WP is a free plugin that allows you to make your WordPress website or blog progressive web application compatible. It optimizes the site for you all automatically so you won’t have to do anything.
It also adds important features like custom “add to home screen” trigger, push notifications, native UX, and cache expire settings.
PWA for WP is actively developed so you can expect new features coming down the way soon.
Step 1: Install PWA for WP
Head over to your WordPress dashboard and search for PWA for WP. You can also manually download the plugin from WordPress plugin repo. Once you find it click on the install button and then click on activate.
After you activate the plugin, click on the PWA settings:
Click on the start PWA button. Then click on the status checkbox to turn the plugin settings on and save the settings.
PWA for WP works out of the box so you don’t have to configure anything, you can access your site as PWA now.
However, you can tweak the settings to customize the look of your pages to match your brand.
Step 2: How To Customize The Look of Your PWA Pages
Got to PWA settings and click on the design button to change the theme color. In the general settings section, you can add your app icon and splash screen icon. A splash screen is the first image users will see when they launch your app.
Step 3: Setup Pre Caching
PWAs load extremely fast because of pre-caching. The plugin creates a cache file for the number of posts you select and this helps the app load super fast and even without internet.
To activate pre-caching, go to the PWA plugin settings and click on PreCaching settings. Here select automatic, enter the post count (a good number will be 10), and click on the Save button.
That’s it! – your website will now show an “add to home screen button” when a user visits it from a smartphone. You can now serve your website as a progressive web application.
You should also clear your cache after activating the plugin so it can take effect quickly for new visitors.
Integrating Push Notification in PWA
You can add push notifications in your PWA using Google’s firebase.
Go to plugin settings and click on the push notification button. Here you’ll have to enter your FCM key and JSON code.
Create a new firebase project in firebase console. After creating the project you will find FCM Key and JSON in the project details section.
Here’s how the app will look when someone installs it on their smartphone:
Advanced Settings
I would highly recommend you not to touch the advanced settings if you don’t know about progressive web apps in detail. There’s are only a few things you really need to turn on in advanced settings:
- CDN compatibility – if you use CDN like Cloudflare, turn this on
- Offline Google Analytics – background sync to ensure Google Analytics gets the data (both online and offline)
- UTM Tracking – this will help you precisely track the traffic coming from the app
You don’t have to touch anything else in advanced settings.
To test if PWA is working on your website or not, use Google’s official tool called Lighthouse.
If you ever get into a problem or want a new feature to be added to PWA, you can contact their support at the WordPress forum.
Let me know how PWA is working for you in the comments.
Aayush, PWA is something very few know about, and you have helped people like me learn about it. Thank you, I’ll try to add it to my blog this week.
Very welcome Sanjeev!