Read More
Read More
Menu Close

    CS-Cart Progressive Web Application (PWA)

    Progressive Web Application (PWA) is the next big thing and one of the most talked about technology shifts in the web development which bring mobile-app-like experiences to your users without requiring them to install an app from the app store/ play store.

    Since the majority of online shopping traffic comes from mobile, these characteristics make PWAs the perfect solution for retailers trying to drive engagement and revenue.

    So we have launched a PWA add-on for your CS-Cart stores. With which you can allow the users to add your site to home-screen from the mobile browser.

    After adding, it acts and feels like an application. This way just by installing and configuring the addon, store admin can launch Progressive Web Application with the support of push notifications.

    Check a brief overview of the mobile end workflow of the PWA – 

    Start your headless eCommerce
    now.
    Read More
    uvTI7qWPFiU

    Check a brief overview of the backend configuration – 

    2RBNtXQaHos

    Importance of Progressive Web Application:

    Responsive Web and Native Apps Aren’t Enough. It is a myth that the users will happily download the app for every website they visit frequently.

    Many retailers assume that responsive web design is the best way to optimize their website for mobile. But in reality, using responsive on its own simply reflows content from one device to another. It ignores the expectations of today’s mobile customer for fast speeds, app-like experiences, and the latest features available on their device.

    When responsive doesn’t produce the desired conversion rates, retailers often turn to native apps. While the app experience usually drives higher conversions, native apps are very expensive to build and maintain, and only reach a small audience. 

     It does not mean that a native application is bad but there are few merits of the progressive web application in comparison to native applications. If you are running a business then you should reach all type of users.

    If you are using a well – designed native application like Mobikul then it will surely give you a high performance and consume low data but to reach all types of customers you should definitely go for Progressive Web Application.

    In a nutshell, we can brief the benefits of PWA as mentioned below-

    • The website becomes lightning fast.
    • A user-friendly app experience.
    • In addition it supports push notification.
    • No need to download/install.
    • Moreover works fast even on a slow connection.
    • Increases User engagement.
    • Also Increase conversion rate.

    Features Of CS-Cart PWA

    • Well integrated with CS-Cart & Multi-Vendor.
    • Functionality to set the application name at admin end.
    • Admin can upload and change the application icon.
    • Functionality to set the splash background color of the Progressive Web Application.
    • Option to set the theme color of the Progressive Web Application.
    • Increases user engagement on the store by using push notification.
    • Supports push notifications on Mozilla Firefox and Chrome browsers.
    • Admin can upload the desired Push Notification Icon.
    • Functionality to create and manage Push Notifications.
    • Admin can Edit/Delete/Send Push Notifications.
    • Also admin can attach a Target URL for push notifications.
    • Option to attach a separate Notification banner image for each Push Notification.
    • Functionality to view and manage the push notifications subscribers.
    • The user can be prompted to Add to Home Screen.
    • More user-friendly than a web application.
    • Works lightning fast if compared to the website.
    • Supports push notification (With payload for PHP-7.0+).
    • Launches with the low-quality Internet.
    • Looks and feels like a native application.
    • Also users do not need to update progressive web application.
    • No app store is required for managing the application. 

    How To Upload And Install The Add-on

    • After downloading CS-Cart Progressive Web Application add-on you’ll get the zip file, one install.txt file, and a relevant User Guide manual doc.
    • Read it carefully for proper configuration. Go to Manage Add-ons, click on “+” as shown below in the snapshot.

    install

    Click on “Local” to browse the zip file and then click on “Upload & Install” as shown below in snapshot.

    Progressive Web Application

    Add-on will be installed successfully!

    PWA Configuration

    After add-on installation, click on Settings to configure the add-on as shown below.

    install

    In the add-on settings, there are 2 sections for PWA configuration and Push Notification Configuration.

    PWA Configurations fields provide options to set:

    1. The Application Name
    2. The Application Short Name
    3. Theme color of the App
    4. Splash Background Color for the App
    5. Application Icon (Please note that the app icon must be in .png format)

    The progressive web app will be installed in the device according to the parameters set here.

    upload

    Push Notification Configuration fields include

    • FCM sender id
    • FCM API key

    To know how to get these credentials please click here

    settings

    So, just set the parameters and Save.

    How To Manage Push Notifications At Admin End

    Navigate to Website-> Progressive Web App to manage notifications templates and subscribers as shown below.

    settings

    Go to Manage Push Notifications & click on + Button to add new notification template as shown below.

    manage

    Enter the below mentioned details for notifications and click on the Create Notification button to add the template.

    1. Title
    2. Message
    3. Banner Image if any
    4. Target URL for the notification

    notification

    You can add as many template of the notifications as required. The added template can be edited and deleted whenever desired. To send an instant notification to all the subscriber, Just click on the Notify button as shown below.

    template

    To view & manage Subscribers, go to Manage Push Subscribers under the Website-> Progressive Web App tab. Here you can view all the subscribed users who have allowed the push notifications & will be notified whenever the notify button is pressed.

    There is also an option to delete multiple subscribers. Just mark the subscribers and delete selected ones as shown below.

    delete

    How A Customer Can Install Progressive Web App

    A customer can open the website in a browser of the mobile device. On opening the site, he/she will be asked to allow/block Push Notifications as shown below.

    Please note that the screenshots here belong to the chrome browser.

    addon

    On allowing, the user will be notified and from here customer can click on menu icon of the browser to add the application on the home screen as shown below.

    notified

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

    home screen

    Now a pop window will appear to add the progressive web application like this.

    app

    The app will seem to be getting installed like all other apps in the notification bar of your mobile device as shown.

    install

    After installation, 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.

    icon

    After clicking on the application, the application launches with a splash screen. The splash screen shows the application name and icon.

    app

    Push Notification View at Mobile:

    view

    That’s how you can use CS-Cart progressive Web App add-on to provide an app like experience to your customers.

    Thank you for reading!

    Support

    Please explore our cs-cart Development Services and Quality cs-cart add-ons.

    That’s all for the add-on, still, have any issue, feel free to write here http://webkul.uvdesk.com  and let us know your views to make the module better.

    Current Product Version - 1.0

    Supported Framework Version - 4.5.x, 4.6.x, 4.7.x

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Table of Content