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ń

Browser Support

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

Source

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.

Odpowiedź 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 dokonywania 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 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.