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ń

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 .

Glitch powinien otworzyć się w nowej karcie Chrome:

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ń i Wyślij powiadomienie.

   Konsolę wypisuje komunikaty „TODO” z kilku szablonów funkcji: requestPermission i sendNotification. 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: title i options. 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.