Prestashop Advanced Progressive Web App

Prestashop Advanced Progressive Web App – A Progressive Web App (PWA) uses modern web capabilities to deliver an app-like experience to users.

Web apps are actually websites that, in many ways, look and feel like native applications.

Mobile applications with push notifications achieve up to three times more retention than their counterparts. With push notification, a user is three times more likely to reopen a mobile application than a website.

In addition, a well-designed mobile application consumes fewer data and is much faster because some resources reside on the device.

The Progressive Web Application is fast in comparison to the website and supports push notifications.

With the use of this feature, the website works faster on a slower internet connection. Due to the faster performance, the user engagement increases on the website and results in a very high conversion rate.

Note:

Grab our Prestashop PWA module for an unparalleled user experience.

• User-friendly experience for your customers.
• Supports push notification service.
• Slow internet speed will not affect its potential.
• Once a page is opened then you can open the same page even on offline mode.
• Increases user-engagement thereby increasing the conversion rate.

• You need to enable SSL on your shop
• Compatible Browsers – Chrome, Firefox, Opera(latest version)
• Module is compatible with PrestaShop version 8.x.x.
• Module is also MultiShop compatible

• Now Admin can create five types of push notification:
  • Manual Push Notification- Now admin can schedule the push notification.
  • Product Notification- Admin can send the product notification from the product edit page.
  • Order Status Notification- Send the order status notification to customer on changing the order status.
  • Welcome Notification- Admin can send the welcome notification to the users if allowed by the users.
  • Cart Reminder Notification- Admin can set the cart reminder notification with a specific number of days.
• Admin can manage the subscribers from the “Manage Subscribers” tab.
• Track the live status of notifications while sending them to customers.
• Admin can view/delete the list of notification history from “Manage Notification History” tab.
• Max. character limit for the short name of the app is 12.
• The PWA feature is now compatible with iOS. However, iOS doesn’t support push notifications in PWA in iOS.
• Connectivity status(i.e offline/online) of app will display at the end of screen of mobile.
• Now, product URL automatically attaches with product push notification.

• Admin can set the application name as it will display when one opens the app on mobile phones.
• An admin can set the application’s short name as it will display on home screen.
• Admin can enter the splash screen background colour.
• Admin can upload the app icon.
• An admin can upload the push notification icon.
• Admin can create push notifications.
• Admin can edit/delete/send push notifications.
• An admin can attach a target URL when a user clicks on push notification.
• Admin can attach a separate notification icon for each push notification.
• Admin can send the push notifications in multi-language.
• Send Product notification for existing products in intervals.

• Firstly, go to the module manager in the back office and click on ‘upload a module’.
• After that, drag and drop the module file or select the file from the system.
• In this way, the module installation will be successful.

A user can select ‘Add to home screen’ option to add the progressive web application to the home screen available at the footer of the web page.

Once added to the home screen, you can see the PWA on your phone home screen with the selected icon, favicon, and splash screen colour.

The configuration settings contain three sections.

• Progressive Web App Configuration
• Push Notification Configuration
• General Configuration

Progressive Web App Configuration

In this section of the configuration, an admin can do the following things.

• Set the application name as it will display when app opens on mobile phones.
• Set the application’s short name to display on app home screen.
• Select the splash screen background colour.
• Upload the app icon.
• Upload the push notification icon.

Let’s show you what are these actually when opened on a mobile. Moreover, a user can also see the application icon on the home screen of the mobile like this. Also, a user can click on the application to launch it.

After clicking on the application, the application launches with a splash screen. The splash screen shows the application name and icon.

The application launches in the same way as the native app. Also, the app icon displays on the splash screen on iOS mobile devices.

However, the background colour & app name doesn’t display on the splash screen of iOS devices.

After the splash screen, a user can see the home screen of the application. From here a user can explore your website. Push Notification Configuration

Push Notification Configuration

In this section of the configuration, an admin has to enter the sender’s key, server key, application public server key and application private server key in order to activate the push notification system.

Note: Server key is required only for backward compatibility. If you don’t have server key, then please fill public server key.

In the next section of this Blog, we shall explain how to obtain the Credentials for Push Notification Configuration.

In order to use this module, you need to have Firebase Project Credentials. Please visit this link and create a new project with your Gmail Account.

