Creating and sending push notifications to Safari web by using Event Notifications

What is Event Notifications?

Event Notifications is an event notification routing service that notifies you of critical events that occur in your IBM Cloud account or triggers automated actions by using webhooks. You can filter and route event notifications from IBM Cloud services like Availability Monitoring, to email, SMS, push notifications (FCM or APNs), and webhooks.

How do clients use Safari push notifications?

The following diagram shows you how clients use iOS Push Notifications.

Objectives

This tutorial shows you how to send push notifications as follows:

• Create a web app with Event Notifications.
• Get Safari credentials.
• Download the code and complete the notifications setup.
• Configure and send Safari Push Notifications to a Safari Web.

Before you begin

You must have the following prerequisites in place:

• An IBM Cloud account. If you do not have one, create an IBM Cloud account.
• An Event Notifications Instance.
• An IAM API key to allow the SDK to access your account. Create one here.

Create an Event Notifications service instance

• Log in to your IBM Cloud account.
• In the IBM Cloud catalog, search Event Notifications > Event Notifications.
• Select a Region from the list of supported regions and select a pricing plan.
• Provide a Service name.
• Select a resource group.
• Accept the licensing agreements and terms by clicking the checkbox.
• Click Create.

Get Safari credentials

• Add Apple Worldwide intermediate certificate to your Key Chain, you can find the certificate here.

  

  

• Create Web Push ID in your Apple Developer account.

  The Web Push ID (the bundle identifier) is a unique identifier that identifies a specific application. Each application requires a Web Push ID.

• Go to the Apple developer portal and select Certificates, Identifiers & Profiles.

  

• Go to Identifiers > Add identifier button.

  

• Click Add a new Identifier button.

  

• Select the Web Push IDs option.

  

• Provide Identifier and description for your Web Push ID, identifier is unique reverse-domain string for your Web Push ID such as web.com.example.domain (the string must start with web). If your website is yourwebsite.com add the identifier as web.com.yourwebsite.

  

• Continue and then click Create certificate on the next page.

  

  

• Create a Certificate Signing Request by using KeyChain and save it to disk. For more information, see here.

  

  

• Upload the CertificateSigningRequest.certSigningRequest and click Continue.

  

  

• Download the certificate with .cer extension and double-click it. It adds it to Keychain Access → My Certificates.

• Got to your Keychain Access→ My Certificate, select your certificate export it.

  

  

• Add a password (Don't Forget it) and save as p12 certificate.

Add a generic API source

Take the following steps:

• Go to the Sources section of the Event Notifications dashboard.
• Click Add and select an API Source.
• Type a name and an optional description and click Add.

Create a Event Notifications destination

Click Destinations in the Event Notifications console and add the following destination details:

• Name: add a name for the Destination.

• Description: add an optional description for the destination.

• Type: select Safari Push Notifications type from the dropdown list.

• Select a destination plan: Pre-production destination or Production destination.

  • Pre-production destination - select this destination as low-cost push destination, for your development and test environments.
  • Production destination - use the full capability of this destination. Unlimited devices and outbound messages allowed.

• Update the Safari Push Credentials with the details.

  • Website Name: The website name. This is the heading that is used in Notification Center.
  • Website push ID: Unique reverse-domain string for your website Push ID such as web.com.example.domain (the string must start with web).
  • Website URL: The URL of the website that should be permitted to subscribe to Safari Push Notifications.
  • URL format string: The URL to go to when the notification is clicked. Use %@ as a placeholder for arguments that you complete when delivering your notification. This URL must use the http or https scheme: otherwise, it is invalid.
  • upload p12 certificate and provide certificate password.

Create an Event Notifications topic

Select Topics in the Event Notifications console and click Create. Enter the following topic details:

• Name: enter a name for the topic.
• Description: add an optional description for the topic.
• Source: select a source from the dropdown list.
• Event type: select event type from the dropdown list.
• Event sub type select event sub type from the event sub type dropdown list.
• Severity: select severity from the severity dropdown list.
• Advanced conditions: write your own custom conditions, which must follow jsonpath specifications.

Create an Event Notifications subscription

Click Subscriptions in the Event Notifications console. Enter the following subscription details:

• Click Create to display subscription wizard.

• Complete the following subscription details:

  • Subscription name: name of the subscription.
  • Subscription description: add an optional description.

• Under the Subscribe to a topic section, select a topic from the drop-down list and select a destination from the destination drop-down list.

• Destination type: select type under Destination and click Add.

Set up Event Notifications Safari web SDK

The Safari web SDK enables Safari websites to receive push notifications. Complete the following steps to install Event Notifications Firefox web SDK, initialize the SDK, and register for notifications for your website.

• To include the SDK in your project, add the ENPushSDK.js, ENPushServiceWorker.js, and manifest_Website.json files to your project root folder.

• Edit the manifest_Website.json file.

  {
     "name": "YOUR_WEBSITE_NAME"
  }
  

• Change the manifest_Website.json file name to manifest.json.

• Include the manifest.json in the <head> tag of your html file.

  <link rel="manifest" href="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/manifest_Website.json">
  

• Include IBM Cloud web push SDK to the script.

  <script src="https://github.com/IBM/event-notifications-destination-webpush-sdk/blob/main/ENPushSDK.js" async></script>
  

• Complete the following steps to enable the website to initialize the SDK

  var enPush = new ENPush()
  
  function callback(response) {
     alert(response.response)
  }
  
  var initParams = {
     "instanceGUID": "<instance_guid>",
     "apikey": "<instance_apikey>",
     "region": "<region>",
     "deviceId": "<YOUR_DEVICE_ID>",
     "safariDestinationId": "<safari_destination_id>",
     "websitePushIdSafari": "<Safari Web Push Id Identifier>"
  }
  
  enPush.initialize(initParams, callback)
  

  • region: Region of the Event Notifications instance. for example, us-south,eu-gb, au-syd, eu-de and eu-es.

  • deviceId: Optional deviceId for device registration.

• To register for notifications, se the register() or registerWithUserId() API to register the device with IBM Cloud Event Notifications service. Choose either of the following options:

  • Register without UserId:

    enPush.register(function(response) {
       alert(response.response)
    })
    

  • Register with UserId. For userId based notification, the register method accepts one more parameter - userId.

  bmsPush.registerWithUserId("UserId",function(response) {
    alert(response.response)
  })
  

  UserId is the user identifier value with which you want to register devices in the push service instance.

• The subscribe API subscribes the device for a tag. After the device is subscribed to a particular tag, the device can receive notifications that are sent for that tag. Add the following code snippet to your web application to subscribe to a list of tags.

  enPush.subscribe(tagName, function(response) {
    alert(response.response)
  })
  

• When the setup is complete, run your application and register for push notifications.

Send notifications to the Safari Web device

Use the Send Notification API to send the push notification for the Firefox device. You can use the Node or Go admin SDK instead of calling the API directly.