...
| Note |
|---|
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.
...
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
| Note |
|---|
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:
| Code Block |
|---|
$.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:
| Code Block |
|---|
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:
| Code Block |
|---|
<arguments>
<argument name="modifier" xsi:type="string">cs-notification-panel--slim</argument>
<argument name="render_icons" xsi:type="boolean">true</argument>
<argument name="button_accept_text" xsi:type="string" translate="true">Yes, please</argument>
<argument name="button_decline_text" xsi:type="string" translate="true">No, thank you</argument>
<argument name="show_decline_button" xsi:type="boolean">true</argument>
<argument name="is_description_in_collapse" xsi:type="boolean">true</argument>
</arguments> |
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:
| Code Block |
|---|
<arguments>
<argument name="js_config" xsi:type="array">
<item name="notificationType" xsi:type="string">order_status_notification</item>
<item name="visualVariant" xsi:type="string">slim</item>
<item name="showOnInit" xsi:type="boolean">true</item>
<item name="panelHeaders" xsi:type="array">
<item name="request" xsi:type="string" translate="true">Enable push notifications</item>
<item name="pending" xsi:type="string" translate="true">Almost there</item>
<item name="granted" xsi:type="string" translate="true">Push notifications enabled</item>
<item name="alreadyGranted" xsi:type="string" translate="true">Push notifications enabled</item>
<item name="autoReject" xsi:type="string" translate="true">Ooops</item>
<item name="userReject" xsi:type="string" translate="true">Got it!</item>
</item>
<item name="panelDescriptions" xsi:type="array">
<item name="request" xsi:type="string" translate="true">Would you like to be informed about the delivery status of your order via push notifications?</item>
<item name="pending" xsi:type="string" translate="true">Please confirm that you would like to recieve notifications in your browser.</item>
<item name="granted" xsi:type="string" translate="true">Thank you! You will be informed when your order is shipped.</item>
<item name="alreadyGranted" xsi:type="string" translate="true">We will inform you about your order status updates via push notifications.</item>
<item name="autoReject" xsi:type="string" translate="true">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.</item>
<item name="userReject" xsi:type="string" translate="true">We won't bother you with push notifications. You can always change your decision for your future orders by enabling notifications manually in your browser's settings.</item>
</item>
</argument>
</arguments> |
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:
| Code Block |
|---|
$.post({
url: url.build('rest/V1/pwa/permission'),
data: JSON.stringify({"permission": permissionIdentifier}),
contentType: 'application/json'
}) |
When a checkbox is unchecked:
| Code Block |
|---|
$.ajax({
url: url.build('rest/V1/pwa/permission/' + permissionIdentifier),
type: 'DELETE'
}) |
| Note |
|---|
Advertisement notifications are not test implemented |