Artykuł

sxc.hu sxc.hu
sty 05 2014
0

Jak wyświetlić powiadomienie z aplikacji Web na pulpicie użytkownika?

W ostatnim czasie coraz częściej spotykamy się z powiadomieniami wysyłanymi przez określone aplikacje webowe prosto na nasz pulpit. Jeszcze jakiś czas temu tego typu rzeczy były nie tylko niewyobrażalne w kontekście samego rozwiązania tego typu problemu, ale najzwyczajniej w świecie nie były nikomu potrzebne. Dziś sprawy mają się trochę inaczej.

Przeglądarka dla wielu osób to obecnie najważniejszy program na komputerze, a na dodatek jest ona coraz częściej wykorzystywana jako swego rodzaju kontener dla aplikacji webowych. Dziś trudno mi sobie wyobrazić Chroma bez włączonej karty Gmaila, czy Doit.im który wspomaga moją produktywność za pomocą metody GTD. Obie te witryny wykorzystują API powiadomień, do informowania mnie o nowej poczcie, czy najbliższych zadaniach. Mogę robić zupełnie co innego, mogę mieć nawet zminimalizowaną przeglądarkę, ale powiadomienia i tak zadziałają.

Brzmi kusząco prawda? Też tak uważam, dlatego dziś postaram się Wam pokrótce powiedzieć, jak takie proste notyfikacje wstawić na swojej stronie tudzież webaplikacji.

Notifications API

Głównym elementem który będę opisywać w dzisiejszym tekście jest Notifications API, czyli specjalne API które pozwala na wyświetlenie powiadomień z naszej webaplikacji bezpośrednio na pulpicie użytkownika. Tego rodzaju informacje, z reguły wyświetlają się w małym okienku w prawym dolnym rogu ekranu. Niestety rzeczone rozszerzenie na razie traktowane jest jako eksperymentalne i nie jest wspierane przez wszystkie przeglądarki.

Według strony MDN obecnie z powiadomień możemy korzystać w następujących przeglądarkach:

  • Chrome, wersja 4+, istotne zmiany od wersji 22 oraz 32
  • Firefox, wersja 4.0+, istotne zmiany od wersji 22
  • Safari, wersja 6+, ale tylko na Mac OSX 10.8+

Jak widać na liście zabrakło IE, co jest swego rodzaju dość istotnym ograniczeniem, dlatego tego rodzaju technologia to wciąż bardziej ficzer.

Wykrywanie wsparcia w przeglądarce

Zgodnie z tym co pisałem w tekście o Modernizr, przed użyciem eksperymentalnego kodu, warto sprawdzić jego wsparcie w danej przeglądarce, a nie jak to się robiło przez lata samą wersję przeglądarki. Tak też czynimy również w tym przypadku:

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8" />
		<script>
			var NotifcationsTest = {
				VerifyBrowserSupport: function() {
					return ("Notification" in window);
				}
			}
			window.onload = function(){
				document.getElementById("shownotify").onclick = function(){
					if(!NotifcationsTest.VerifyBrowserSupport()){
						alert("Brak wsparcia dla Notifications API");				
					}
				};
			};
			
		</script>
  	<title>Notifications!</title>
	</head>
	<body>
		<input type="button" name="shownotify" id="shownotify" value="Pokaż powiadomienie" />
	</body>
</html>

Powyżej wstawiłem dość rozbudowaną strukturę kodu, ale tak naprawdę kluczowa jest linia 8, w której sprawdzamy czy element Notifications znajduje się w obiekcie window.

W kolejnych krokach będziemy rozbudowywać nasz obiekt oraz dodawać kolejne elementy do wywołania funkcji obsługiwanej po kliknięciu przycisku. Oczywiście w rzeczywistym przykładzie warto oszczędzić naszym użytkownikom fali nerwicy i alerty można zastąpić np. wywołaniem console.log;-)

Weryfikacja uprawnień i wyświetlanie powiadomienia

Pokonaliśmy pierwszą przeszkodę, ale to niestety nie koniec wyzwań, które stoją przed nami w obliczu próby wyświetlenia użytkownikowi powiadomienia. Kolejną potencjalną barykadą jest sam docelowy użytkownik, który musi dokonać jednorazowego zezwolenia na wyświetlanie powiadomień dla naszej aplikacji. Dla przeglądarki jednak w tym przypadku nie chodzi o konkretną podstronę, ale o domenę z której spamować będziemy użytkownika notyfikacjami na pulpicie.

