Pokazywanie powiadomień jest przydatne w wielu sytuacjach – idealnym przykładem są czaty, gdzie w oczekiwaniu na odpowiedź drugiej strony możemy zająć się czymś innym niż gapieniem się w ekran
Dodatkowo, w przeglądarkach opartych na Chromium powiadomienia wyglądają i zachowują się jak notyfikacje systemowe, co dodatkowo podnosi ich atrakcyjność i przyciąga uwagę bardziej niż zwykłe powiadomienia przeglądarkowe. Na Windows 10 powiadomienie takie odtwarza dźwięk, dzięki czemu będzie łatwiej zauważone przez użytkownika.
Wyświetlanie powiadomień
W jakim momencie można wyświetlać użytkownikowi powiadomienia?
W jakich sytuacjach notyfikacje się przydadzą? Na przykład wtedy, gdy chcemy przypomnieć użytkownikowi o tym, że ma w naszej aplikacji jakieś niedokończone sprawy. Możemy wyświetlać mu powiadomienie, gdy opuszcza stronę.
Pamiętaj, by w rzeczywistych implementacjach nie nadużywać wyświetlania powiadomień – jeżeli zdenerwujesz użytkownika spamem wyłączy otrzymywanie powiadomień dla Twojej aplikacji, przez co przykładowo nie dasz rady informować go o nowych ofertach.
Mając przycisk który kliknięty wyświetli monit z pytaniem o pozwolenie na wyświetlenie powiadomienia:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<buttonid="allow">
Allow permission to show notifications
</button>
<button id="allow">
Allow permission to show notifications
</button>
<button id="allow">
Allow permission to show notifications
</button>
Stwórzmy kod który sprawdzi czy jest pozwolenie na pokazanie powiadomienia a jeśli nie podepnie się pod przycisk:
let timeout = null;
let leaveNotification = null;
const showNotification = () => {
if (document.visibilityState === "visible") {
clearTimeout(timeout);
timeout = null;
leaveNotification?.close();
leaveNotification = null;
}
else {
timeout = setTimeout(() => {
leaveNotification = new Notification('You have items in cart', { body: 'Please come back and buy our products!' });
}, 3000);
}
};
const attachPageLeaveListener = () => {
document.addEventListener('visibilitychange', showNotification);
}
let timeout = null;
let leaveNotification = null;
const showNotification = () => {
if (document.visibilityState === "visible") {
clearTimeout(timeout);
timeout = null;
leaveNotification?.close();
leaveNotification = null;
}
else {
timeout = setTimeout(() => {
leaveNotification = new Notification('You have items in cart', { body: 'Please come back and buy our products!' });
}, 3000);
}
};
const attachPageLeaveListener = () => {
document.addEventListener('visibilitychange', showNotification);
}
Dzięki eventowi visibilityChange możemy zdetektować, czy użytkownik opuścił naszą stronę. Czekamy wtedy 3 sekundy, jeśli w tym czasie nie powróci na stronę wyświetlam powiadomienie. Jeśli powróci na stronę, anulujemy oczekiwanie i usuwamy powiadomienie jeśli istnieje.
Jak nie być natrętnym z wyświetlaniem powiadomień?
W jaki sposób więc nie narzucać się użytkownikowi? Jednym ze sposobów jest grupowanie powiadomień. Wtedy, nawet jeżeli nasza aplikacja pokazuje powiadomienie w jakiejś sprawie, nowa notyfikacja zastępuje starą. Bez grupowania widoczne są wszystkie, co może przytłoczyć użytkownika.
Grupowanie notyfikacji odbywa się za pomocą parametru tag. Stwórzmy prosty select do wybierania taga powiadomienia i przyciskiem który je pokaże:
newNotification(`Notification ${notificationCounters[tag]}`, { body: tag, tag })
});
const notificationCounters = {};
document.querySelector('#show-tagged').addEventListener('click', () => {
const tag = document.querySelector('#tag').value;
notificationCounters[tag] = notificationCounters[tag]? notificationCounters[tag] + 1 : 1;
new Notification(`Notification ${notificationCounters[tag]}`, { body: tag, tag })
});
const notificationCounters = {};
document.querySelector('#show-tagged').addEventListener('click', () => {
const tag = document.querySelector('#tag').value;
notificationCounters[tag] = notificationCounters[tag]? notificationCounters[tag] + 1 : 1;
new Notification(`Notification ${notificationCounters[tag]}`, { body: tag, tag })
});
Jako tag pobieramy wartość wybraną za pomocą selecta. Powiadomienie które jest wyświetlane zawiera licznik powiadomień wyświetlonych z danym tagiem. W miarę jak będziesz klikał po przykładzie, licznik będzie miał coraz większą wartość – ale w powiadomieniach będzie ich tylko tyle, ile różnych tagów wybrałeś, czyli maksymalnie trzy:
W przypadku ze screena tag pierwszy został wybrałem 6 razy, tag drugi 14 a tag trzeci 9 razy. Gdyby nie było tagów zamiast 3 powiadomień, na liście byłoby 29 powiadomień. Taki natłok denerwowałby użytkowników oraz powodował że jakieś ważne powiadomienie z innego źródła nie zostanie przez użytkownika zauważone.
Powiadomienia wyświetlane za pomocą Notifcations API mają oczywiście znacznie więcej parametrów niż te opisane w artykule. Można znaleźć również znacznie więcej zastosowań – odpowiednia implementacja otwiera wiele nowych możliwości interakcji z użytkownikiem. Pamiętać jednak musimy, by nie być natrętni – ponieważ powiadomienia od nas mogą zostać potraktowane tak samo, jak spam na mailu.