In my opinion, notifications are ONE of the main features that separate a website from an app, especially now that Progressive Web Applications (PWAs) are all the rage. So having notifications showing up will make your site feel even more like a native app.
The Notifications API’s interface is through the JavaScript Notification
object, which has a lot of properties. Some are visual, others programmatic, some are just metadata and others are even audio-sensorial ones!
The visual properties are as follow:
title
, body
, icon
, image
and badge
will all look different depending on the operating system you are using. Here is what it looks like on Windows 10:
Now let’s take a look at our more programmatic properties (feel free to criticize my classification I’m not super happy with it either 🤓).
We’re not going to explore what you can do with the metadata here. But here they are for good measure:
Now that we sort of know what is in a notification, let’s take a look on how we can create it:
DONE! It is pretty easy. But two important things:
"title": "Picture Time"
. That is because the title can only be set in the notification constructor which we set as “Stop Working”.Here’s a short snippet for dealing with asking for permission:
You can also get the notifications status by running:
Actions are little buttons at the bottom of your notifications. We can define them as followed:
However you can’t just add actions to your notification options as we did before. We can only register them in a service worker:
And there you are you have notifications which can also work offline!
Inside of our Service Worker we can register event listeners to see how our users interact with our notifications:
And there you are! I hope you learned a few tricks and will develop some fancy websites/web apps with a native feel ✨.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!