GitHub - magesuite/back-in-stock-pwa-notifications

This module provides a base logic for push notifications as well as a more detailed logic for order status notifications. Push Notifications allow the user to be well informed that an order has been shipped, they are a fast and efficient way to communicate with the users. The push notification readability rate is higher than either an Email or SMS, also push notifications never land in SPAM.

1 Installation
2 User manual
- 2.1 What are web push notifications?
- 2.2 Basic usage scenario
- 2.3 Other scenarios
3 Admin settings
4 Backend
5 Frontend
- 5.1 pwa_device_endpoint cookie
- 5.2 Notification event listeners
- 5.3 Success page
- 5.4 User Area

Installation

This module is optional

composer require "creativestyle/magesuite-pwa-notifications" ^1.0.0

User manual

This manual was written by Alicja for Ipet. I only changed screens into magesuite ones. It maybe should be move to user manual confluence, but I do not have rights to edit it.

What are web push notifications?

Push notifications are popup-like messages that appear on a user's device, sent by the shop to the users.
Users who are subscribed to a specific kind of notification will receive push notifications - even if the browser/app is not open. Users can opt-in to receive push notifications or opt out in User Area.

After you’ve placed your order through the shop, you’ll likely receive a message letting you know that an order has been shipped: those messages are Shipment Push Notifications.

Shipment push notifications are supported by desktop Chrome & Firefox and also by Chrome on Android (mobiles, tablets)

See documentation: Push API - Web APIs | MDN

Tutorial: https://web.dev/explore/notifications

Can I use: https://caniuse.com/push-api

Basic usage scenario

On the Thank you page Shipment Push Notification modal asks for permission to enable push notifications.
There are the following elements displayed:

'Enable push notifications' headline,
bell icon with question mark icon and proper ringing animation,
text '

Would you like to be informed about the delivery status of your order via push notifications?',

buttons: 'Yes, please' & 'No, thanks',
X icon.

When you click on ‘Yes, please’ button, the shop asks you for permission to send you notifications. There are 2 options: ‘Block’ and ‘Allow’.

Shipment Push Notification Modal is still visible, but now there are: 'Almost there' headline and text 'Please confirm that you would like to receive notifications in your browser.' There is also X icon visible:

When you select ‘Allow’ option, then Modal on the Thank you page changes.
Now there are the following elements visible:

'Push notifications enabled' headline,

'Thank you! You will be informed when your order is shipped.' label,

X icon.

Shipment Push Notifications are activated in this browser.

When your order is shipped, you will get a Shipment push notification.

On desktops, it will pop-up in bottom-right corner of your screen, even if the browser is closed. There are the following elements visible:

‘Order status’ headline,
Your order [ordernumber] was shipped via [shop domain] information,
X and Settings buttons.

If you are a logged in user, then you can control your notifications in My Account > Notifications section:

If you don’t want to get Shipment Push Notifications anymore, then you can simply unselect 'Order status' notification checkbox. You can also clear the history of your browser or change browser settings (these 2 options are the only way for guest users to unsubscribe from Shipment Push Notifications).

If you allowed for Shipment Push Notifications, then after placing the next order, there won’t be any Shipment Push Notifications modal visible on the Thank you page anymore. And when this order will be shipped, you will get a push notification again.

Other scenarios

What happens if I select ‘No, thanks’ on the Thank you page?

Shipment Push Notifications modal disappears from the Thank you page
After placing the next order Shipment Push Notifications modal is visible on the Thank you page, but it looks different. There is a bell icon with a small X icon in its top right corner visible, ‘Ooops’ headline, and text: ‘We can inform you about your order status, however privacy settings of your browser's for this store denies push notifications. If you'd like to receive updates on your order's status, please enable push notifications for this store manually.’

2. What happens if I select ‘Yes, please’ on the Thank you page and then I select ‘Block’ in the pop-up?

