How we achieved both foreground and background notification using Angular Progressive Web App and Firebase Cloud Messaging at Kabbage
By: Xin Zhang
Tags: Kabbage, Angular, Push Notification, Firebase, Progressive Web App

Let’s test sprint 2 for now. Note: the message is not the real Firebase message yet… we will get it later.

Build and re-serve using ng build --prod --source-map and http-server-spa dist/PushDemo/ index.html 18080

Hard refresh http://localhost:18080/ (for the 1st time only because the old code does not do auto-reload for upgrade. For future changes, you just need to reload as normal, and wait for Angular to pick up the changes and reload itself. There will have a log in the console to tell you update is finished), click the only button on the page, Chrome will ask you if you grant permission. Click “Accept”, you should see something like cY4hsxFuLhSuXg0P_LU2mW:APA91bGBqBs1rDjzueRkXmKuClsal_Hide_For_Security on your page, you will need this in the future, please remember this token:

What the app displays after you click accept.

Ensure you have system notification enabled. For example, on Windows 10, enable the “get notifications from apps and other senders” and give Google Chrome permission to send notification:

Windows 10 system notification setting

Windows 10 system notification setting for chrome

Open Developer tools, click Application tab of the dev tools, click the Service Workers under Application on the left, you should see service worker listed for http://localhost:18080/. In the push field, paste this payload { "notification": {"body": "Kabbage Demo", "icon": "https://www.kabbage.com/favicon.ico", "title": "Demo"}} , and click the “Push” button:

You should see a notification tab:

In developer console, you should also see push message payload as well, note this is generated by our foreground message handler that subscribed to SwPush . Test again and this time, click the notification tab quickly before it disappear, you will also see a foreground click event body logged in developer console, which is sent by the Angular service worker. Below are the logging for these two steps:

It is good for now, but this is NOT real FCM message yet. We need to add this arbitrary string to your manifest.webmanifest : "gcm_sender_id": "103953800507", , it is the same stuff no matter what your messaging app is, what your Firebase account looks like. Go do it!

"gcm_sender_id": "103953800507" pasted in manifest.webmanifest

Rebuild, rerun.

Now go to the Firebase console, click Cloud messaging under Grow tab, and select your application, then click the “Send your first message” button:

Click the “Send your first message” on the right middle

Just fill in title and text, and click “Send test message” button, you can add more attribute later by yourself programmatically.

The real FCM test message we are going to send

Copy the token in on your webpage. As an example, mine looks like: cY4hsxFuLhSuXg0P_LU2mW:APA91bGBqBs1rDjzueRkXmKuClsal_Hide_For_Security. Then, add this token in the “Test on device” pop up, check it, then “Test”:

You should get a message notification and some console output like before; you can play around with it for fun. The notification tile doesn’t look very much like the previous, as it is a different payload request we are using. Google FCM UI page is limited for the payload contract, in reality we used api to compose the message so it looks a little bit different. For now this is good enough for demo purpose. And that is all for sprint 2. You can find Sprint 2 on Github, A screenshot with my example:

The notification made by real FCM message

As of now, your app should be able to handle the push message pretty well. And if you install it on an Android device (will cover more on installation on the next sprint), it will also show you the notification like other apps. However, on both Windows and Android, clicking the notification would not do anything. Or, more specifically, when your app is in the foreground, meaning the app is open, clicking the notification will actually do some logging as in this example. But when your close the app, meaning app running in the background. Sadly, Angular has no short-term plan (true as of Oct 2019) to implement this feature. There are many customization options available online to achieve this but, in the following Sprint 3, I will introduce the way we did it and how we think it is manageable.