Ta strona została przetłumaczona przez Cloud Translation API.

Pierwsze kroki z interfejsem Notification API

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

Poproś o zgodę na wysyłanie powiadomień
Wysyłaj powiadomienia
Eksperymentuj z opcjami powiadomień

Obsługa przeglądarek

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

Powiadomienia są automatycznie blokowane w osadzonej aplikacji Glitch, więc nie możesz wyświetlić podglądu aplikacji na tej stronie. Zamiast tego wykonaj te czynności:

Kliknij Remiksuj, by edytować, aby umożliwić edytowanie projektu.
Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran .

Błąd powinien się otworzyć w nowej karcie Chrome:

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

W trakcie ćwiczeń z programowania wprowadź zmiany w kodzie zawartym w umieszczonym na tej stronie Usterce. Aby zobaczyć zmiany, odśwież nową kartę za pomocą opublikowanej aplikacji.

Poznaj aplikację początkową i jej kod

Najpierw sprawdź aktywną aplikację na nowej karcie Chrome:

Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie. Kliknij kartę Konsola.

W konsoli powinien się wyświetlić ten komunikat:
```
Notification permission is default
```
Jeśli nie wiesz, co to znaczy, nie martw się – wkrótce wszystko się ujawni!
Kliknij przyciski w działającej aplikacji: Poproś o uprawnienia do wysyłania powiadomień i Wyślij powiadomienie.

Konsola wyświetla komunikaty „TODO” z kilku wycinków funkcji: requestPermission i sendNotification. Poniżej znajdziesz funkcje, które wdrożysz w ramach tego ćwiczenia z programowania.

Przyjrzyjmy się teraz kodowi przykładowej aplikacji w umieszczonej na tej stronie Usterce. Otwórz plik public/index.js i zapoznaj się z najważniejszymi częściami istniejącego kodu:

Funkcja showPermission korzysta z interfejsu Notification API, aby pobrać obecny stan uprawnień witryny i zarejestrować je 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 wysłaniem prośby o uprawnienia stan uprawnienia to default. W stanie uprawnienia default witryna musi prosić o zgodę i uzyskać odpowiednie uprawnienia, zanim będzie mogła wysyłać powiadomienia.

Funkcja requestPermission jest namiastką:

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

Zaimplementujesz tę funkcję w następnym kroku.

Funkcja sendNotification jest namiastką:

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

Zaimplementujesz tę funkcję po zaimplementowaniu funkcji requestPermission.

Detektor zdarzeń window.onload wywołuje funkcję showPermission podczas wczytywania strony, wyświetlając bieżący stan uprawnień w konsoli i na stronie:
```
window.onload = () => { showPermission(); };
```

Poproś o zgodę na wysyłanie powiadomień

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

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

Uwaga: Notification.requestPermission() zwraca wartość Promise. Aby wykonać działania po rozwiązaniu tej obietnicy, musisz umieścić je w funkcji i przekazać tę funkcję jako parametr do jej metody then(). js Notification.requestPermission().then((result) => { /* do stuff */ }); Więcej informacji o działaniu obietnic znajdziesz w dokumentacji usługi Promise w MDN.

Zastąp następnik 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);
    });
}

Załaduj ponownie kartę Chrome, na której wyświetlasz aktywną aplikację.
W interfejsie aplikacji kliknij Poproś o uprawnienia do wysyłania powiadomień. Pojawi się wyskakujące okienko.

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

Odpowiedź użytkownika	Stan zgody na wyświetlanie powiadomień
Użytkownik klika Zezwól.	`granted`
Użytkownik klika 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 z numerem Notification.requestPermission będą przekierowywane do 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żytkownikom powiadomień.
Kolejne wywołania z numerem Notification.requestPermission będą przekierowywane do denied bez wyskakującego okienka.

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

Notification.permission pozostaje default.
Witryna nie będzie mogła wyświetlać powiadomień użytkownikowi.
Kolejne wywołania Notification.requestPermission będą powodować wyświetlenie większej liczby wyskakujących okienek.

Jeśli jednak użytkownik nadal będzie zamykać wyskakujące okienka, przeglądarka może zablokować stronę, ustawiając Notification.permission na denied. Nie będą wtedy wyświetlane wyskakujące okienka ani powiadomienia z prośbą o uprawnienia.

W momencie tworzenia tego tekstu działanie przeglądarki w odpowiedzi na wyskakujące okienka z prośbą o zgodę na odrzucenie powiadomień może ulec zmianie. Najlepszym sposobem na rozwiązanie tego problemu jest prośba o zgodę na wyświetlanie powiadomień zawsze w odpowiedzi na zainicjowaną przez użytkownika czynność. Dzięki temu użytkownik się spodziewa i wie, co się dzieje.

Wysłano powiadomienie

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

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

Zastąp następnik funkcji sendNotification w pliku index.js 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ń.
Odśwież kartę Chrome, na której wyświetlasz aplikację, 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, dzięki którym zobaczysz, co się stanie, gdy spróbujesz wyświetlić powiadomienie bez zgody użytkownika.

W public/index.js na końcu funkcji sendNotification zdefiniuj moduł obsługi zdarzeń onerror w nowym powiadomieniu:

// 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 braku zgody na wyświetlanie powiadomień:

Kliknij ikonę blokady obok paska adresu URL przeglądarki Chrome i przywróć domyślne ustawienie uprawnień do wyświetlania powiadomień.
Kliknij Poproś o uprawnienia do wysyłania powiadomień i tym razem wybierz Zablokuj w wyskakującym okienku.
Kliknij Wyślij powiadomienie i zobacz, co się stanie. Tekst błędu (Could not send notification) i obiekt zdarzenia są logowane w konsoli.

Opcjonalnie zresetuj dla witryny uprawnienia dotyczące powiadomień. Możesz kilka razy poprosić o uprawnienia i zamknąć wyskakujące okienko, aby sprawdzić, co się stanie.

Eksperymentuj z opcjami powiadomień

Omówiliśmy już podstawy wysyłania próśb o zgodę i wysyłania powiadomień. Wiesz też, jaki wpływ na możliwość wyświetlania powiadomień przez aplikację mają odpowiedzi użytkowników.

Teraz podczas tworzenia powiadomienia możesz eksperymentować z różnymi opcjami wizualnymi i danymi. Pełną listę dostępnych opcji znajdziesz poniżej. (Więcej informacji o tych opcjach znajdziesz w dokumentacji dotyczącej 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 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 artykule Generator powiadomień Petera Beverloo.

Jeśli utkniesz, poniżej znajdziesz ukończony kod tego ćwiczenia z programowania: glitch.com/edit/#!/codelab-notifications-get-started-completed.

Aby dowiedzieć się więcej, zapoznaj się z następnym ćwiczeniem w programowaniu z tej serii – Obsługa powiadomień za pomocą skryptu service worker.