Progressive Web App for WordPress module provides users an app-like interface in which they can experience the high-performance benefits of the store either online or offline. There will be push notifications that can be sent to a user via desktop web and mobile web to re-engage on your website.

Admin will be able to configure any site like e-commerce (WooCommerce) or blogging (Simple WordPress) in Progressive Web App (PWA) with this plugin. Users will be able to come to your site by launching the app from their mobile and can interact with your site through an app like interface. Push Notifications can be based on WordPress and WooCommerce like new published blogs, products, sale products, offers, instock reminders, etc.

Note: This Progressive Web App (PWA) plugin is compatible with both WordPress and WooCommerce.

Features of Progressive Web App for WordPress

  • Progressive Web App (PWA) increases the performance of your site.
  • Users will be able to download the PWA app for your store.
  • Your site can be cached at client’s end for offline view.
  • Desktop app is also supported for chrome v76 and above.
  • Analytics report for the PWA installations.
  • Analytics report for the subscribers who have allowed notifications for your site.
  • Admin can enter name, shortname and choose background and theme color for the PWA.
  • Admin can upload the PWA icons from backend.
  • Users can allow/block the notifications for your site.
  • Admin can send push notifications to the users who have allowed the notifications.
  • Unlimited number of notifications and subscribers.
  • Admin can add, edit and delete notifications from the Progressive Web App menu at admin end.
  • Admin can enter title, description, url and choose image for the notification content.
  • All WordPress and WooCommerce themes are supported with the PWA.
  • Multilingual is also supported with the given .pot file in the plugin.

Note: Secure server (https) should be needed in order to use this plugin.

Why choose our plugin?

All our products are meeting the WordPress quality standards including security, quality, performance and modern coding standards. For this, We are also awarded with WP Requirements Compliant Badge by Envato for our CodeCanyon Profile.

Installation of Progressive Web App for WordPress

The customer has to login at the admin end in WordPress and in the menu section, he has to hover his mouse over the Plugins menu which brings out a submenu, then click on the Add New submenu.

Add new plugin

Then he needs to click on the Upload Plugin button to upload the plugin zip file.

Upload new plugin

After clicking Upload Plugin button, you will be able to see the below image. Then click on Choose File button to browse the plugin.

Choose Progressive Web App (PWA) & Push Notifications plugin zip

Then, when you select the Progressive Web App for WordPress plugin zip, your selected zip appears here. Now, finally click on Install Now button to install the plugin.

Install the Progressive Web App (PWA) & Push Notifications plugin zip

After installing the plugin, click on Activate Plugin to activate the Progressive Web App for WordPress plugin.

Activate Progressive Web App (PWA) & Push notifications plugin

Creating Firebase Project Credentials for Push Notifications

In order to use this module for push notifications, you need to have Firebase Project Credentials which you need to enter in the module configuration. In order to create them, kindly visit this link https://console.firebase.google.com/ and follow the below steps.

Step 1:

Click on Create a Project button to create a Firebase Project.

Push Notifications Firebase setup step 1

Now, enter Project name, check on I accept the Firebase terms and click on Continue.

Push Notifications Firebase setup step 2

Then enable Google Analytics for your project and click on Continue.

Push Notifications Firebase setup step 3

Then on last step, check all the boxes and click on Create Project.

Firebase setup step 4

After few seconds, you’ll get a confirmation page when your project is ready to use, then click on Continue.

Firebase setup step 5

Step 2:

After creating your new project click on the Storage.

Firebase setup step 6

Then on click on Get Started button.

Firebase setup step 7

Then click on Next button.

Firebase setup step 8

Step 3:

Then click on Project Overview and click on Add an app to get started button.

Firebase setup step 9

Now, Enter the App nickname, check the Firebase Hosting option and click on Register app button.

Firebase setup step 10

Then click on Next button.

Firebase setup step 11

Now, again click on Next button.

Firebase setup step 12

Then click on Continue to console button.

Firebase setup step 13

Now go to the Project Overview section and click on the App nickname that you just added and then click on settings icon.

Firebase setup step 14
Firebase setup step 15

Step 4:

On General tab, you’ll find your added apps down below in which there is a section of Firebase SDK snippet. In this section, click on Config option to get the Firebase Config.

Firebase setup step 16

Now, go to the Cloud Messaging tab, here you’ll find server key which is going to be used as Google Authorization Key in the module and the Sender ID which will be GCM Sender ID.

Firebase setup step 17

Copy Firebase Config, Server Key and Server ID, these will be used in the module configuration.

Admin End – Progressive Web App for WordPress

Now click on Configuration to visit the configuration page of the plugin or you can also hovers on Progressive Web App admin menu, he/she is able to see 2 submenus i.e. Notifications and Configuration. Click on the Configuration to visit the configuration page.

Configuration click below Progressive Web App plugin listing in plugins page
Configuration Hover

Then, Admin can see the configuration page.

Progressive Web App (PWA) & Push Notifications configuration page

Activate License

Here, You need to enter the purchase code to activate your license in order to use this plugin.

Google Authorization Key:

This is the server key from the firebase which will be used in sending push notifications.

GCM Sender ID:

This is the Sender ID from the firebase which will be used in sending push notifications.

Name:

Admin can set the name of the app from here.

Short Name:

Here, Admin can set the short name of the app from here.

Theme Color:

Admin can select the theme color for the app from here.

Background Color:

Admin can select the background color for the app from here.

App Icons:

Here, Admin need to upload the icons for the app in the respective image sizes.

Push Notifications – Progressive Web App for WordPress

Here, admin can see the list of added notifications from where he can perform some operations i.e. search or edit any previously added notifications, delete any notification or send notification to the users.

Push Notifications List from Progressive Web App (PWA) menu

Add Notification

Admin can add new notifications from this page.

Add new push notification from Progressive Web App (PWA) notification menu

Title:

Title will be displayed in the push notification to the users.

Description:

Description will be displayed in the push notification to the users.

Image:

Admin need to upload or can select previously uploaded image which will be displayed in the push notification to the users.

URL:

Admin need to enter the URL for which users gets redirected when they click on the push notifications.

Status:

This is the status of the notification which can be either Enabled or Disabled.

Analytics – Progressive Web App for WordPress

Here, Admin can see the analytics reports for the PWA installations and the subscribers which have allowed notifications on your site. Admin can see the recent 15 days data in the report.

Progressive Web App Analytics

Customer’s End – Progressive Web App for WordPress

Progressive Web Desktop App:

Customers can visit your site and able to download the app from this + icon as shown in the below image. Then, the app is added in customer’s desktop and he/she able to use your site with the app.

Progressive Web App (PWA) Desktop  app

Progressive Web Mobile App:

When customer visits your site in the mobile browser, he/she will see the popup to add the PWA to your Home screen option from which he’s able to add the PWA and use the app interface for your site. Steps are mentioned in the below images.

Progressive Web App (PWA) mobile step 1
Progressive Web App (PWA) mobile step 2

After adding the app, users will see the app in their mobile home screen as shown in below image through which they can access your site.

Progressive Web App (PWA) mobile step 3

Push Notifications:

When Admin sends any notification from backend, users who have allowed notifications will receive the notifications on their mobile phone as well as desktop.

Progressive Web App (PWA) mobile push notifications

After clicking the notification, app will get open with the URL set in the notification by Admin.

Progressive Web App (PWA) opened by push notifications

Multilingual – Progressive Web App for WordPress

Admin can use .pot file which is provided within the plugin in the languages folder from which they can translate the plugin.

Support

If you have any questions/queries with the plugin or need any special customizing, please contact us at [email protected]. We will do our best to answer as quickly as possible.


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *