Documentation Menu

Progressive Web App with Push Notification (PWA)

PRE-REQUISITES

  • The plugin requires you to install the Nop-Station Core plugin first.

INSTALLATION

  • Download the Progressive Web App from our store https://nop-station.com/customer/downloadableproducts
  • Go to Administration → Configuration → Local plugins
  • Upload the NopStation.PWA zip file using the "Upload plugin or theme" button

    local-plugins-page

  • Go to Administration, reload the 'list of plugins'. Install 'Nop-Station Core' Plugin first and then install 'Progressive Web App'

    install nopStation core

    install-pwa

  • To make the plugins functional, restart the application.

    restart application

  • Enable the plugin with 'Edit' option and Configure it.

    edit plugin

CONFIGURATION

  • Go to Admin → Nop Station → Plugins → Progressive Web App → Configuration

    config

  • Subject email: Enter subject email for vapid details, i.e [email protected].
  • Public key: Enter public key for vapid details.
  • Private key: Enter private key for vapid details.
  • Disable silent: Click to disable silent notification
  • Default icon: Select the default notifdication icon
  • Abandoned cart checking offset: Enter offset for abandoned cart
  • Unit type: Select unit type
  • Name: The name is used in the app install prompt.
  • Short name: The short name is used on the user's home screen, launcher, or other places where space may be limited, when it is provided.
  • Theme color: It sets the color of the tool bar, and may be reflected in the app's preview in task switchers.
  • Background color: This property is used on the splash screen when the application is first launched.
  • Display: This property helps customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Or games may want to go completely full screen.
  • Start URL: The start url tells the browser where your application should start when it is launched, and prevents the app from starting on whatever page the user was on when they added your app to their home screen.
  • Application scope: It defines the set of URLs that the browser considers to be within your app, and is used to decide when the user has left the app.
  • Picture: The picture for the icons. "icons" is an array of image objects. Each object should include the src, a sizes property, and the type of image.

Notification templates

  • Go to Admin → Nop Station → Plugins → Progressive Web App → Notification templates

    list

  • Here shows the list of notification templates which are used across the plugin
  • You can also edit the existing notificatrion template by clicking on the Edit button

    pwa-edit-templates

Announcements

  • Go to Admin → Nop Station → Plugins → Progressive Web App → Announcements

    list

  • Here shows the list of Announcements which will show to the users
  • You can also add new announcement by clicking on Add new button

    pwa-add-announcements

  • Title: Title of the announcements
  • Body: Body of the announcements
  • Use default icon: Check to use default icon
  • Icon: The notification announcement icon
  • Image: The notification announcement image
  • Url: The notification announcement url

Queued notifications

  • Here shows the list of push notifications which are queued to show to the customers

    queued-notification-list

  • By clicking on the View button you can see the notification details

    queued-notification-details

Devices

  • Here shows the list of devices from which customers have viewed your application

    devices-list