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ń
Zremiksuj przykładową aplikację i wyświetl ją w nowej karcie
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ć:
- Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
Usterka powinna się otworzyć w nowej karcie Chrome:
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:
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!
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
isendNotification
. 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.
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); }); }
Załaduj ponownie kartę Chrome, na której masz otwartą aplikację.
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 dogranted
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 dodenied
bez wyskakującego okienka.
Jeśli użytkownik zamknie wyskakujące okienko:
Notification.permission
pozostajedefault
.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
nadenied
. 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.
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
ioptions
.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ń.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 funkcjisendNotification
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ń:
Kliknij ikonę blokady obok paska adresu URL w Chrome, aby przywrócić domyślne ustawienia uprawnień witryny 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
) 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.