Simple PWA For WordPress

The WordPress PWA is meant to convert the website into a reliable and faster application. PWA is the best solution to enhance user experience. Henceforth it gives a native app-like feel to the app users.

The user will easily convert the app to PWA by Adding it to the Home screen. This option will add the application to the home screen. Thus, allowing the access of the site via an application only.

However, besides the e-commerce benefits, the application is valuable for the Blog Website. This is due to its additional support for WordPress. Wherein now the app user can read the blogs of WordPress using the PWA.

This is a scalable solution for the website owner. Thus, gives higher performance benefits and attracts maximum customers.

Note:- The plugin is compatible with WooCommerce v4.0.1.

Checkout the PWA app experience at the mobile end and the configurations as well –

The creation of PWA can add great advantages to the eCommerce website and blogging website users. It helps in enhancing user engagement, improvising the conversion rate and make the checkout process more faster.

• Advantage of Being on Homescreen– The PWA takes in the upper hand of being on the home screen. Thus allowing much easier accessibility.
• User Engagement- This application is attractive enough for the user as they are a faster and reliable source. However, in addition, they have an extra dynamic feature of web push notification to make it more user-friendly.
• The network is not an issue– Now, PWA has service workers which allows them to initiate the application in less data also.

With the advent of technology, the PWA application is getting higher recognization. The major example of this advancement is AliExpress.

So, as per the statistics shared Google Developers–

• 104% for new users across all browsers; 82% increase in iOS conversion rate
• 2X more pages visited per session per user across all browsers
• 74% increase in time spent per session across all browsers.

Thus, the PWA can act as a boon to any business structure with it powerful features.

• Much more user-friendly solution.
• Works on low internet connectivity.
• It just looks like a native app.
• The theme of the application can be set from the backend by the admin.
• The application name and icon could even be altered from the admin end.
• Incrementation of store sales with user engaging features.
• Supports Multi-store, multi-currency and multi-lingual.
• Compatible with all the WordPress theme but the theme needs to be responsive.
• The app is useful for both product sales as well as blogging website.
• The module provides notification features for admin to share information with the customer.
• All the WordPress Themes are compatible with the module.

Note- However, you can even check the headless solution of PWA- Progressive Web App (PWA) for WooCommerce.

Steps

1: Login to WordPress Admin Panel and navigate through ‘Plugins->AddNew‘.

2: Now, click on the ‘Upload Plugin‘ button on the top of your page to upload the zip file.

3: Now, tap the ‘Choose File‘ button to browse for the zip file.

4: After selecting the zip file, tap the ‘Install Now‘ button to install the plugin.

5: After successful installation, a success message is visible along with an option to ‘activate‘ the plugin. So, tap on ‘Activate Plugin‘ to activate the installed plugin.

In order to use this module, you need to have Firebase Project Credentials, which will be used in the module configuration. Please visit this link and create a new project with your Gmail account.

1.  After opening the Firebase website, please click on the Add Project button.

2. A new page will open the as shown below image, here you have to enter your Project Name. Then click on the “Continue” button.

3. Now enable google analytics for this project and click on the “ Continue” button.

4. Now you need to configure the Google Analytics. Here you need to select your Analytics location/Country. Then click on the “Create project” button. 

4. After creating your new project click on the Storage and create a new bucket. You can also find the default bucket here.

After creating bucket now go to, Settings menu icon and select Project Settings option. Please view the below-attached screenshot. A new Settings page will be opened.

5. In the General tab find the project ID, web API key, etc. under the setting page.

Now click on the button as shown in the image below. This will be used to add the firebase to the web app.

Now, after clicking on the button above Register the app by entering the app nickname and click on register app –

1st Step – 

2nd Step-

3rd Step-

4th Step-

5th Step-

Now, click the CLOUD MESSAGING tab, here you will find your Project Credentials, copy and save your Server Key (Google Authorization Key)as displayed below.

