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:
const notificationsProperties = {
"title": "Picture Time",
"body": "Time to look at some random pictures",
"icon": "https://picsum.photos/200",
"image": "https://picsum.photos/400",
// A badge is an image we display
// when there is not enough space to display the notification
"badge": "https://picsum.photos/300/200",
// Direction decides if the notification goes
// from left to right, right to left or let the browser decide
"dir": "ltr",
// As part of the direct user experience we also have
// Audio- ....
"silent": ""
// ... sensorial
"vibrate": [200, 100, 200],
}
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 🤓).
{
//...
onshow: () => console.log("We are showing a Notification"),
onerror: () => console.log("There was an error showing a Notification"),
onclose: () => console.log("Closing the Notification"),
// Informs the user if a notification replaced a previous one
renotify: null,
// If set to true the notification will stick to the screen until the user interacts with it
requireInteraction: true,
// We'll get into actions later
actions: []
}
We’re not going to explore what you can do with the metadata here. But here they are for good measure:
{
"lang": "",
"tag": "",
"timestamp": 1581390179474,
"data": null
}
Now that we sort of know what is in a notification, let’s take a look on how we can create it:
const notification = new Notification('Stop Working', notificationsProperties);
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:
// Checking if we already have permission to send notifications
const notificationsAllowed = await navigator.permissions.query({name: 'notifications'});
if (notificationsAllowed.state !== 'granted'){
// Requesting permission
const permission = await Notification.requestPermission();
// If the permission is not granted the application won't work
if (permission !== 'granted') {
// I am a very sour developer so I replace all of my page with an error message
// DON'T DO LIKE ME AND BE A FRIENDLY DEV INSTEAD!
document.body.innerHTML = '<h1> This app can\'t work without notification bye </h1>';
return;
}
}
// Then you can continue with your notification driven code
You can also get the notifications status by running:
const notificationsAllowed = Notification.permission;
Actions are little buttons at the bottom of your notifications. We can define them as followed:
actions: [{
title: 'Show More',
action: () => {console.log('code to show more images');}
},{
title: 'Close',
action: () => { console.log('Bye bye');}
}]
However you can’t just add actions to your notification options as we did before. We can only register them in a service worker:
if('serviceWorker' in navigator) {
// First we need to register our service worker
navigator.serviceWorker.register('serviceWorker.js', { scope: './' })
.then(async () => {
//... check if notifications are allowed
// ... define notificationsProperties with actions
const serviceWorkerRegistration = navigator.serviceWorker.ready
// This will show the notification with the actions
serviceWorkerRegistration.showNotification('Stop Working', notificationsProperties);
});
}
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:
self.addEventListener('notificationclick', (event) => {
console.log('our user clicked on the notification!')
// Send user data analytics 🔥 🔥 🔥
}, false);
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.