After opening Firebase website, click on “Get started with a Firebase project”.

Now, enter the project name and click on continue button.

Enable Google Analytics for the project and then click on continue button.

Now, choose Google Analytics account and click on ‘Create project’ button.

Click on the project settings tab under ‘Settings”.

Under Cloud Messaging, the admin can view the sender ID. Click on ‘Generate key button’ to generate Application server public key and private key.

On clicking ‘Generate key pair’ button, application server public key appears on the page.

Click on the button under ‘Actions’ for application server key.

Under General Configuration, admin can:

• Select notification types for which he wants to manage notification history.
• Enable/Disable the display of custom notification permission prompt on desktop/mobile device.
• Set the time duration after which custom prompt notification will again display on desktop once canceled by customer.
• Enable/Disable the display of app install button and select the position where he wants to display the button.
• Enable/Disable the option, whether to add products to the cart when a cart notification is click by a user.
• Set whether the existing cart will get updated with new products or not, when products are added to the cart on the click of cart notification.

Whenever the admin sends the push notifications to the customers, a record of it creates in the back office under the “Manage Notification History” tab.

Admin can view the number of times the push notifications are clicked. When this number reaches the target specified by admin in “Push Notification Impressions Target” field, the badge under clicked column automatically turns green. This means the impression target has been achieved.

Let’s understand this with the help of an example. Suppose admin has send the push notifications to 100 customers and set the target as 70%. Now, if 70 out of 100 customers clicked on the push notification then then target get meet and the badge will turn from red to green.

Custom notification permission prompt will display on the website before the native permission prompt as enabled by the admin from the back office.

If a custom clicks on “ALLOW” button, then a native permission prompt will appear on the screen as show below:

If a customer clicks on the “NO THANKS” button, then the custom notification permission prompt will display again on the screen after the time set by the admin.

Also note, that iOS does not support push notifications. Hence, iOS will also not support the custom notification prompt.

The pop up will not appear on iOS devices. However, the user can use the more button (middle one at the bottom of safari browser) on iOS devices to use the “add to home screen” feature.

Display of install app button

App install button will be displayed on the positions selected by the admin while configuring the general settings.

When a user clicks on the “INSTALL APP” button or the banner, a popup appears on the screen from where he can install the app.

Note: iOS does not support the ‘Install App” functionality.

This module provides a striking feature to your website by enabling the Push Notification Mechanism.

After the installation of the module, new tabs add to the Prestashop Backoffice.

There are five types of push notifications in the “Manage Push Notification” tab.

• Manual Push Notification
• Product Notification
• Order Status Notification
• Welcome Notification
• Cart Reminder Notification

Manual Push Notification- In this tab admin can add push notifications manually.

Additionally, the live status of notifications i.e delivered or expired also displays over the list of manual notifications.

Admin will have a panel where he will be able to add new push notifications.  Admin will specify the Push Notification title, Body, Target URL and the Notification icon.

Product Notification- In this tab, an admin can add product notification.

Admin can choose existing products to send Product notifications for. If the interval is set to 0, it will send the product notification for all the selected products in real time. If a time interval is set, then the notifications will be sent accordingly.

In order to send product push notifications, go to catalog–>products–> edit page of any particular product.

Order Status Notification- In this tab admin can add order status notification. Also, the admin can choose to add different push notifications for different order statuses.

Moreover, if the admin changes the order status, then the push notification will go to the customer.

Welcome Notification- In this tab admin can add a welcome notification.

Click on the “Cart Reminder Notification” tab and from here admin can add cart reminder notifications.

If the Customer lefts any product in the cart, then the cart reminder notification will be sent in the set number of days.

Further, click on “Subscribers” to manage the subscribers.

Under “Notification History”, admin can see the history of all notifications.

Once an admin triggers the push notification, the user will receive the push notification on the phone.

Now, notification to show whether the app is online or offline also displays in the footer of the web page.

So, this was all about the PrestaShop Advanced Progressive Web App Module. I hope this document will help you in checking the functionality of the module in a better way.

Also, do let us know about your views in the comments.

In case, if you are also looking for a module with similar functionality for your marketplace, then do check out the blog.

For any kind of technical assistance or query, please raise a ticket at http://webkul.uvdesk.com or send us a mail at [email protected]

Also, please explore our vast range of featureful PrestaShop Addons.