Pop-up disappears. Still, there is Shipment Push Notification modal with 'Almost there' headline and text 'Please confirm that you would like to receive notifications in your browser.' visible on the Thank you page.
After placing next order Shipment Push Notifications modal is visible on the Thank you page, but it looks different. There is a bell icon with a small X icon in its top right corner visible, ‘Ooops’ headline and text: ‘We can inform you about your order status, however privacy settings of your browser's for this store denies push notifications. If you'd like to receive updates on your order's status, please enable push notifications for this store manually.’

3. What happens if I click on X button on the Thank you page?

Shipment Push Notifications modal disappears from the Thank you page
After placing next order the same Shipment Push Notifications modal is visible on the Thank you page again.

Admin settings

In order to allow push notifications, PWA must be enabled and configured in Stores > Configuration > MageSuite > PWA -> General PWA module is documented here: Pwa (optional)

In Stores > Configuration > MageSuite > PWA -> General specific notifications can be enabled. Back-in-stock notifications are part of a separate module: BackInStockPwaNotifications (optional) . Advertisement notifications are not fully developed yet.

Backend

In progress

Frontend

`pwa_device_endpoint` cookie

If Notification.permission === 'granted' The getRegistration() method of the ServiceWorkerContainer interface gets a ServiceWorkerRegistration object. The subscribe() method of the PushManager interface subscribes to a push service. A new push subscription is created if the current service worker does not have an existing subscription. It returns a Promise that resolves to a PushSubscription object containing details of a push subscription.

If there is no pwa_device_endpoint cookie or pwa_device_endpoint cookie value is different than the subscription endpoint. the following data is sent to the backend:

$.post({
    url: url.build('rest/V1/pwa/device_information'),
    data: JSON.stringify({
        oldEndpoint: pwaDeviceEndpointFromCookie,
        endpoint: pushSubscriptionData.endpoint,
        keys: pushSubscriptionData.keys
    }),
    contentType: 'application/json'
})

Then pwa_device_endpoint cookie is set with value returned in the response.

Notification event listeners

In the magesuite-pwa-notifications/view/frontend/layout/pwa_serviceworker_index.xml layout MageSuite_PwaNotifications::push.phtml template is added to pwa.service-worker block. The template adds event listeners and logic for handling push notifications. Push (see https://web.dev/push-notifications-handling-messages/

When a message is received, it'll result in a push event being dispatched in the service worker. The callback check if there is a title, icon, and badge in event.data, if not default values are set. Then notification is created on an active service worker.

Notification click event (see https://web.dev/push-notifications-notification-behaviour/#notification-click-event )

After the notification that was clicked, the script checks if there is notification.data.url and redirects a user to the URL - if exists. It also always closes the notification.

Pushsubscriptionchange (see ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs | MDN )

if there is event.oldSubscription && event.newSubscription the following request is posted:

fetch('<?=$deviceInformationApiUrl?>', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
        oldEndpoint: event.oldSubscription.endpoint,
        endpoint: event.newSubscription.endpoint,
        keys: event.newSubscription.toJSON().keys
    })

Success page

On the success page, a panel is displayed that allows a user to subscribe to order push notifications. For more details see the User manual section of this documentation.

Template: MageSuite_PwaNotifications::notification-panel.phtml

Settings:

Additionally: notification.panel.icon.request, notification.panel.icon.pending, notification.panel.icon.enabled, notification.panel.icon.rejected, notification.panel.close.icon, notification.panel.button.accept.icon, notification.panel.button.decline.icon and notification.panel.next.icon can be configured.

Template: MageSuite_PwaNotifications::js-init.phtml

Settings:

User Area

In the User Area, there is an additional subpage where a user can manage their notifications.

Layout: magesuite-pwa-notifications/view/frontend/layout/pwanotifications_notifications_index.xml

Template: MageSuite_PwaNotifications::notifications-customer.phtml

ViewModel: MageSuite\PwaNotifications\ViewModel\Permissions

Script: magesuite-pwa-notifications/view/frontend/web/js/manage-notifications.js

The script initializes the event listener to send ajax request when one of checkboxes in are changed. It sends 2 kinds of request:

when a checkbox is checked:

When a checkbox is unchecked:

PwaNotifications (optional)