Przedstawię teraz dwie funkcje, gdzie pierwsza z nich będzie odpowiedzialna za wyświetlanie powiadomień, natomiast druga z nich zweryfikuje uprawnienia i w razie możliwości wywoła tą pierwszą:

ShowNotification: function(){
	var notification = new Notification("Witaj świecie!");
},
RequestForPermissionAndShow: function(){
	// Mamy prawo wyświetlać powiadomienia
	if (Notification.permission === "granted") {
		NotifcationsTest.ShowNotification();
	}
	// Brak wsparcia w Chrome dla właściwości permission
	else if (Notification.permission !== "denied") {
		Notification.requestPermission(function (permission) {
			// Dodajemy właściwość permission do obiektu Notification
			if(!("permission" in Notification)) {
				Notification.permission = permission;
			}
			if (permission === "granted") {
				NotifcationsTest.ShowNotification();
			}
		});
	}
}

W przypadku funkcji ShowNotification, sprawa ma się całkiem prosto. W wyniku jej wywołania, najzwyczajniej w świecie tworzymy najprostsze możliwe powiadomienie, które po kliknięciu na przycisk pojawi się w prawym dolnym rogu ekranu. Ponieważ utworzona przez nas notyfikacja nie ma żadnych dodatkowych parametrów, sami musimy zadbać o jej zamknięcie. W tym przypadku nie wyświetli się również żadna kolorowa ikona, tak jak ma to miejsce np. w sytuacji gdy odbieramy nową pocztę w Gmailu.

Druga z funkcji jest już bardziej złożona. W liniach 6-8 sprawdzamy czy właściwość permission obiektu Notification ma status granted, co oznacza, że już wcześniej nadaliśmy domenie odpowiednie uprawnienia. Niestety właściwość ta nie jest domyślnie obsługiwana przez Chrome dlatego w tym przypadku zastosujemy małe obejście w dalszej części kodu.

W liniach 10-20 stosujemy konstrukcję else if, w której wykorzystujemy wspomniane wyżej obejście. Ponieważ Chrome nie implementuje statycznej właściwości permission, to my porównujemy ją z wartością denied. W przypadku gdy warunek zostanie spełniony, wywołujemy funkcję requestPermission z odpowiednim argumentem. Rzeczona funkcja jest odpowiedzialna za wyświetlanie monitu, w którym prosimy użytkownika o pozwolenie na wyświetlanie notyfikacji. Rezultat jego działania mamy w zmiennej permission, którą to możemy teraz zapisać jako właściwość obiektu Notification, w sytuacji gdy jej wcześniej tam nie było (patrz Chrome; linie 13-15).

Jeśli użytkownik zgodzi się na nasze powiadomienia, wywołujemy funkcję ShowNotification (16-18). Przy każdych kolejnych odwiedzinach, powinien zadziałać już warunek z linii 6-8.

Poniżej kod całego rozwiązania:

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8" />
		<script>
			var NotifcationsTest = {
				VerifyBrowserSupport: function() {
					return ("Notification" in window);
				},
				ShowNotification: function(){
					var notification = new Notification("Witaj świecie!");
				},
				RequestForPermissionAndShow: function(){
					// Mamy prawo wyświetlać powiadomienia
					if (Notification.permission === "granted") {
						NotifcationsTest.ShowNotification();
					}
					// Brak wsparcia w Chrome dla właściwości permission
					else if (Notification.permission !== "denied") {
						Notification.requestPermission(function (permission) {
							// Dodajemy właściwość permission do obiektu Notification
							if(!("permission" in Notification)) {
								Notification.permission = permission;
							}
							if (permission === "granted") {
								NotifcationsTest.ShowNotification();
							}
						});
					}
				}
			}
			window.onload = function(){
				document.getElementById("shownotify").onclick = function(){
					if(!NotifcationsTest.VerifyBrowserSupport()){
						alert("Brak wsparcia dla Notifications API");				
					}
					NotifcationsTest.RequestForPermissionAndShow();
				};
			};
			
		</script>
  	<title>Notifications!</title>
	</head>
	<body>
		<input type="button" name="shownotify" id="shownotify" value="Pokaż powiadomienie" />
	</body>
</html>

Pod tym linkiem, znajdziecie działający przykład.

Materiały

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus