How to Add PWA Feature to Your WordPress Site?

Web designing is an ever-changing area that evolves based on the latest technology and trends. PWA or Progressive Web App is the latest technology that helps you to combine the features of a desktop site with a mobile app. It eliminates the need of having a separate mobile application and offers all features that is available to a mobile app to a desktop website. Therefore, it is a good option for WordPress site owners to offer this feature to your readers. If you are interested, here is how you can add PWA feature to your WordPress site.

Trends in Website Building

Here is how the website building technology evolved over the period during last decade.

• Earlier days, people used to have static desktop websites that fit only on the desktop browsers.
• Later when smartphones were at their initial stages, many site owners used to have a separate mobile version for their site.
• Then responsive websites became popular eliminating the need of having separate mobile version and helped to save huge cost.
• Again, iOS and Android mobile apps became popular due to the large audience reach through mobile App Stores. However, app development is costlier than having a separate mobile version and hence not many site owners prefer to have apps for their site.
• Finally, thanks to Google, now we have Progressive Web Apps that helps desktop sites to have a mobile app feature.

What is PWA?

In our earlier article, we have explained how to install YouTube app in Windows and Mac from the website as Google does not offer desktop app. You can use the same Progressive Web Apps feature in WordPress and allow your users to install the site as an app.

• On desktop – the site will show a prompt in browser’s address bar and users can click on it to install the app.
• On mobiles – users can add the site to their home screen and access the site like other installed apps.

PWA has many advantages over accessing the website from the browser:

• It works like an app, and you can push notifications directly to user’s device.
• Site can be accessed without opening the browser (though it needs a browser).
• User can pin the app to taskbar or Start menu in Windows, add to dock in Mac and keep the app icon on home screen in iOS/Android devices.
• All visited webpages are available locally on the device making it possible to access even without internet.
• The app will open super-fast compared to your normal website which will be useful especially on smartphones.

If you are not convinced, read on further to check the PWA in action.

Add PWA Feature in WordPress

What you need is to install PWA plugin from Google and configure one simple setting to convert your WordPress site to a PWA app. This is a free plugin and available for any WordPress site. Remember, you should have HTTPS connection to add PWA to your WordPress site. Since free SSL is available for all WordPress users through Let’s Encrypt, we assume this should not be a problem for most users.

In addition, your server should support generating web manifest and service workers for your site. You can checkout the complete details of PWA in official Google documentation.

Install and Setup PWA Plugin

Login to your WordPress admin dashboard to install and activate the PWA plugin on your site.

After activating the plugin, go to “Settings > Reading” section, enable “Offline browsing” option and save your changes. This will help to cache the visited pages in browser for offline and the users can open the app to visit the pages without internet connection.

That’s all and there are no other settings available with the plugin.

Install Your Site in Desktop

Now that you have added PWA feature to your website, simply open a new tab in your browser and open your website. We use Google Chrome in this example, make sure to use a browser that supports PWA feature. You will see a small notification that will flash with “Install” and then show an icon in right end of the browser’s address bar. Note the icon shape may change depending on the browser you use.

Click on that app to see a small pop-up as shown below and click “Install” button.

This will add the app to your browser’s folder (under “Chrome Apps” for Google Chrome in Mac) and launch your site in app mode. The plugin will use the site icon of your site as app icon.

You will see the PWA app like below which will look similar to any other installed app on your computer.

You can add the app shortcut to your desktop, taskbar or dock for quick access. In Chrome, you can access the app by going to “chrome://apps” section. You can anytime uninstall the app by clicking on the three dots icon on the top right corner of the app and selecting “Uninstall …” option.

Installing PWA App in Android and iOS

You can use the same method as explained above to install PWA app in Chrome Android. This will add an app icon on the home screen which you can tap and access like any other app. If you do not want to keep the installed app, simply delete the app to remove it from your phone.

Unfortunately, most browsers on iOS including Chrome and Safari do not support directly installing PWA. This is a similar issue with Apple as it does not support push notifications in Safari in iOS. What you can do is to use the “Add to Home Screen” (A2HS) feature to add the bookmark on the home screen like an app. It works similar to PWA app as A2HS is considered as part of PWA technology.

Other Plugins

If you really wanted to make use of PWA feature, then the free PWA plugin may not be sufficient. You can try the premium version of Super Progressive Web Apps plugin which has the following feature.

• All you to setup the default page that opens when user launches the app.
• Show a call to action pop-up asking users to install the site as an app.
• Customize the appearance, home page and offline page.
• You can also convert your site into a real Android app and publish in Google Play Store.

If you are using AMP version, then you can try PWA for WP & AMP plugin. The premium version of this plugin offers similar features like Super PWA plugin.

Final Words

Adding PWA to your WordPress site is an option to attract mobile users when you have no time and money to maintain separate mobile apps. It has many advantages like no additional cost and easy to retain users by sending push notifications with popular plugins like OneSignal. Though, it does not work on iOS devices we hope the support will be soon included.