Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum dla Lipiec 23rd, 2012

Web Notifications

Autor: Piotr Karpiuk o 23. lipca 2012

Opisywany dziś mechanizm powiadomień pozwala aplikacji webowej wyświetlić komunikat systemu operacyjnego, niezależnie od tego która zakładka przeglądarki jest aktywna, i w sposób nieprzerywający aktualnie wykonywanych przez użytkownika działań. Może to być zatem powiadomienie o przychodzącej poczcie, komunikat od kolegi z webowego komunikatora itp. Powiadomienie może być zamknięte z poziomu JavaScriptu lub ręcznie przez użytkownika. Nade wszystko jednak, aby dana aplikacja webowa w ogóle mogła wyświetlać takie powiadomienia, użytkownik musi na to jawnie przyzwolić – podobnie jak np. w sytuacji gdy aplikacja próbuje dostać się do danych geolokalizacyjnych użytkownika.

Tyle odnośnie idei, natomiast przy implementacji pojawiają się schody. Po pierwsze póki co jedynie przeglądarki oparte na WebKicie (Chrome, Safari) udostępniają ten mechanizm, po drugie specyfikacja W3C znacząco zmieniła się na tyle, że wspomniana implementacja jest już z tą specyfikacją niezgodna. Tym niemniej, ponieważ zabawka jest ciekawa a temat niezbyt obszerny, opisałem zarówno stare jak i nowe podejście.

WebKit

Powiadomienie może mieć postać tekstową (ma wtedy tytuł, może mieć ikonkę i dodatkową dłuższą treść) lub HTML (podajemy wtedy URL). Poprosić o uprawnienia do wyświetlania powiadomień możemy wyłącznie w reakcji na działanie użytkownika (np. kliknięcie na przycisku). Do obiektu reprezentującego powiadomienie można przypinać obsługę zdarzeń click, error, display i close.

        if (window.webkitNotifications) {
          document.querySelector('#show_button').addEventListener('click', function() {
            if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
              notification_test = window.webkitNotifications.createNotification(
                'icon.png', 'Notification Title', 'Notification content...');
              // albo createHTMLNotification( 'http://...' );

              notification_test.ondisplay = function() { ... };
              notification_test.show();
            } else {
              window.webkitNotifications.requestPermission();
            }
          }, false);
        }

Czytaj więcej »

Napisany w JavaScript, WWW | Brak komentarzy »