Description

This component contains widgets to help you to send web push notifications by using only web standard technologies. Please, refer to this link to understand web push protocol.

The application holds two modules:

• WebPush_Lib: Exposes client/server actions and blocks to be used in Reactive applications
  

  

• WebPushExtension: Extension that implements web-push-csharp. You should not use it directly since it is exposed on the WebPush_Lib module.
  

How to use

I will describe here the mandatory steps to use the component; you need to use the actions to create your own business logic to subscribe and send notifications. 

On your application (the main application, the consumer of this component) you need to import this JavaScript file as a Resource; this is necessary because we need to register the service worker at the top level of the application. 

Considering that my End User module is called WebPushDemo, it will look like this:

Then, use RegisterSW to register the Service Worker in you application and provide URL property as the parameter:

Next, you need to subscribe to receive notifications (according to your rules and permissions); use client action Subscribe to do that:

Note that you need to provide a Public Key to subscribe; you must generate a VAPID key pair and store it server-side. You can generate it using this link or download the component and generate it in your environment. 

You may want also to store in your application the result of Subscribe client action; this data will be necessary to send notifications to that client. 

Now you are ready to send a notification. You'll need to use PushNotification server action to do it by passing Subscription (returned by Subscribed action and saved somewhere), VapidKeys (generated key pair - same used to subscribe), and Options. 

Options parameter holds all data that defines in your notification:

More the title and body that are auto-explained, the next image shows each field in one notification example:

The last field - data - is used as a URL destination when opening the notification; if null, nothing will happen when opening the notification.

Please, use the Try now button to see it in action and download the Demo to see in more detail how to use it. 

Known limitations

• Not all browser versions are compatible; please look here the see more detail
• Apple devices do not support it yet; it will be possibly supported in 2023
• Notification view does not provide additional actions (buttons) and does not listen to additional events than open
• Not supported in PWA's - need to test it as an additional Service Worker