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

Zmodyfikuj przykładową aplikację i wyświetl ją w nowej karcie

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.