Are you looking to install a Progressive Web Application (PWA) on your WordPress blog and you don’t know how to install it effectively? When you visit my blog (TheWPX), you will see that I have 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 only WordPress websites but also custom coded sites also installing PWA or Progressive web app on their platform or site as it adds the ability to add your website on the home screen, offline navigation and easy access. .

What Is a Progressive Web App?

If you’re here, you’re probably familiar with PWAs or progressive web apps, but put simply, PWAs are mobile sites built with a JavaScript framework that gives users an app-like experience.

PWA looks good and works like a normal site, but with some mobile app functionality.

To create a progressive web app experience for users, it has to be;

  • Fast – Loading content for users should take a minimum of time.
  • Reliable – It should charge instantly, even over slow connections without any issues.
  • Responsiveness – Must be responsive in nature and have the ability to support multiple devices and device sizes.


Simply put, PWA is the future of the web browsing experience and the benefit of using PWA is that you don’t have to completely re-code your website. Depending on the type of website, there are several ways to design the PWA.

When Should I Use a PWA Plugin?

Web applications are broad in scope because they can be accessed from a browser via their URL or discovered through a search query. But they often lack the things they are capable of. PWAs give you the best of both worlds (web and native apps) by expanding your website’s capabilities without sacrificing your reach.

These are some of the benefits of turning your website into a PWA.

  • They can work offline (up to a point).
  • They can be accessed through a URL or discovered through a search engine.
  • They allow you to send automatic notifications to your users.
  • They are much faster and lighter than traditional web applications.
  • They can be installed like normal applications and can even be distributed through the App Store.
  • They have access to various native features like geolocation, camera, microphone, screen orientation, etc.
  • They are always up to date because you don’t need to update them from an app store.

How Do I Set Up a PWA in WordPress?

Now that you know what a PWA is and when it should be used, let’s take a look at how to set it up in WordPress. To do this, three steps are necessary.

  • Installing a PWA plugin for WordPress.
  • Configuration of the WordPress PWA application.
  • Confirming that we are configuring it correctly.

Installing a PWA plugin for WordPress

To install the PWA plugin, make sure you’re logged into your WordPress account, then navigate to your control panel.

Installing The WordPress PWA Plugin - Image 1

Now hover over Plugins in the left menu and click Add New in the right context menu. This should take you to the Add Plugins page.

Installing The WordPress PWA Plugin - Image 2

In the search bar of the Add Plugins page, type “PWA”. You will be presented with a list of available PWA plugins. For this tutorial, we would be using PWA for WP and AMP. It is a very good PWA plugin for WordPress and can be used with AMP websites.
Now click on the Install Now button. Once the plugin is installed, you should see an Activate button. Click on it to activate the plugin.

Installing The WordPress PWA Plugin - Image 3

You should now be redirected to the PWA plugin page for WP and AMP. Now let’s move on to configuring the plugin.

Configuration of the WordPress PWA application

Now that the plugin is installed, let’s configure it. Click the General tab of the page tabs. This tab is where you will find the basic PWA settings.

Setting Up the PWA WordPress App - Image 1

Set the application name and the application short name to the name of your web application. Then provide a short description of your application using Application Description. The application icon and the application home screen icon must be in PNG format with 192 x 192 pixels and 512 x 512 pixels. To configure the icons, click the Choose Icon buttons next to the text fields.

Setting Up the PWA WordPress App - Image 2

The offline page determines the web page that is displayed when a user is offline. When you click on the drop down menu, you will see a list of web pages that you can configure for your offline page.

You can also create a web page specifically for this scenario and have it say something like “You are currently offline. You will not have access to some functions of the application. Leave the remaining settings as they are. You can change them later as you see fit. Click Save Settings at the bottom of the tab when you’re done.

Setting Up the PWA WordPress App - Image 3

That’s it for the General tab. There is another item in the Advanced tab that we are also going to change, although it is optional. Click the Advanced tab and scroll down until you reach the Add to Home Page custom banner.

Setting Up the PWA WordPress App - Image 4

Uncheck “Show custom responsive addition to welcome banner.” The banner is not customizable and the default doesn’t look right so I’d rather have it turned off, but keep it on for desktop. Now click Save Settings to save your changes. And that’s it! You have finished setting up your WordPress site as a PWA. Now we will take a look at the website to make sure it has been set up correctly.

Confirming the PWA Setup

There are two ways to check if your WordPress site is now a PWA. The first is to inspect the website using the developer tools in your desktop browser.

Confirming the PWA Setup - Image 1

Launch the website in your browser and right click on it. Click Inspect Item or Inspect (depending on your browser). Now click on the Console tab. You should see a reference to “PWA” or “Service Worker”. Service Worker is a JavaScript file or script that powers most of the functionality of a progressive web application.

The second way to check if your WordPress site is now a PWA is to start the website on your phone. If you have Android, a pop-up should appear at the bottom of the screen asking you to add the app to your home screen. Once you click on it, a dialog box will appear to confirm your choice. Confirmation adds the app to the phone’s home screen.

For iOS, the process is a bit less straightforward. IOS users are not automatically prompted to “add to splash screen” when starting a PWA site. To install a PWA on an iOS phone, click the Share button at the bottom of the browser after the site loads. Now select Add to Home Screen from the list of options presented to you. You should now see the PWA on your home screen.

Conclusion

Many companies like Uber, Instagram, Twitter, and Forbes are now using PWA. They are great for reaching and attracting many more users than native apps. If this is important to you (as well as other reasons mentioned above), you should definitely turn your WordPress site into a WordPress PWA app.

That was it. Leave me a comment if you have any questions and I will answer them as soon as possible.

+ posts

Similar Posts