Mobile

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

Share this post:

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.
  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.
  2. Click on the Register For Push button to register the web device.
  3. Click on Allow Notifications when permission is requested for.

PWAs in Android devices

1. 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.
  3. Click the Send button to send the notification.
  4. The registered web device will receive the notification in the browser.
  5. The registered mobile device will receive the notification in Chrome.

 

Resources

Push Notifications Service Advanced Plan

Documentation

Solution Tutorials

Video Gallery

Architect, IBM Mobile Cloud Platform Development

Anantha Krishnan K G

Software Engineer

More Mobile stories
October 2, 2018

Mobile Foundation Service on IBM Cloud is Now Available in the US-East Region

We are excited to announce the availability of the IBM Cloud Mobile Foundation service in the US-East (Washington DC) region. The service is now available in five regions, including US-South (Dallas, TX), London, Frankfurt, and Sydney.

Continue reading

September 28, 2018

Use Web-Hooks to Track Events in IBM Cloud Push Notifications Service

The IBM Cloud Push Notifications service utilizes web-hooks for user-defined callbacks that are triggered by an event in the instance.

Continue reading

August 24, 2018

Setting up IAM Policies for Push Notifications Service Instance

IBM Cloud Identity and Access Management (IAM) enables defining roles and policies to be set in an IBM Cloud user's account, allowing owners of the Push Notifications service to control the access to the instances, with varying levels.

Continue reading