Prestashop Advanced Progressive Web Application – 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 lightning 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 lightning 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
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
- Go to back office ->module
- Upload the module zip file
- Search “Advanced Progressive Web Application” in module search box then go to module and click on install.
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.
Configuration
Configuration is divided into two blocks :
- Progressive Web App Configuration
- Push Notification Configuration
We shall check each block in complete details
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.
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.
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
