Pierwsze kroki z interfejsem Notification API

W ramach tego ćwiczenia w Codelabs wykorzystasz podstawowe funkcje Powiadomienia API:

  • Poproś o zgodę na wysyłanie powiadomień
  • Wyślij powiadomienia
  • Eksperymentuj z opcjami powiadomień

Obsługa przeglądarek

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

Źródło

Powiadomienia z umieszczonej aplikacji Glitch są automatycznie blokowane, więc nie możesz wyświetlić podglądu aplikacji na tej stronie. Oto co musisz zrobić:

  1. Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
  2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran pełny ekran

Usterka powinna się otworzyć w nowej karcie Chrome:

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

Podczas wykonywania tych ćwiczeń w programie wprowadź zmiany w kodzie w umieszczonym na tej stronie glitchu. Aby zobaczyć zmiany, odśwież nową kartę w aplikacji, która jest aktywna w sieci.

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

Zacznij od zapoznania się z aktywną aplikacją w nowej karcie Chrome:

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

    W konsoli powinien pojawić się ten komunikat:

    Notification permission is default
    

    Nie martw się, jeśli nie wiesz, co to znaczy. wszystko się wkrótce ujawni!

  2. Kliknij przyciski w aplikacji: Poproś o uprawnienia do wysyłania powiadomień i Wyślij powiadomienie.

    Konsola wyświetli komunikat „TODO”. wiadomości z kilku atrakcji funkcji: requestPermission i sendNotification. Oto funkcje, które wdrożysz w ramach tego ćwiczenia z programowania.

Spójrzmy teraz na kod przykładowej aplikacji w umieszczonej na tej stronie stronie o umieszczeniu Glitch. Otwórz public/index.js i przyjrzyj się ważnym częściom istniejącego kodu:

  • Funkcja showPermission korzysta z interfejsu Notification API, aby pobierać o bieżącym stanie uprawnień witryny i zapisz 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 uprawnień to default. W stanie uprawnień default: witryna musi poprosić o zgodę i otrzymać jej zgodę, zanim będzie mogła wysyłać powiadomienia.

  • Funkcja requestPermission to skrót:

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

    Funkcję tę wdrożysz w następnym kroku.

  • Funkcja sendNotification to skrót:

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

    Funkcję tę wdrożysz po zaimplementowaniu requestPermission.

  • Detektor zdarzeń window.onload wywołuje funkcję showPermission podczas wczytywania strony, wyświetlając aktualny stan uprawnień w konsoli i na stronie:

    window.onload = () => { showPermission(); };
    

Poproś o zgodę na wysyłanie powiadomień

W tym kroku dodasz funkcję wysyłania prośby o zgodę użytkownika na wysyłanie powiadomień.

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

  1. Zastąp fragment kodu 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. Załaduj ponownie kartę Chrome, na której masz otwartą aplikację.

  3. W interfejsie opublikowanej aplikacji kliknij Poproś o uprawnienia do wysyłania powiadomień. Pojawi się wyskakujące okienko.

Użytkownik może odpowiedzieć na wyskakujące okienko uprawnień jako jedną z 3 odpowiedzi.

Reakcja użytkownika Stan zgody na wyświetlanie powiadomień
Użytkownik klika Zezwalaj. 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 połączenia z numerem Notification.requestPermission będą przekazywane 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ć powiadomień użytkownikowi.

  • Kolejne połączenia z numerem Notification.requestPermission będą przekazywane do denied bez wyskakującego okienka.

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

  • Notification.permission pozostaje default.

  • Witryna nie może wyświetlać powiadomień użytkownikowi.

  • Kolejne wywołania Notification.requestPermission będą powodować wyświetlanie większej liczby wyskakujących okienek.

    Jeśli jednak użytkownik nadal będzie zamykał wyskakujące okienka, przeglądarka może zablokować witrynę, ustawiając Notification.permission na denied. Użytkownik nie może wtedy wyświetlać wyskakujących okienek z prośbą o przyznanie uprawnień ani powiadomień.

    Działanie przeglądarki w reakcji na odrzucone powiadomienia z prośbą o zgodę nadal może się zmieniać w momencie tworzenia wiadomości. Najlepszym sposobem na poradzenie sobie z tym problemem jest prośba o zgodę na wyświetlanie powiadomień w odpowiedzi na zainicjowaną przez użytkownika interakcję, aby użytkownik spodziewał się takiego powiadomienia i był wiedział, co się dzieje.

.

Wysłano powiadomienie

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

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

  1. Zastąp fragment kodu 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 wizualne ustawienia 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świetla się bieżąca aplikacja i kliknij przycisk Wyślij powiadomienie. Pojawi się powiadomienie z tekstem Test body.

Co się stanie, gdy wyślesz powiadomienia bez pozwolenia?

Dodaj w tym kroku kilka wierszy kodu, dzięki którym zobaczysz, co się stanie gdy próbujesz wyświetlić powiadomienie bez zgody użytkownika.

  • W public/index.js, na końcu funkcji sendNotification zdefiniuj moduł 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 zaobserwować błąd dotyczący braku zgody na wyświetlanie powiadomień:

  1. Kliknij ikonę blokady obok paska adresu URL w Chrome, aby przywrócić domyślne ustawienia uprawnień witryny do wyświetlania powiadomień.

  2. Kliknij Poproś o uprawnienia do wysyłania powiadomień i tym razem wybierz Zablokuj w wyskakującym okienku.

  3. Kliknij Wyślij powiadomienie i zobacz, co się stanie. Tekst błędu (Could not send notification) a obiekt zdarzenia jest logowany w konsoli.

Opcjonalnie możesz ponownie zresetować uprawnienia witryny do wyświetlania powiadomień. Aby sprawdzić, co się stanie, możesz kilka razy poprosić o przyznanie uprawnień i zamknąć wyskakujące okienko.

Eksperymentuj z opcjami powiadomień

Znasz już podstawowe informacje o prośbach o uprawnienia i wysyłaniu powiadomień. Wiesz też, jak odpowiedzi użytkowników wpływają na możliwość wyświetlania powiadomień w aplikacji.

Możesz teraz eksperymentować z wieloma opcjami wizualnymi i danymi, które są dostępne przy tworzeniu powiadomienia. Poniżej znajdziesz pełny zestaw dostępnych opcji. Więcej informacji o tych opcjach znajdziesz w dokumentacji dotyczącej powiadomień w MDN.

Pamiętaj, że przeglądarki i urządzenia inaczej implementują te opcje. 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 napotkasz jakieś problemy, oto kod ukończony w ramach tego ćwiczenia w Codelab: glitch.com/edit/#!/codelab-notifications-get-started-completed

Zapoznaj się z następnym ćwiczeniem z programowania z tej serii Obsługa powiadomień za pomocą skryptu service worker, aby dowiedzieć się więcej.