Pierwsze kroki z interfejsem Notification API

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

• Prośba o zezwolenie na wysyłanie powiadomień
• Wysyłanie powiadomień
• Eksperymentowanie z opcjami powiadomień

Zapoznaj się z aplikacją początkową i jej kodem

Zacznij od sprawdzenia aplikacji na żywo na nowej karcie Chrome:

1. Aby otworzyć Narzędzia dla programistów, naciśnij Ctrl+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 aktywnej aplikacji: Request permission to send notifications (Poproś o zezwolenie na wysyłanie powiadomień) i Send a notification (Wyślij powiadomienie).

   Konsola wyświetla komunikaty „TODO” z kilku szkieletów funkcji: requestPermission i sendNotification. Oto funkcje, które zaimplementujesz w tym ćwiczeniu.

Przyjrzyjmy się teraz kodowi przykładowej aplikacji. Otwórz public/index.js i przyjrzyj się ważnym częściom istniejącego kodu:

• Funkcja showPermission korzysta z interfejsu Notifications API, aby uzyskać 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;
  }
  

  Przed przesłaniem prośby o uprawnienia stan uprawnień to default. W stanie uprawnień default witryna musi poprosić o zezwolenie na wysyłanie powiadomień i je uzyskać.

• Funkcja requestPermission to funkcja zastępcza:

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

  W następnym kroku zaimplementujesz tę funkcję.

• Funkcja sendNotification to funkcja zastępcza:

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

  Tę funkcję wdrożysz po wdrożeniu funkcji requestPermission.

• Słuchacz zdarzeń 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śba o zezwolenie na wysyłanie powiadomień

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

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

1. Zastąp funkcję 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 odpowiedzieć na wyskakujące okienko z prośbą o zezwolenie na jeden z 3 sposobów.

Jeśli użytkownik kliknie Zezwól:

• Notification.permission ma wartość granted.

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

• Kolejne wywołania Notification.requestPermission będą rozwiązywane jako granted bez wyskakującego okienka.

Jeśli użytkownik kliknie Zablokuj:

• Notification.permission ma wartość denied.

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

• Kolejne wywołania Notification.requestPermission będą rozwiązywane jako 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ć użytkownikowi powiadomień.

• Kolejne wywołania funkcji Notification.requestPermission spowodują wyświetlenie większej liczby wyskakujących okien.

  Jeśli jednak użytkownik nadal będzie zamykać wyskakujące okienka, przeglądarka może zablokować witrynę, ustawiając Notification.permission na denied. W takim przypadku użytkownikowi nie będą wyświetlane ani wyskakujące okienka z prośbą o zezwolenie, ani powiadomienia.

  W momencie pisania tego artykułu zachowanie przeglądarki w odpowiedzi na odrzucone wyskakujące okienka z prośbą o zezwolenie na powiadomienia może się jeszcze zmienić. Najlepszym sposobem na to jest zawsze proszenie o zezwolenie na powiadomienia w odpowiedzi na jakąś interakcję zainicjowaną przez użytkownika. Dzięki temu będzie on wiedział, czego się spodziewać i co się dzieje.

Wysłano powiadomienie

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

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

1. Zastąp w pliku index.js funkcję 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ę stanie, gdy wyślesz powiadomienia bez pozwolenia?

W tym kroku dodasz kilka wierszy kodu, które pozwolą Ci zobaczyć, co się stanie, gdy spróbujesz wyświetlić powiadomienie bez zgody użytkownika.

• W pliku public/index.js na końcu funkcji sendNotification zdefiniuj procedurę obsługi zdarzeń onerror nowego powiadomienia:

// 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 zobaczyć błąd dotyczący uprawnień do powiadomień:

1. Kliknij ikonę kłódki obok paska adresu URL Chrome i przywróć domyślne ustawienie uprawnień witryny do wysyłania powiadomień.

2. Kliknij Poproś o pozwolenie na wysyłanie powiadomień, a następnie w wyskakującym okienku wybierz Zablokuj.

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

Opcjonalnie możesz ponownie zresetować uprawnienia witryny do wysyłania powiadomień. Możesz kilka razy poprosić o uprawnienia i zamknąć wyskakujące okienko, aby sprawdzić, co się stanie.

Eksperymentowanie z opcjami powiadomień

Znasz już podstawy dotyczące wysyłania prośby o zezwolenie i wysyłania powiadomień. Dowiedziałeś się też, jaki wpływ mają odpowiedzi użytkowników na możliwość wyświetlania powiadomień przez aplikację.

Teraz podczas tworzenia powiadomienia możesz eksperymentować z wieloma opcjami wizualnymi i opcjami danych. Pełny zestaw dostępnych opcji znajdziesz poniżej. (Więcej informacji o tych opcjach znajdziesz w dokumentacji powiadomień w MDN).

Pamiętaj, że przeglądarki i urządzenia implementują te opcje w różny sposób, dlatego warto przetestować powiadomienia na różnych platformach, aby zobaczyć, 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.

Aby dowiedzieć się więcej, zapoznaj się z następnymi ćwiczeniami z programowania w tej serii: Obsługa powiadomień za pomocą service workera.