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 !

  • Your Prestashop Website becomes fast to use.
  • 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)

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 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 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 homescreen, you can see the PWA on your phone homescreen 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 and 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 Server Key and Sender ID as displayed below.

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

Push Notification Management

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

A new tab gets added to Prestashop Backoffice.


Click on Manage Push Notification tab and from here admin can add push notifications.


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.

Admin can view all the Push Notifications added in a list view.  From here admin can  edit, delete or send Push 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 - 5.0.0

. . .

Comment

Add Your Comment

Be the first to comment.

css.php

Index