How to turn your WordPress into a Progressive Web App (PWA)
Posted: Sat Jan 25, 2025 8:00 am
Plugins needed to make your WordPress a PWA
The two plugins we will be using are Super Progressive Web Apps and OneSignal . Let's take a look at them in a little more detail and see how we will have to configure them.
Super Progressive Web Apps
This plugin is basic for what we want, chief vp compliance email list since it will make your website installable and install the service worker that will be in charge of executing all the features of a Progressive Web App. The only thing we will have to do to get it working correctly is to install it and access the WordPress section that will appear in SuperPWA > Settings . Here we will have several fields to fill in:
Application Name
The name of the PWA. You will usually want to put the name of your blog/business.
Application Short Name
Here we will put the name that we want to appear under the icon once the PWA is installed on any device. It would be the equivalent of the name of the Apps. It should not be too long.
Description
A brief description of what your website is about.
Application Icon
The icon that we want to appear once the PWA is installed, as well as the top banner that appears when you use your smartphone to check how many apps you have open at that moment. You can add transparency if it is a .png image.
Splash Screen Icon
When you access the PWA, an initial loading screen appears with an X color and an icon. Here you define what icon it will be. Generally, the same one is used as in the previous section.
Background Color
The background color, obviously.
Theme Color
Here you can specify the main color of your Progressive Web App. It is usually used for the top border that I mentioned in the Application Icon and some other details.
Start Page
The URL that will serve as the home page once you access it by clicking on the icon. It may or may NOT match the default home page of the website. In Digital Growth, for example, it does not match, since the PWA uses our blog page as the home URL.
Offline Page
Here we have to put the URL that we want to load when the user has no Internet connection or access to the cached version of the Start Page.
Orientation
Finally, in this field we define whether we want the PWA to always load vertically or horizontally. You can also leave it to the user's choice.
Once we fill in all the information, we can check that everything is correctly configured with the checks that the plugin itself will show you.
IMPORTANT: Remember that it is mandatory that the website is mounted on HTTPS for the PWA to be valid.
You can download the 'Super Progressive Web Apps' plugin from here:
https://wordpress.org/plugins/super-pro ... -web-apps/
OneSignal
There is a typical PWA functionality that the previous plugin does not have, and that is Push Notifications . In fact, it does not have it because, as the developers themselves comment, they saw that there was already a clear reference on this topic with OneSignal , so they preferred to make their plugin fully compatible with them instead of implementing this feature from scratch.
So, this is the second plugin we'll need. We install it and access the new section that we'll see in our WordPress sidebar: OneSignal Push . It will ask us to take a couple of steps before we can configure anything:
Register as users on their website , where among other things we will have the control panel from which we can see how many followers we have or the effectiveness of our notifications.
Create Web Push Apps for the different systems you want. This is necessary so that the plugin 'has permission' to send notifications to users. You can create them from the OneSignal website itself, once you have logged in.
Once this is done, we will have to go to 'OneSignal Push' in our WordPress and also put the ID and API in the 'Configuration' tab (if you put the mouse over the '?' symbol you will see where to find them very easily). We will also have to confirm that our website is in HTTPS.
Finally, in the following fields the plugin will give us some options when it comes to which messages to show to the user, which URL they will go to when clicking or which image will appear on their devices when receiving the notification.
IMPORTANT: This plugin will only send push notifications when we publish a new post on the website. If we want to be able to send notifications at certain times such as promotions or anything else unrelated to the blog, we will also need to install the OneSignal Sender plugin .
The two plugins we will be using are Super Progressive Web Apps and OneSignal . Let's take a look at them in a little more detail and see how we will have to configure them.
Super Progressive Web Apps
This plugin is basic for what we want, chief vp compliance email list since it will make your website installable and install the service worker that will be in charge of executing all the features of a Progressive Web App. The only thing we will have to do to get it working correctly is to install it and access the WordPress section that will appear in SuperPWA > Settings . Here we will have several fields to fill in:
Application Name
The name of the PWA. You will usually want to put the name of your blog/business.
Application Short Name
Here we will put the name that we want to appear under the icon once the PWA is installed on any device. It would be the equivalent of the name of the Apps. It should not be too long.
Description
A brief description of what your website is about.
Application Icon
The icon that we want to appear once the PWA is installed, as well as the top banner that appears when you use your smartphone to check how many apps you have open at that moment. You can add transparency if it is a .png image.
Splash Screen Icon
When you access the PWA, an initial loading screen appears with an X color and an icon. Here you define what icon it will be. Generally, the same one is used as in the previous section.
Background Color
The background color, obviously.
Theme Color
Here you can specify the main color of your Progressive Web App. It is usually used for the top border that I mentioned in the Application Icon and some other details.
Start Page
The URL that will serve as the home page once you access it by clicking on the icon. It may or may NOT match the default home page of the website. In Digital Growth, for example, it does not match, since the PWA uses our blog page as the home URL.
Offline Page
Here we have to put the URL that we want to load when the user has no Internet connection or access to the cached version of the Start Page.
Orientation
Finally, in this field we define whether we want the PWA to always load vertically or horizontally. You can also leave it to the user's choice.
Once we fill in all the information, we can check that everything is correctly configured with the checks that the plugin itself will show you.
IMPORTANT: Remember that it is mandatory that the website is mounted on HTTPS for the PWA to be valid.
You can download the 'Super Progressive Web Apps' plugin from here:
https://wordpress.org/plugins/super-pro ... -web-apps/
OneSignal
There is a typical PWA functionality that the previous plugin does not have, and that is Push Notifications . In fact, it does not have it because, as the developers themselves comment, they saw that there was already a clear reference on this topic with OneSignal , so they preferred to make their plugin fully compatible with them instead of implementing this feature from scratch.
So, this is the second plugin we'll need. We install it and access the new section that we'll see in our WordPress sidebar: OneSignal Push . It will ask us to take a couple of steps before we can configure anything:
Register as users on their website , where among other things we will have the control panel from which we can see how many followers we have or the effectiveness of our notifications.
Create Web Push Apps for the different systems you want. This is necessary so that the plugin 'has permission' to send notifications to users. You can create them from the OneSignal website itself, once you have logged in.
Once this is done, we will have to go to 'OneSignal Push' in our WordPress and also put the ID and API in the 'Configuration' tab (if you put the mouse over the '?' symbol you will see where to find them very easily). We will also have to confirm that our website is in HTTPS.
Finally, in the following fields the plugin will give us some options when it comes to which messages to show to the user, which URL they will go to when clicking or which image will appear on their devices when receiving the notification.
IMPORTANT: This plugin will only send push notifications when we publish a new post on the website. If we want to be able to send notifications at certain times such as promotions or anything else unrelated to the blog, we will also need to install the OneSignal Sender plugin .