Menu Close
    Hire us Request quote Reading list Switch to dark mode

    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 Prestashop PWA module for an unparalleled 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. Track live status of notifications while sending them to customers.

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

    5. Max. character limit for the short name of the app is 12.

    6. The module is now compatible with IOS. however, Push notification is not supported by PWA in IOS.

    7. Connectivity status(i.e offline/online) of app is now displayed at the end of screen of mobile.

    8. Now, product URL is automatically attached with product push notification.

    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 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

    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 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

    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

    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.

    Additionally, the live status of notifications i.e delivered or expired is also displayed over list of manual 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.

    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.

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

    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.1.0

    Supported Framework Version - 1.7.x.x

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just received your message and our expert will get back to you shortly.
    Send Again
    Close

    Table of Content

    Hide Index