Pierwsze kroki z interfejsem Notification API

W tym ćwiczeniu z programowania użyjesz podstawowych funkcji interfejsu Notifications API, aby:

  • Proś o zgodę na wysyłanie powiadomień
  • Wysyłanie powiadomień
  • Eksperymentowanie z opcjami powiadomień

Obsługa przeglądarek

  • Chrome: 20.
  • Edge: 14.
  • Firefox: 22.
  • Safari: 7.

Źródło

Powiadomienia są automatycznie blokowane w wbudowanej aplikacji Glitch, więc nie będziesz mieć możliwości wyświetlenia podglądu aplikacji na tej stronie. Zamiast tego:

  1. Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
  2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran pełny ekran.

Glitch powinien otworzyć się w nowej karcie Chrome:

Zrzut ekranu pokazujący zremiksowaną aplikację na żywo w nowej karcie

W trakcie pracy z tym ćwiczeniem wprowadzaj zmiany w kodzie w osadzonym Glitchu na tej stronie. Odśwież nową kartę z aplikacją na żywo, aby zobaczyć zmiany.

Poznaj aplikację startową i jej kod

Najpierw sprawdź aplikację na żywo na nowej karcie Chrome:

  1. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu). Kliknij kartę Konsola.

    W Konsoli powinien wyświetlić się ten komunikat:

    Notification permission is default

    Jeśli nie wiesz, co to oznacza, nie martw się. Wkrótce wszystko się wyjaśni.

  2. Kliknij przyciski w aplikacji na żywo: Poproś o zezwolenie na wysyłanie powiadomieńWyślij powiadomienie.

    Konsolę wypisuje komunikaty „TODO” z kilku szablonów funkcji: requestPermissionsendNotification. Oto funkcje, które zaimplementujesz w tym ćwiczeniu.

Teraz przyjrzyjmy się kodom przykładowej aplikacji w osadzonym na tej stronie Glitchu. Otwórz public/index.js i przyjrzyj się niektórym ważnym częściom dotychczasowego kodu:

  • Funkcja showPermission korzysta z interfejsu Notifications API, aby pobrać bieżący stan uprawnień witryny i zapisać go w konsoli:

    // Print current permission state to console;
    // update onscreen message.
    function showPermission() {
      let permission
    = Notification.permission;
      console
    .log('Notification permission is ' + permission);
      let p
    = document.getElementById('permission');
      p
    .textContent = 'Notification permission is ' + permission;
    }

    Zanim poprosisz o uprawnienia, ich stan to default. W stanie uprawnień default witryna musi poprosić o uprawnienia i otrzymać je, zanim będzie mogła wysyłać powiadomienia.

  • Funkcja requestPermission jest elementem zastępczym:

    // Use the Notification API to request permission to send notifications.
    function requestPermission() {
      console
    .log('TODO: Implement requestPermission()');
    }

    W kolejnym kroku zaimplementujesz tę funkcję.

  • Funkcja sendNotification jest elementem zastępczym:

    // Use the Notification constructor to create and send a new Notification.
    function sendNotification() {
      console
    .log('TODO: Implement sendNotification()');
    }

    Wprowadzisz tę funkcję po wdrożeniu requestPermission.

  • Listener zdarzenia window.onload wywołuje funkcję showPermission podczas wczytywania strony, wyświetlając w konsoli i na stronie bieżący stan uprawnień:

    window.onload = () => { showPermission(); };

Proś o zgodę na wysyłanie powiadomień

W tym kroku dodasz funkcję, która poprosi użytkownika o zezwolenie na wysyłanie powiadomień.

Użyjesz metody Notification.requestPermission(), aby wyświetlić użytkownikowi wyskakujące okienko z prośbą o zezwolenie na wyświetlanie powiadomień z Twojej witryny lub ich blokowanie.

  1. Zastąp szablon funkcji requestPermission w pliku public/index.js tym kodem:

    // Use the Notification API to request permission to send notifications.
    function requestPermission() {
     
    Notification.requestPermission()
       
    .then((permission) => {
          console
    .log('Promise resolved: ' + permission);
          showPermission
    ();
       
    })
       
    .catch((error) => {
          console
    .log('Promise was rejected');
          console
    .log(error);
       
    });
    }
  2. Odśwież kartę Chrome, na której wyświetlasz aplikację na żywo.

  3. W interfejsie aplikacji na żywo kliknij Poproś o zezwolenie na wysyłanie powiadomień. Pojawi się wyskakujące okienko.

Użytkownik może zareagować na wyskakujące okienko z prośbą o zgodę na 3 sposoby.

Reakcja użytkownika Stan zgody na wyświetlanie powiadomień
Użytkownik wybiera Zezwól granted
Użytkownik wybiera Zablokuj. denied
Użytkownik zamyka wyskakujące okienko bez dokonania wyboru default

Jeśli użytkownik kliknie Zezwól:

  • Notification.permission ma wartość granted.

  • Strona będzie mogła wyświetlać powiadomienia.

  • Kolejne wywołania funkcji Notification.requestPermission będą przekierowywane do funkcji granted bez wyskakującego okienka.

Jeśli użytkownik kliknie Zablokuj:

  • Notification.permission ma wartość denied.

  • Witryna nie będzie mogła wyświetlać powiadomień użytkownikowi.

  • Kolejne wywołania funkcji Notification.requestPermission będą przekierowywane do funkcji denied bez wyskakującego okienka.

