Do you want to setup Progressive Web Apps on your WordPress website? Progressive Web Apps (PWA) are the modern websites that have the same user experience of native mobile app. In this article, we will show you how to set up PWA in WordPress.

What is PWA?

PWA stands for Progressive Web Apps. It’s an enhancement of existing web technology that supports upon the modern web browsers. PWA installed websites load more faster than the normal, as they are working mainly via the service workers and web app manifest. Popular websites like Flipkart, Twitter, Telegram..etc launched their Progressive Web Apps and increased their traffic by 50-60% and offer better user experience via fast loading.

Advantages of PWA
  • The ability to use the website even when offline
  • SSL provides high security on all
  • App Like Performance
  • Fast loading
  • No app store submission needed
  • Can easily send notifications to users
  • Push Notification

Requirements before setup of PWA

  1. Your WordPress website should be HTTPS secured.  ie; green padlock displays at Address bar (Originate from a secure connection)
  2. Website should be responsive (ie; website should work perfectly on mobile, tablet and desktop)

Setting up Progressive Web Apps or PWA in WordPress

When we searched on WordPress for the best plugin for Progressive Web Apps, that have good reviews and top support we find out a plugin called Super Progressive Web Apps.  We tried it and found its the best one for converting a WordPress website into PWA with a good user Interface, Multi site support, Push notifications and easy to setup.

Super Progressive Web Apps SuperPWA WordPress Plugin

Plugin Installation Steps

  • First thing you need to do is install and activate the Super Progressive Web Apps plugin. (For that you can Click “Plugins” on your dashboard. Click “Add New” button and then search for “Super Progressive Web Apps”.
  • From the search results you can see the plugin with name as first. Click “Install” and ‘Activate’ it.

Plugin Activation Steps

  • Upon activation, you can head over to Settings » SuperPWA page to set the settings for your website’s PWA.
Super Progressive Web Apps (SuperPWA) WordPress Plugin Settings Page

Super Progressive Web Apps (SuperPWA) WordPress Plugin Settings Page

Within the settings page, the plugin allows you to edit the details on App name, Short Name, Splash Screen Icon, Start URL and also helps to select the Offline page from the drop down. On the design tab, you can choose the background color of Splash Screen. You can also upload a logo of size 192px *192px and 512*512px for your Icon and Splash screen when PWA gets installed on phone.

  • Application Name : Name of the application to mentioned when the Add to Home Screen comes
  • Start URL : The page which loads when the user open the PWA
  • Offline Page : The page which loads when the device is offline and the page is not cached earlier

However, you need to make sure to validate your PWA via the Lighthouse addon. We see a 100/100 performance by using the plugin.

We hope this article, helped you to learn how to set up Progressive Web App (PWA) on WordPress. You may also want to see our list of 9 Essential Plugins For Any WordPress Website.

8 Comments

  1. Sweep Cricket-Reply
    May 1, 2018 at 8:26 pm

    this is not a good plugin, we used it but it require SSL Certificate

    • Zero Bulb-Reply
      May 1, 2018 at 8:56 pm

      FYI, for supporting any Progressive Web Apps the website should be served fully via https:// We are using it for about one year and its the best one that we tried and the support is really awesome!

  2. Jean-Reply
    May 8, 2018 at 10:12 pm

    Does this plugin offer a loyalty program feature? Thanks!

    • Zero Bulb-Reply
      May 12, 2018 at 11:21 am

      I’m not sure on it! Can you contact the SuperPWA developers via their website?

  3. Sean-Reply
    May 9, 2018 at 5:41 am

    SSL certificates are free now. There’s no reason your site doesn’t have one. That doesn’t make this plugin bad, that makes your site not up to spec.

  4. Gloria Barr-Reply
    February 23, 2019 at 1:46 am

    I agree with Sean…don’t blame the app maker.

  5. Alice Auura-Reply
    May 29, 2019 at 11:14 pm

    Hey, very cool post to setup PWAs!! I am happy to find a lot of useful information here in the post, we need to develop more techniques in this regard, thanks for sharing it

  6. Norine-Reply
    September 18, 2019 at 8:19 am

    this website

Leave A Comment

Contact us