JakubW dobie coraz większej ilości informacji, które pojawiają się w sieci, zdarza się nam przeoczyć te dotyczące bezpośrednio nas. Ile razy zdarzyło się, że mając otwartą inną zakładkę przeglądarki lub zminimalizowaną aplikację na naszym smartfonie nie zauważyliśmy, gdy ktoś wysłał do nas wiadomość lub na portalu społecznościowym pojawiła się jakaś ważna dla nas informacja. Z pomoc przychodzi nam Web Notifications.
Czym jest Web Notifications
To nic innego jak powiadomienia, które wyświetlane są na poziomie systemu. Dzięki temu rozwiązaniu, jesteśmy w stanie poinformować użytkownika, nawet gdy jego przeglądarka (lub aplikacja) działa w tle. Web Notifications jest zgodne z W3C standard i obsługiwane przez JavaScript w przeglądarce lub urządzeniu. W3C standard nie definiuje w żaden sposób jak user agent powinien je wyświetlić. Oznacza to, ze obsługa powiadomienia leży w gestii urządzenia, które je otrzymało. Warto zaznaczyć, że aby powiadomienia pokazywały się użytkownikowi, musi on najpierw wyrazić na to zgodę (przeglądarka wyświetla ostrzeżenie, które użytkownik musi zaakceptować).
Web Notifications jest coraz powszechniejsze. Wiele portali społecznościowych, takich jak Facebook, Google czy Tweeter, wykorzystuje powiadomienia, aby informować użytkownika np. gdy dostanie wiadomość lub znajomy oznaczy go na zdjęciu. Nad zastosowaniem Web Notifications nie trzeba się długo zastanawiać. Dzięki tej technologii, możemy sprawić, że użytkownicy będą częściej odwiedzać nasz serwis, ponieważ otrzymają powiadomienie o nowej treści jaką zamieściliśmy.
Web Notifications API
Tworzenie powiadomienia odbywa się przy pomocy obiektu Notification, który przyjmuje dwa parametry. Pierwszym z nich jest tytuł powiadomienia. Drugi parametr jest opcjonalny i zawiera listę ustawień (obiekt). W ustawieniach zdefiniować możemy między innymi:
- body – krótka treść powiadomienia opisująca czego ono dotyczy
- lang – kod języka powiadomienia. Wartość musi być w pełni zgodna z BCP 14 standard
- dir – “kierunek” tekstu w wiadomości. Może przyjmować trzy wartości. Domyślna auto pobierana z ustawień przeglądarki, ltr od lewej do prawej (dla języków europejskich) oraz rtl, czyli od prawej do lewej (np. dla krajów azjatyckich)
- tag – jest to swego rodzaju ID powiadomienia, dzięki któremu możemy je np. usunąć lub podmienić
- icon – adres URL do ikonki, która zostanie dołączona do powiadomienia
Znając już nieco budowę obiektu Notification, możemy przystąpić do stworzenia naszej pierwszej aplikacji, używającej WEB Notifications. Naszym celem będzie napisanie skryptu, który sprawdzi czy przeglądarka wspiera WEB Notifications, zapyta użytkownika o zgodę na wyświetlanie powiadomień oraz pozwoli nam na ich wysłanie. Do dzieła.
Zaczynamy zabawę z WEB Notifications
Na starcie stwórzmy sobie odpowiednią strukturę naszego projektu. Stwórzmy 2 katalogi. Pierwszy to js z plikiem Notify.js, w którym będzie kod naszego obiektu. Drugi img, w którym dodamy dowolny plik z ikoną (ja wybrałem losowy obrazek z http://www.flaticon.com/). W katalogu głównym tworzymy plik index.html i zaczynamy zabawę. W pliku Notify.js tworzymy obiekt, który będzie miał dwa parametry: isSupported i isGranted. Pierwszy będzie przechowywał informację o tym, czy nasza przeglądarka wspiera Notification, natomiast drugi to flaga wskazująca, czy użytkownik wyraził zgodę na otrzymywanie powiadomień z naszego serwisu. Następnie stworzymy 5 meto: init, browserSupport, getPermission, canSend oraz send. Każdą z tych metod omówię poniżej. Szkielet naszego obiektu będzie wyglądał następująco:
Notify = {
isSupported: true,
isGranted: false,
isBlocked: false,
init: function() {},
browserSupport: function() {},
getPermission: function() {},
canSend: function() {},
send: function () {}
};
Teraz czas na implementację każdej z metod. Pierwszą z nich, będzie browserSupport. Jej zadaniem będzie sprawdzenie, czy przeglądarka użytkownika wspiera Notification i ustawienie odpowiedniej wartości dla isSupported. Możemy tego dokonać sprawdzając czy Notification “znajduje się” w obiekcie window. Jeśli nie, ustawiamy wartość false dla isSupported. Cała metoda wygląda w następujący sposób:
browserSupport: function() {
if (!("Notification" in window)) {
this.isSupported = false;
}
},
Gdy wiemy już, że możemy użyć Notification, musimy poprosić użytkownika o zgodę. W tym celu w metodzie getPermission musimy sprawdzić ustawioną wartość dla isSupported (jeśli nie, to i tak nie wyświetlimy powiadomienia) oraz czy użytkownik wcześniej wyraził zgodę lub zablokował powiadomienia na naszej stronie. Do tego posłuży nam Notification.permission. Może ona przyjąć 3 wartości: granted – jeśli użytkownik wcześniej przyznał uprawnienia do wyświetlania powiadomień, blocked – jeśli nie wyraził zgody, oraz default – w przypadku gdy wcześniej nie odwiedził naszej strony lub zignorował komunikat. Po sprawdzeniu wszystkich warunków, używamy Notification.requestPermission(), aby wyświetlić prośbę o przydzielenie uprawnień. Cały kod metody wygląda następująco:
getPermission: function() {
if (this.isSupported == false) return;
if (Notification.permission === 'granted') {
this.isGranted = true;
return;
} else if (Notification.permission === 'denied') {
this.isBlocked = true;
return;
}
Notification.requestPermission();
},
Sprawdziliśmy już czy przeglądarka użytkownika wspiera powiadomienia oraz czy użytkownik pozwala na ich wyświetlenie. Teraz zaimplementujemy metodę init, która zainicjuje dwie pierwsze funkcje oraz canSend, w której sprawdzimy, czy możemy wysłać powiadomienie do użytkownika.
init: function() {
this.browserSupport();
this.getPermission();
},
canSend: function() {
if (this.isGranted == false || this.isSupported == false) {
return false;
}
return true;
}
Ostatnim co nam zostało, to stworzenie metody do wysyłania powiadomień. Send – bo o niej mowa – przyjmować będzie 4 argumenty: title, body, icon oraz time. Jej zadaniem będzie ustawienie domyślnej wartości dla parametry time, a następnie wysłanie do użytkownika powiadomienia.
send: function (title, body, icon, time) {
if (typeof(time) === 'undefined') time = 3000;
var notif = new Notification(title, {'body': body, 'icon': icon});
setTimeout(notif.close.bind(notif), time);
}
Parametr time, który domyślnie wewnątrz metody ustawiany jest na 3000, określa po jakim czasie powiadomienie zniknie automatycznie. Gdybyśmy nie wywołali close na naszej notyfikacji, wyświetlałaby się ona tak długo, aż użytkownik sam by jej nie zamknął.
Sprawdźmy to w praktyce
Stworzyliśmy już główną część naszej aplikacji. Teraz czas na dodanie do tego jakiś kod HTML, który pozwoli nam na sprawdzenie jak to działa. Stwórzmy prostą stronę z jednym przyciskiem i kodem inicjującym nasz obiekt.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WEB Notification demo</title>
</head>
<body>
<p><a class='customAlert' href="#">Pokaż domyślne powiadomienie</a></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="./js/Notify.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
Notify.init();
$("a.customAlert").click(function(event) {
event.preventDefault();
Notify.send('Hello world', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', '/image/transaction.png');
});
});
</script>
</body>
</html>
Powyższy kod zawiera prostą obsługę przycisku przy pomocy jQuery oraz inicjuje nasz obiekt Notify. Teraz wystarczy w odpowiednim miejscu użyć metody send, aby wyświetlić powiadomienie dla użytkownika.
Jeśli nie chcesz się męczyć z kopiowaniem tego przykładu, skorzystaj z gotowego repozytorium git. Działający przykład mamy tutaj.
Podsumowanie
Ten artykuł stanowi wprowadzenie do technologii jaką jest WEB Notifications. Wsparcie oraz popularność jaką zyskała w ostatnich latach, pokazuje, że jest to przydatne narzędzie, które warto znać i stosować. Coraz większa ilość portali oraz aplikacji zaczyna jej używać.
Jakub