The credentials retrieved will be used to configure the basic settings at the admin end.

Post successful installation of the module the admin can easily navigate WP PWA. Here, the admin has two-section- Primary and General.

Primary

This section will contain the basic data of the application. It majorly covers the theme, name, and icon details.

• Name- Here, the admin will mention the application that is for recognition.
• Short name- The application name that will be displayed in case the user creates a shortcut.
• Theme Color- The color of the application as per the requirement.
• Background Color- Here, the admin can set the app background color.
• App Icon- The admin can add the icon of the application that is meant for recognization. These icons must be added in different sizes formate.

General

This section will allow the admin to set the general configuration of the PWA. Wherein the admin can define the integration of the website with PWA.

Google-based details-

• Authorization Key– This key will authenticate the server end for the Push Notification.
• API Key- This key will integrate the website with the PWA.
• Auth Domain- The admin authentication domain detail for the push notification.
• Database Url- The database URL details which will contain web push notifications.
• Project Id- This will contain the project identification number. This project creates in the firebase for the notification.
• Storage Bucket- It is the storage bucket for push notification.
• GCM Sender ID- It is the help authentication, allowing to share web push notification.
• Google App id- The identification number of Google account.

The introduction of the notification is PWA will make it more powerful. These web push notifications will allow the targeting of the customer.

Hence, for this, the admin needs to navigate through WP PWA > Notifications.

Here, the admin will find a list of notifications which the admin can Push to populate. A bulk push could also be done.

However, additionally, the admin will add new notification as per requirement or edit the existing one.

Thus, the admin will fill-in following field-

• Image- The need to upload the image of the push notification.
• Title- The admin will mention the name of the push notification which will refer to it.
• Content- The addition of the information relating to the notification will be part of this section.
• Type– Here the admin will specify the relation of the notification.
• Product/Category/Link- The admin will select the category or product specifically with which the notification is in relation with.

Additionally, the admin if selects type as custom. This will change the field to Link, now allowing the admin to add in any sort of URL.

Here the URL could be of a product page, category page or any blogging (static) page.

• Status- The admin needs to set the status of the notification as enable.

The customer can operate the application in their mobile apps by adding it to the home screen.

For Android Devices

For this, the user can open the website- https://pwa-wc.webkul.com/wp-pwa-for-website/ on a browser. From the web browser, the customer will get the option of Add To Homescreen.

The customer can click on the option to integrate the app to the home screen.

Thus, this will add the application to the home screen of the device.

Once the application is added the customer can use it as a regular native application with website structure.

For IOS Devices

For customers to be able to operate mobile app for this website they need to open this link- https://pwa-wc.webkul.com/wp-pwa-for-website/ on their browser once it is opened it will be visible like this. 

Now customers will have to navigate to Add to Home Screen on their browser settings. Once they click on this button, it will ask for Name of the app where you will have to provide the name. 

 

After following above instruction it will be added on the home screen and will be visible like this. 

Finally the app is installed in IOS Devices and customer can use the native application with the website structure. 

The customer could navigate to the collection page to find the Blog listing as shown in the image below.

The customer can choose to view any of the blogs from the given list as shown in the image below.

So, here the customer can even view the complete product in the application.

Blogging section

The website owner can add in static blog section which will contain the informative details about store likewise- Success stories, the technology behind the website, history of the business and many more.

The user can read the information in these sections to remain aware.

In our PWA the customer can navigate through Menu > Know More About-PWA.

The customer can click on the blog to read the details and acquire the knowledge via PWA.

Notification

Whenever the admin pushes the notification from the backend it is visible to the customer on the front end.

Hence, it will allow the generation of sales from the customers who are not active.

However, the customer can receive notification for the blogs.

On clicking the notification the customer will redirect to the URL linked.

Support

That’s all for the module, for any question/query, please raise a Ticket at our HelpDesk system. We are always happy to help you out. You can also get back to us via mail [email protected].