Live Demo Buy Now

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 they 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 without push, and a user is three times more likely to reopen a mobile application than a website. In addition, a well-designed mobile application consumes less data and is much faster because some resources reside on the device.

The Progressive Web Application is fast in compared to the website and supports push notification.

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.

Grab our PWA for Prestashop for an overall intimate user experience.

Module Highlights!

  • User-Friendly Experience for your Customers.
  • Supports Push Notification Service.
  • Slow Internet Speed will not affect its potential.
  • Once a page is opened then the same page can be opened even on offline mode.
  • Increases User engagement thereby Increasing the conversion rate.

Note

  • You need to enable SSL on your shop
  • Compatible Browsers – Chrome, Firefox, Opera(latest version)

New Features

1. Now Admin can create five types of push notification:

i. Manual Push Notification- Now admin can schedule the push notification.

ii. Product Notification- Admin can send the product notification from product edit page.

iii.Order Status Notification- Order status notification will be sent if the status of the order will be changed by the admin.

iv.Welcome Notification- Admin can send the welcome notification to the users if allowed by the users.

v. Cart Reminder Notification- Admin can set the cart reminder notification with a specific number of days.

2. Admin can manage the subscribers from “Manage Subscribers” tab.

3. Admin can view/delete the list of notification history from “Manage Notification History” tab.

Module Features

  • Admin can set the Application name as it will be displayed when App is opened on Mobile phones.
  • Admin can set the Application’s Short name as it will be displayed on App Home Screen.
  • Admin can enter the Splash Screen Background Colour.
  • Admin can upload the App Icon.
  • Admin can upload the Push Notification Icon.
  • Admin can create Push Notifications.
  • Admin can Edit/Delete/Send Push Notifications.
  • Admin can attach a Target URL when a user clicks on Push Notification received.
  • Admin can attach a separate Notification icon for each Push Notification.

Installation

  1. Go to back office ->module
  2. Upload the module zip file
  3. Search “Advanced Progressive Web App” in module search box then go to the module and click on install.
  4. Module Installed Successfully!

How to Set up the Progressive Web Application

All that your customer needs to do is open your Prestashop site on their mobile device. Here we have shown the working on chrome. From here customer can click on menu icon of chrome to add the application on the home screen.

 

From the chrome menu, a user can select ‘Add to home screen’ option to add the progressive web application to the home screen.

 

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

 

 

Configuration

Configuration is divided into two blocks :

  • Progressive Web App Configuration
  • Push Notification Configuration

We shall check each block in complete details

Progressive Web App Configuration

In this section of the Configuration  :

  • Admin can set the Application name as it will be displayed when App is opened on Mobile phones.
  • Admin can set the Application’s Short name as it will be displayed on App Home Screen.
  • Admin can enter the Splash Screen Background Colour.
  • Admin can upload the App Icon.
  • Admin can upload the Push Notification Icon.


Let’s Show You what are these actually when opened on a Mobile. Now the user can see the application icon on the home screen of the mobile like this. 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.

 

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

Push Notification Configuration

In This Section of the Configuration Admin has to enter Sender’s Key, Server Key, Application public server key and Application private server key in order to activate the Push Notification System.

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

How To Obtain Push Notification Credentials

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.

  • After opening Firebase website, please click CREATE NEW PROJECT button as shown in the above screenshot.
  • A small pop-up window will appear with the name of Create a project, here you have to enter your Project Name and then select your Country/Region.
  • Click CREATE PROJECT button.

After creating your new project click Settings menu icon and select Project Settings option. A new Settings page will be opened.

After entering the Settings page, click CLOUD MESSAGING tab, here you will find your Project Credentials, copy and save your credentials as displayed below.

Use these credentials in the Module Configuration to enable Push Notification service.

Push Notification Management

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

New tabs are added to Prestashop Backoffice.

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

1.Manual Push Notification

2.Product Notification

3.Order Status Notification

4.Welcome Notification

5.Cart Reminder Notification

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


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

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

Product push notification can be sent from Catalog–>Products–>Go to edit page of any particular product.

Order Status Notification- In this tab admin can add order status notification.

If order status is changed by admin then push notification will go the customer.

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

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

If Customer left any product in the cart then cart reminder notification will be sent in set days.

Click on “Manage subscriber” where admin can manage the subscribers.

Click on “Manage notification History” where admin can see the history of all notifications.

Push Notification on APP

Once a Push Notification has been triggered by the Admin, User will receive the Push Notification on Phone.

 

Thank you for reading this Blog 🙂

We hope this Addon will enhance the functionality of your prestashop store.

Support

For any kind of technical assistance, just raise a ticket at : http://webkul.uvdesk.com/ and for any doubt contact us at support@webkul.com

 

Current Product Version - 6.0.1

Supported Framework Version - 1.7.x.x

. . .

Comment

Add Your Comment

Be the first to comment.

css.php

Index