February 26, 2017
Welcome! Today I will focus on notifications in JavaScript. Let’s go!
I want my pomodoro timer to run in the background - I decided my website will be one of many pinned tabs in my Chrome. But this statement makes some complications - how do I know that my pomodoro ends? How do I tick if this 25 minutes was good or bad? I need a way to tell a user that it is time for a break. For this task, I will use notifications.
JavaScript notification standard says that:
A notification is an abstract representation of something that happened, such as the delivery of a message.
Cool! Exactly what I need - let’s jump into the code.
At first, you have to ask a user for permission to display notifications:
let notificationPermission = false;
Notification.requestPermission().then((result) => {
if (result === 'granted') {
notificationPermission = true;
}
});
At the beginning I setup variable that will be a flag for my code to
know if user grants permission to display notifications. This is done
below. Notification.requestPermission()
returns promise so I call
then
and if result
is granted I set a flag variable to be true.
I want my notifications to be displayed when my time ends:
function displayNotification() {
if (!notificationPermission) return;
const notification = new Notification("Time's up!", {
icon: 'stopwatch.png',
});
notification.addEventListener('click', () => {
window.focus();
});
}
function timer(seconds) {
// rest of the code
if (secondsLeft < 0) {
// rest of the if
displayNotification();
}
}
In displayNotification
I check if user granted permission to see
notification, if not the function terminates. Then I create new
notification with stopwatch icon and Time's up!
text. notification
can have event listener attached to click
event so I did that so when
user clicks notification it will switch him/ her to pomodoro timer tab.
This is how my notification looks like:
That’s all for today blog post! Feel free to comment. The next thing I want to tackle is 5 and 15 min breaks between pomodoros.
Repo with this code is available on github.
Special thanks to Kasia for being an editor for this post. Thank you.