Webkul Addon  Webkul SupportDemo User Guide

Demo will be reset in: minute(s)Go to Administration panelGo to Vendor panel

Cs-Cart Progressive Web App:

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.

progressive-web-application.jpg

How To Use:

Click Here To View Complete Blog of This Extesion

Step 1: Go to the Manage Add-on page. Browse and select the zip file,upload and install.After successful add-on installation Click on “settings” to configure the add-on

install

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

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

template

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.