Testing push notifications the easy way with Firebase Cloud Messaging and Gitpod

If you ever found yourself having to integrate push notifications into your project you’ll likely share my views on the subject:

Push notifications are a pain in the butt.🤦🏻‍♂️

Testing push notifications can still be pretty damn difficult. I don’t own an iOS device and using the Xcode simulator is not an option. Android makes things a bit easier but you still need to download the entire Android Developer Studio (and SDK) just to test a couple of push notifications.

Then Firebase Cloud Messaging came and changed the way push notifications can be tested. The fact that a single platform integrates with Web, Android and iOS and it’s supported by AWS SNS means we can easily test push notifications on web and be 100% sure they will work the same way on all other platforms. How awesome is that? 🤯

Firebase setup

First of all let’s create a Firebase project (create a Firebase account if you don’t have one).

Once the project is created retrieve the Server key from the settings (replace {PROJECT_NAME} with your project’s name) by following this URL: https://console.firebase.google.com/u/0/project/{PROJECT_NAME}/settings/cloudmessaging/

In “Cloud Messaging -> Web Push certificates” create a key pair and store the public key somewhere.

Gitpod setup

Gitpod allows you to easily create a fully featured development environment in the cloud. Their browser extension will enable a nice little green button that will immediately create an environment and clone the repository where you clicked it. It currently supports GitHub, GitLab and BitBucket.

Notice the green button with “Gitpod”

Go to https://github.com/firebase/quickstart-js/tree/master/messaging and smash that little green button. Creating the environment will take a while.

Once the environment is ready you’ll be given a fully functional VSCode instance, together with a terminal, running in a Docker container. The next steps assume you’re using Gitpod but they should work on a local environment too.

The full dev environment in its glory!

Development environment setup

Install the Firebase CLI on your system:

1. npm install -g firebase-tools
2. firebase login
3. firebase use — add (select the project created above)

Open index.html .

Pass the public key created above to usePublicVapidKey (replace <YOUR_PUBLIC_VAPID_KEY_HERE>).

From the messaging folder run firebase serve --port 8081 to serve the project.

Gitpod will ask you to expose the chosen port (which, by the way, is completely arbitrary) and provide you with an option to open a preview or a new tab showing the running project. Regardless of the option you choose you’ll be presented with a big “Request permissions” button. Click it to allow your browser to receive push notifications.

Note: the button won’t work if the app isn’t served via HTTPS, which Gitpod provides by default.

Once permissions are granted you’ll be shown an Instance ID (IID) which represents your device (your browser, in this case). You can use it to send a test notification via cURL:

curl --request POST \
  --url http://fcm.googleapis.com/fcm/send \
  --header 'authorization: key=AAAA4TVzF60:APA91bHxmpq7Va8JtpGple9nkfki7ez91E7gjPENNYwevEOQVH-xsxSrYVIG4B2xZC-AvBRZW7_w5wnrMLonHJScxRVvVnRWswIFs3ROK9m1BwmWRSiXjtHnWchSLJmNjIyR3m1QO64N' \
  --header 'content-type: application/json' \
  --data '{
  "notification": {
    "title": "Push notification test",
    "body": "It works! 🎉",
    "icon": "firebase-logo.png",
    "click_action": "http://localhost:8081"
  },
  "to": "<IID>"
}'

The response will show whether the request was successful (i.e. "success": 1 ) or not. If the tab with the running app is not in focus (even if your browser is in the background) the notification will show up as a native app of your operating system.

The future: automated testing

Thanks to Firebase API and tools such as Node and Google’s Puppeteer (which will hopefully support the push API soon) it will finally be possible to automate end-to-end testing when it comes to push notifications without using a device or setting up the SDK of the related platform (assuming you trust Firebase with the delivery).

This will greatly increase confidence when implementing push notifications without having to resort to expensive services or (physical) device farms.

If you have more tips and tricks on how to implement and test multi-platform push notifications, without exiting the comfort of your own laptop, please do reach out! 🤝

UPDATE: a previous version of this article recommended setting up the environment locally and using Localtunnel to serve the project via HTTPS. Turns out Localtunnel is very unstable and using Gitpod makes everything a lot easier.