Posted by Mertcan Mermerkaya, Software Engineer
We have great news for web developers that use Firebase Cloud Messaging to send notifications to clients! The FCM v1 REST API has integrated fully with the Web Notifications API. This integration allows you to set icons, images, actions and more for your Web notifications from your server! Better yet, as the Web Notifications API continues to grow and change, these options will be immediately available to you. You won't have to wait for an update to FCM to support them!
Below is a sample payload you can send to your web clients on Push API supported browsers. This notification would be useful for a web app that supports image posting. It can encourage users to engage with the app.
{ "message": { "webpush": { "notification": { "title": "Fish Photos 🐟", "body": "Thanks for signing up for Fish Photos! You now will receive fun daily photos of fish!", "icon": "firebase-logo.png", "image": "guppies.jpg", "data": { "notificationType": "fishPhoto", "photoId": "123456" }, "click_action": "https://example.com/fish_photos", "actions": [ { "title": "Like", "action": "like", "icon": "icons/heart.png" }, { "title": "Unsubscribe", "action": "unsubscribe", "icon": "icons/cross.png" } ] } }, "token": "<APP_INSTANCE_REGISTRATION_TOKEN>" } }
Notice that you are able to set new parameters, such as actions, which gives the user different ways to interact with the notification. In the example below, users have the option to choose from actions to like the photo or to unsubscribe.
To handle action clicks in your app, you need to add an event listener in the default firebase-messaging-sw.js file (or your custom service worker). If an action button was clicked, event.action will contain the string that identifies the clicked action. Here's how to handle the "like" and "unsubscribe" events on the client:
like
unsubscribe
// Retrieve an instance of Firebase Messaging so that it can handle background messages. const messaging = firebase.messaging(); // Add an event listener to handle notification clicks self.addEventListener('notificationclick', function(event) { if (event.action === 'like') { // Like button was clicked const photoId = event.notification.data.photoId; like(photoId); } else if (event.action === 'unsubscribe') { // Unsubscribe button was clicked const notificationType = event.notification.data.notificationType; unsubscribe(notificationType); } event.notification.close(); });
The SDK will still handle regular notification clicks and redirect the user to your click_action link if provided. To see more on how to handle click actions on the client, check out the guide.
Since different browsers support different parameters in different platforms, it's important to check out the browser compatibility documentation to ensure your notifications work as intended. Want to learn more about what the Send API can do? Check out the FCM Send API documentation and the Web Notifications API documentation. If you're using the FCM Send API and you incorporate the Web Notifications API in a cool way, then let us know! Find Firebase on Twitter at @Firebase, and Facebook and Google+ by searching "Firebase".
With the announced expansion of Firebase at Google I/O recently, we also introduced Firebase Cloud Messaging (FCM) and Firebase Notifications (FN). As a developer, there are lots of updates that you might be able to take advantage of.
Despite the switch to FCM, we’ll continue to support Google Cloud Messaging on Android, iOS and the Web because we know that you have applications using the previous SDKs to handle notifications. However, all new client side features will be added to FCM SDKs moving forward. As such, we strongly recommend that you upgrade to the FCM SDKs. You can learn more about them here.
FCM supports everything that you’ve come to know with Google Cloud Messaging including addressing single devices, groups of devices or topics.
The FCM SDK simplifies client development. For example, you no longer need to write your own registration or subscription retry logic. When it comes to your server (if you still want to use one), updates to the endpoints and protocol don’t incur breaking changes, so as to maintain backwards compatibility. The updated details are available in the FCM Server documentation.
We’re investing heavily in making Firebase our unified mobile platform. We’re also continuing to expand our messaging platform beyond Android, including iOS and the Web. Firebase is well known for it’s cross-platform capabilities, so FCM is a natural fit for the ongoing Firebase releases. If you want to learn how to migrate your current app from Google Cloud Messaging to FCM, we’ve provided guides here for Android and iOS.
We think that Google Cloud Messaging will be even more useful to you when integrated into Firebase, including the new Firebase Notifications console. With that you’ll be able to send messages to apps directly from the console -- without you needing to build a messaging server.
To upgrade from Google Cloud Messaging to FCM or to learn more, see our guides for Android and iOS apps.
