Push Notifications for Progressive Web Apps Using IBM Cloud Push Notification Service

5 min read

What are progressive web apps?

Progressive web apps (PWA) deliver a similar user experience as a mobile app. They can be installed on a user’s home screen without the need to go through an app store. You can now send push notifications to PWAs using IBM Cloud Push Notification Service.

The process of a push notification flow in a PWA is as follows:

  • The web app brings up a popup requesting that the user subscribes to notifications.

  • The user subscribes to receive push notifications.

  • The service worker’s push manager is responsible for handling the user’s subscription.

  • The user’s subscription ID is used whenever messages are posted from the server. Every user can actually have a customized experience based on their subscription ID.

  • The service worker, with the help of the push, listens and is ready to receive any message coming in.

This blog describes the steps to be followed for integrating IBM Cloud’s push notifications with a progressive web app.

Note: At the time of publication, we don’t support push notifications in iOS PWAs due to the limitations in Safari service workers.

Push notifications in PWAs with IBM Cloud

The steps below will show you how to include push notifications using the IBM Cloud Push Notifications Service.

  1. Create an IBM Cloud Push Notifications Service instance by following these steps.

  2. Create a new service credential by clicking Service credentials on the left-hand menu, and then click the New credential button.
    Create a new service credential
  3. Click the Add button to complete the creation of the credential.
  4. If you have not already obtained your notification provider credentials for Android, please follow these steps.

  5. The sample app used by this blog is available to download on GitHub here.

  6. Once downloaded, update the  “Public” -> “Scripts” -> “app.js” with the values of the service credentials.var initParams = {    “appGUID”:”bf98b05c-xxxx-xxxx-a15d-xxxxxx”,    “appRegion”:”.ng.bluemix.net”,    “clientSecret”:”07629560-xxxxxx-xxxxxxxx-xxx-xxxxxxxx”  }

  7. In the “Public” -> “manifest.json” file, add the “gcm_sender_id” with the value of the Sender ID created in Step 4.

  8. The “Public” folder should also be added with the Web Push SDK. This is already done in the PWA sample project that you downloaded from GitHub.

  9. From the root folder of the sample app, deploy your app into IBM Cloud using “cf push” and a command line. Please refer to “Uploading your application,” if required, for steps to upload the app.

    You might have to update the name and host of the app in manifest.yml file, if you face the name already exist issue.

  10. Configure the push instance you created in step 1 by following these steps for your Android and Web (Chrome and Firefox) browsers.

PWAs in browsers

  1. After a successful deployment of the app, you will be able to see your website running.  Open the app URL (https://<nameoftheapp>.mybluemix.net) in a browser.
    PWAs in browsers
  2. Click on the Register For Push button to register the web device.

  3. Click on Allow Notifications when permission is requested for.
    Allow Notifications

PWAs in Android devices

1. Open the app in an Android Chrome mobile browser.

Open the app in an Android Chrome mobile browser.

2. From the menu options, select Add to home screen. This will add the progressive web app to the home screen.

3. Give the PWA a name and click the Add button.

4. Now you can open the PWA as an app in the device (instead of opening it in the browser) to register. Similar to the steps followed for a browser, click Register For Push to register the device.

5. When prompted, click Allow Notifications.

Receive notifications in the PWA

  1. In the IBM Cloud dashboard, go to the push notification instance created in Step 1.

  2. Click on the Manage option in the left-hand menu, and then click Messages to send a notification. Type a message to send to all devices.
    Receive notifications in the PWA
  3. Click the Send button to send the notification.

  4. The registered web device will receive the notification in the browser.
    The registered web device will receive the notification in the browser.
  5. The registered mobile device will receive the notification in Chrome.
    The registered mobile device will receive the notification in Chrome.


Push Notifications Service Advanced Plan


Solution Tutorials

Video Gallery

Be the first to hear about news, product updates, and innovation from IBM Cloud