Configuring Web Push Notifications

improve this page | report issue

Before you can send Web push notifications, you need to do some configurations.

Configuring Web Push Notifications using Mobile Foundation

Following steps describe how to configure Web push notifications.

  1. Go to Push Settings tab for your registered web app on Mobile Foundation console.

  2. Go to the Web Configuration section, here you see three subsections for Chrome, Firefox, and Safari.

    Configuring web push for Chrome

    • Chrome configuration consists of website URL and Google Server API key.
      • Website URL - Fully qualified URL of the public website that you want to enable web push notifications for. For example, https://mfp-web-push-test.herokuapp.com/.
      • Google Server API key - is the API key that you get from the Firebase console for your web app. Go to your Firebase Project -> Settings -> Cloud Messaging and copy and paste the Server Key.

    Configuring web push for Firefox

    • Firefox configuration is the simplest of all - it only relies on the website URL.
      • Website URL - Fully qualified URL of the public website that you want to enable web push notifications for. For example, https://mfp-web-push-test.herokuapp.com/.

    Configuring web push for Safari

    • Safari configuration consists of a number of parameters like Website Push ID, URL format string, etc. Each of them are described as follows:
      • Website Name - The name of the website. This is the heading used in Notification Center.
      • Website URL - Fully qualified URL of the public Website that you want to enable Web Push Notifications for. For example, https://mfp-web-push-test.herokuapp.com/.
      • Website Push ID - This is the Push Identifier. It is web.<website-url-in-reverse-order>. For example, if the Website URL is https://mfp-web-push-test.herokuapp.com/ then Website Push ID is web.com.herokuapp.mfp-web-push-test
      • URL format string - The URL to go to when the notification is clicked. Use %@ as a placeholder for arguments you fill in when delivering your notification. This URL must use the http or https scheme, otherwise, it is invalid. For example, https://mfp-web-push-test.herokuapp.com/%@
      • Safari web push certificate (p12 format) & password - The APNS certificate and password.
      • Notification icons (Optional) - PNG icon fileset.

    Following image shows how it looks once all the platforms are configured.

    Push Config

Adding the required Security Scopes

  1. Go to Security section for your web app.

  2. Under Security Scope-Element Mapping, add new Scopes as shown in the following image. Security Scope

KeyStore changes

For sending notifications to Chrome and Firefox platforms, your server needs to be trusted origins. To address this requirement, you can pull CA certs from trusted vendor into your Mobile Foundation server keystore file key.jks. The following example is pulling CA certs from Java installations into key.jks:

keytool -importkeystore
-srckeystore /<path-to-java-installation>/jre/lib/security/cacerts
-destkeystore /<mfp-installation-dir>/mfp-server/usr/servers/mfp/resources/security/key.jks

You are prompted for Destination KeyStore password, the default is mobilefirst. Java KeyStore default password is changeit (unless set to something else).

Important: Chrome and Firefox notification token length is large, the customers who upgraded their Mobile Foundation instances need to update their database schema for PUSH_DEVICES table by increasing the token length from 255 characters to 1024 characters.

Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on July 02, 2020