Jeśli użytkownik zamknie wyskakujące okienko:

  • Notification.permission pozostaje default.

  • Witryna nie będzie mogła wyświetlać powiadomień użytkownikowi.

  • Kolejne wywołania funkcji Notification.requestPermission będą powodować wyświetlanie kolejnych wyskakujących okienek.

    Jeśli jednak użytkownik będzie nadal odrzucać wyskakujące okienka, przeglądarka może zablokować witrynę, ustawiając wartość Notification.permission na denied. W takim przypadku użytkownik nie widzi ani wyskakujących okienek z prośbą o uprawnienia, ani powiadomień.

    W momencie pisania tego tekstu zachowanie przeglądarki w reakcji na odrzucone powiadomienia z prośbą o uprawnienia może ulec zmianie. Najlepszym sposobem na rozwiązanie tego problemu jest zawsze proszenie o pozwolenie na wysyłanie powiadomień w odpowiedzi na interakcję zainicjowaną przez użytkownika, aby był on na nie przygotowany i wiedział, co się dzieje.

Wysłano powiadomienie

W tym kroku wyślij powiadomienie do użytkownika.

Aby utworzyć nowe powiadomienie i spróbować je wyświetlić, użyjesz konstruktora Notification. Jeśli stan uprawnień to granted, wyświetli się powiadomienie.

  1. Zastąp w pliku index.js szablon funkcji sendNotification tym kodem:

    // Use the Notification constructor to create and send a new Notification.
    function sendNotification() {
      let title
    = 'Test';
      let options
    = {
        body
    : 'Test body',
       
    // Other options can go here
     
    };
      console
    .log('Creating new notification');
      let notification
    = new Notification(title, options);
    }

    Konstruktor Notification przyjmuje 2 parametry: titleoptions. options to obiekt z właściwościami reprezentującymi ustawienia wizualne i dane, które możesz uwzględnić w powiadomieniu. Więcej informacji znajdziesz w dokumentacji MDN dotyczącej parametrów powiadomień.

  2. Odśwież kartę Chrome, na której wyświetlasz aplikację na żywo, i kliknij przycisk Wyślij powiadomienie. Powinno pojawić się powiadomienie z tekstem Test body.

Co się dzieje, gdy wysyłasz powiadomienia bez zgody?

W tym kroku dodasz kilka linii kodu, dzięki którym zobaczysz, co się dzieje, gdy spróbujesz wyświetlić powiadomienie bez zgody użytkownika.

  • W pliku public/index.js na końcu funkcji sendNotification zdefiniuj nowy obciążnik zdarzenia onerror:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title
= 'Test';
  let options
= {
    body
: 'Test body',
   
// Other options can go here
 
};
  console
.log('Creating new notification');
  let notification
= new Notification(title, options);
  notification
.onerror = (event) => {
    console
.log('Could not send notification');
    console
.log(event);
 
};
}

Aby sprawdzić, czy wystąpił błąd związany z uprawnieniami powiadomień:

  1. Kliknij ikonę kłódki obok paska adresu w Chrome i przywróć ustawienie uprawnień do wysyłania powiadomień do wartości domyślnej.

  2. Kliknij Poproś o pozwolenie na wysyłanie powiadomień, a tym razem w wyskakującym okienku kliknij Zablokuj.

  3. Kliknij Wyślij powiadomienie i zobacz, co się stanie. Tekst błędu (Could not send notification) i obiekt zdarzenia są rejestrowane w konsoli.

Opcjonalnie możesz ponownie zresetować uprawnienia do powiadomień. Aby sprawdzić, co się stanie, możesz kilkakrotnie poprosić o uprawnienia i zamknąć wyskakujące okienko.

Eksperymentowanie z opcjami powiadomień

Znasz już podstawy dotyczące proszenia o uprawnienia i wysyłania powiadomień. Zobaczysz też, jaki wpływ na wyświetlanie powiadomień przez aplikację mają odpowiedzi użytkowników.

Możesz teraz eksperymentować z wielu opcjami wizualnymi i danymi dostępnymi podczas tworzenia powiadomienia. Poniżej znajdziesz pełną listę dostępnych opcji. (więcej informacji o tych opcjach znajdziesz w dokumentacji powiadomień na stronie MDN).

Pamiętaj, że przeglądarki i urządzenia implementują te opcje na różne sposoby, dlatego warto przetestować powiadomienia na różnych platformach, aby sprawdzić, jak wyglądają.

let options = {
  dir
: 'auto',              // Text direction
  lang
: 'en-US',            // A language tag
  badge
: '/orange-cat.png', // Display when insufficient room
  body
: 'Hello World',      // Body text
  tag
: 'mytag',             // Tag for categorization
  icon
: '/line-cat.png',    // To display in the notification
  image
: '/orange-cat.png', // To display in the notification
  data
: {                   // Arbitrary data; any data type
    cheese
: 'I like cheese',
    pizza
: 'Excellent cheese delivery mechanism',
    arbitrary
: {
      faveNumber
: 42,
      myBool
: true
   
}},
  vibrate
: [200, 100, 200], // Vibration pattern for hardware
  renotify
: false,          // Notify if replaced? Default false
  requireInteraction
: false,// Active until click? Default false
 
/*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */

}

Więcej pomysłów znajdziesz w Generatorze powiadomień Petera Beverloo.

Jeśli utknąłeś/utkniesz, oto gotowy kod do tego ćwiczenia: glitch.com/edit/#!/codelab-notifications-get-started-completed

Aby dowiedzieć się więcej, zapoznaj się z ćwiczeniem z programowania Obsługa powiadomień za pomocą workera usługi, które jest następnym w tej serii.