W tym ćwiczeniu z programowania użyjesz podstawowych funkcji interfejsu Notifications API, aby:
- Proś o zgodę na wysyłanie powiadomień
- Wysyłanie powiadomień
- Eksperymentowanie z opcjami powiadomień
Zmodyfikuj przykładową aplikację i wyświetl ją w nowej karcie
Powiadomienia są automatycznie blokowane w wbudowanej aplikacji Glitch, więc nie będziesz mieć możliwości wyświetlenia podglądu aplikacji na tej stronie. Zamiast tego:
- Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran .
Glitch powinien otworzyć się w nowej karcie Chrome:
W trakcie pracy z tym ćwiczeniem wprowadzaj zmiany w kodzie w osadzonym Glitchu na tej stronie. Odśwież nową kartę z aplikacją na żywo, aby zobaczyć zmiany.
Poznaj aplikację startową i jej kod
Najpierw sprawdź aplikację na żywo na nowej karcie Chrome:
Aby otworzyć Narzędzia dla programistów, naciśnij `Control+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.
Kliknij przyciski w aplikacji na żywo: Poproś o zezwolenie na wysyłanie powiadomień i Wyślij powiadomienie.
Konsolę wypisuje komunikaty „TODO” z kilku szablonów funkcji:
requestPermission
isendNotification
. Oto funkcje, które zaimplementujesz w tym ćwiczeniu.
Teraz przyjrzyjmy się kodom przykładowej aplikacji w osadzonym na tej stronie Glitchu.
Otwórz public/index.js
i przyjrzyj się niektórym ważnym częściom dotychczasowego kodu:
Funkcja
showPermission
korzysta z interfejsu Notifications API, aby pobrać 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;
}Zanim poprosisz o uprawnienia, ich stan to
default
. W stanie uprawnieńdefault
witryna musi poprosić o uprawnienia i otrzymać je, zanim będzie mogła wysyłać powiadomienia.Funkcja
requestPermission
jest elementem zastępczym:// Use the Notification API to request permission to send notifications.
function requestPermission() {
console.log('TODO: Implement requestPermission()');
}W kolejnym kroku zaimplementujesz tę funkcję.
Funkcja
sendNotification
jest elementem zastępczym:// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
console.log('TODO: Implement sendNotification()');
}Wprowadzisz tę funkcję po wdrożeniu
requestPermission
.Listener zdarzenia
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ś o zgodę na wysyłanie powiadomień
W tym kroku dodasz funkcję, która poprosi użytkownika o zezwolenie na wysyłanie powiadomień.
Użyjesz metody Notification.requestPermission()
, aby wyświetlić użytkownikowi wyskakujące okienko z prośbą o zezwolenie na wyświetlanie powiadomień z Twojej witryny lub ich blokowanie.
Zastąp szablon 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);
});
}Odśwież kartę Chrome, na której wyświetlasz aplikację na żywo.
W interfejsie aplikacji na żywo kliknij Poproś o zezwolenie na wysyłanie powiadomień. Pojawi się wyskakujące okienko.
Użytkownik może zareagować na wyskakujące okienko z prośbą o zgodę na 3 sposoby.
Reakcja 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 dokonania 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 funkcji
Notification.requestPermission
będą przekierowywane do funkcjigranted
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 wywołania funkcji
Notification.requestPermission
będą przekierowywane do funkcjidenied
bez wyskakującego okienka.
Jeśli użytkownik zamknie wyskakujące okienko:
Notification.permission
pozostajedefault
.Witryna nie będzie mogła wyświetlać powiadomień użytkownikowi.
Kolejne wywołania funkcji
Notification.requestPermission
będą powodować wyświetlanie kolejnych wyskakujących okienek.Jeśli jednak użytkownik będzie nadal odrzucać wyskakujące okienka, przeglądarka może zablokować witrynę, ustawiając wartość
Notification.permission
nadenied
. W takim przypadku użytkownik nie widzi ani wyskakujących okienek z prośbą o uprawnienia, ani powiadomień.W momencie pisania tego tekstu zachowanie przeglądarki w reakcji na odrzucone powiadomienia z prośbą o uprawnienia może ulec zmianie. Najlepszym sposobem na rozwiązanie tego problemu jest zawsze proszenie o pozwolenie na wysyłanie powiadomień w odpowiedzi na interakcję zainicjowaną przez użytkownika, aby był on na nie przygotowany i wiedział, co się dzieje.
Wysłano powiadomienie
W tym kroku wyślij powiadomienie do użytkownika.
Aby utworzyć nowe powiadomienie i spróbować je wyświetlić, użyjesz konstruktora Notification
.
Jeśli stan uprawnień to granted
, wyświetli się powiadomienie.
Zastąp w pliku index.js szablon funkcji
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
ioptions
.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ę na żywo, i kliknij przycisk Wyślij powiadomienie. Powinno pojawić się powiadomienie z tekstem
Test body
.
Co się dzieje, gdy wysyłasz powiadomienia bez zgody?
W tym kroku dodasz kilka linii kodu, dzięki którym zobaczysz, co się dzieje, gdy spróbujesz wyświetlić powiadomienie bez zgody użytkownika.
- W pliku
public/index.js
na końcu funkcjisendNotification
zdefiniuj nowy obciążnik zdarzeniaonerror
:
// 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 sprawdzić, czy wystąpił błąd związany z uprawnieniami powiadomień:
Kliknij ikonę kłódki obok paska adresu w Chrome i przywróć ustawienie uprawnień do wysyłania powiadomień do wartości domyślnej.
Kliknij Poproś o pozwolenie na wysyłanie powiadomień, a tym razem w wyskakującym okienku kliknij Zablokuj.
Kliknij Wyślij powiadomienie i zobacz, co się stanie. Tekst błędu (
Could not send notification
) i obiekt zdarzenia są rejestrowane w konsoli.
Opcjonalnie możesz ponownie zresetować uprawnienia do powiadomień. Aby sprawdzić, co się stanie, możesz kilkakrotnie poprosić o uprawnienia i zamknąć wyskakujące okienko.
Eksperymentowanie z opcjami powiadomień
Znasz już podstawy dotyczące proszenia o uprawnienia i wysyłania powiadomień. Zobaczysz też, jaki wpływ na wyświetlanie powiadomień przez aplikację mają odpowiedzi użytkowników.
Możesz teraz eksperymentować z wielu opcjami wizualnymi i danymi dostępnymi podczas tworzenia powiadomienia. Poniżej znajdziesz pełną listę dostępnych opcji. (więcej informacji o tych opcjach znajdziesz w dokumentacji powiadomień na stronie MDN).
Pamiętaj, że przeglądarki i urządzenia implementują te opcje na różne sposoby, 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 Generatorze powiadomień Petera Beverloo.
Jeśli utknąłeś/utkniesz, oto gotowy kod do tego ćwiczenia: glitch.com/edit/#!/codelab-notifications-get-started-completed
Aby dowiedzieć się więcej, zapoznaj się z ćwiczeniem z programowania Obsługa powiadomień za pomocą workera usługi, które jest następnym w tej serii.