Web applications have been able to alert users via notifications for about a decade now. By using the Notifications API, a web app can display messages in the operating system’s built-in notification center. When used well, notifications can be a powerful tool to keep users informed about important events. This ability to integrate deeply within the operating system has been a key factor in making the web platform relevant for a wide range of application use cases.
However, there are always more use cases to unlock. One such case is for applications that want to notify their users of incoming calls. If the application you’re working on allows for audio and/or video calls to be made, you might have found the Notifications API to be not enough for your needs.
Indeed, the API doesn’t currently let you customize the buttons that appear inside of a notification, or make the notification higher priority than others, or associate a ringtone with it. You might even have needed to implement your own custom incoming call notification mechanism.
We think this is a limitation we can solve.
Extending the Notifications API to support incoming calls
In our Incoming Call Notifications explainer, we’re proposing an extension to the Notifications API to solve this problem. We’ve also implemented a prototype of this explainer in Chromium.
This new API extension proposal lets you create notifications that:
- Are visually distinguished from other notifications.
- Have customized buttons, which can be used to answer or reject a call.
- Have a ringtone associated with them.
- And have a higher priority than other notifications, when supported by the platform.
The explainer introduces a new optional parameter you can pass when showing a notification. The existing options parameter will now accept a new scenario property, which can be set to "incoming-call" to indicate that this notification is an incoming call notification:
With the above code, the notification makes it clear that this is an incoming call and lets the user easily start or reject the call.
The API extension also makes it possible to add your own custom buttons alongside the dismiss button, for example to accept the call with audio only:
Test the feature
To see the API in action, use our sample app in Microsoft Edge on Windows by using the following steps:
- Start Microsoft Edge on Windows from the command line with the following feature flag:
msedge.exe --enable-features=IncomingCallNotifications. - Open the calls notification sample app.
- Install the app on Windows, by clicking the App available button in the address bar.
- When the app is installed and running, click the Permission button to accept notifications from the sample app.
- Click the Show an incoming call notification button.
Let us know what you think
We’re very excited about the use cases this proposal can unlock for web apps, and about how this can help developers continue to leverage the web platform when building powerful applications.
We’re looking for feedback on this proposal, so if you’re interested in this API and want to help us shape it, please read the explainer, and send us your feedback by opening a new issue on our repository.
There’s always more work to do to help web developers achieve their goals on the web platform, for example, how would the Incoming Call Notifications API integrate with urgent Push messages? We’re always looking for new problem spaces like this, new use cases, and new ideas. So, even if your feedback isn’t related to the Incoming Calls Notification API, please do reach out.
