...

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.

...

See documentation: https://developer.mozilla.org/en-US/docs/Web/API/Push_API

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

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

...

Backend

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 https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event )

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.

...