Menu Close
    Searching for an experienced Prestashop Development Company ?

    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.

    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 you can open the same page 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

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

    Features of the Prestashop Advanced Progressive Web App module

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

    How to install the Prestashop Advanced Progressive Web App module

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

    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.

    add to home screen

    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.

    4

    How to configure the Prestashop Advanced Progressive Web App module

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

    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.

    6

    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.

    7

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

    General Configuration

    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.
    general configuration

    Push Notification Impressions Target

    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.

    notification history

    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

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

    custom notification prompt

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

    permission prompt

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

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

    Display of app install button

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

    install app button

    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.

    install app prompt

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

    How to obtain push notification credentials

    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, 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.
    8

    After creating your new project, click the settings menu icon and select the Project Settings option. A new settings page will open.

    9

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

    10

    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 the Push Notification Mechanism.

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

    new tabs at dashboard

    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.

    manage push notifications

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

    live status of push notifcation

    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.

    add new push notification

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

    manage product notification

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

    15
    16

    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.

    manage order status notification
    create new order status notification

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

    18
    19

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

    manage welcome notification
    21

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

    manage cart reminder notification

    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 “Manage subscriber” to manage the subscribers.

    23
    24

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

    25
    25

    Push Notification on APP

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

    26

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

    notification for internet connection
    27

    So, this was all about the PrestaShop Product Auction 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.

    Support

    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.

    Current Product Version - 6.3.0

    Supported Framework Version - 1.7.x.x

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    4 comments

  • Romo
    Hi. If I purchase and of course install several modules in the Prestashop marketplace such as Membership, Store Locator, Seller Wise Check-Out, Bankwire, etc all of these features will appear in this PWA version in addition to the Push Notification function? Or are there some features that will loose?
    • prerna (Moderator)
      Hi,

      Hope you are doing good.

      Regarding this query, we have already replied to you on your ticket. Kindly check our response there and get back to us on the same.

      Regards.

  • flashmotus
    hi, i am looking for a module to implement pwa in prestashop 1.7.6. I have read reviews on your ecommerce but I would like to check these features on a production site. can you tell me? thank you
    • amit kushwaha (Moderator)
      Hello,
      Greetings from Webkul!
      Thank you for showing interest in our module.
      You can check the complete module feature from our Live demo link.

      Please go through the live demo once and if you will have any query then, please raise a ticket at our support ticket system https://webkul.com/ticket/ or you can mail us at [email protected].

      Thanks & Regards,
      Amit

  • Back to Top

    Table of Content

    Hide Index