Over the years, I have spent a lot of time using modals and toast notifications to provide users with feedback about things that are happening in the background while a web page is active. These messages could be about an autosave of data or about the expiration of a session. Something more interesting has come about, though. We now have the Notifications API.

Click here to test the Notifications API

So, how do you implement this magic?

While you can read what’s going on via the CodePen embed, I recommend testing via the demo link.

So, how does the compatibility picture look?

On the desktop, it is pretty good. iOS doesn’t support it at all and Android supports it with caveats, though.

Have questions, comments, etc. Feel free to drop a comment below.