Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Web Notifications

Autor: Piotr Karpiuk o poniedziałek 23. Lipiec 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);
        }

W3C

Najnowsza specyfikacja pozwala powiadomieniu oprócz tytułu, treści i ikonki przypisać również tag. Jeśli system wyświetla już powiadomienie o danym tagu, to żądanie wyświetlenia drugiego powiadomienia o tym samym tagu zastąpi pierwsze powiadomienie drugim. Poza tym jeśli daną aplikację webową uruchomimy w wielu zakładkach, to mamy pewność że nawet jeśli kilka zakładek naraz każe wyświetlić powiadomienie z tym samym tagiem, to użytkownik zobaczy tylko jedno z tych powiadomień.

Trochę inny jest sposób tworzenia i obsługi powiadomień:

        new Notification("Meeting about to begin",
                 { iconUrl: "calendar.gif",
                   body: "Room 101",
                   tag: "calendar",
                   onclose: function() { ... }
                 });

Tutaj również potrzebne jest pozwolenie użytkownika, o które można poprosić w taki sposób:

        Notification.requestPermission( callback );

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>