Dzięki nim możesz zaplanować powiadomienia lokalne, które nie wymagają połączenia z internetem. Dzięki temu są one idealne do zastosowań takich jak aplikacje kalendarza.
Co to są wyzwalacze powiadomień?
Deweloperzy internetowi mogą wyświetlać powiadomienia za pomocą interfejsu Web Notifications API. Ta funkcja jest często używana z interfejsem Push API, aby informować użytkownika o aktualnych informacjach, takich jak najnowsze wiadomości lub otrzymane wiadomości. Powiadomienia są wyświetlane przez uruchamianie kodu JavaScript na urządzeniu użytkownika.
Problem z interfejsem Push API polega na tym, że nie jest on niezawodny w wywoływaniu powiadomień, które muszą być wyświetlane, gdy spełnione są określone warunki, np. czas lub lokalizacja. Przykładem warunku zależnego od czasu jest powiadomienie w kalendarzu, które przypomina o ważnym spotkaniu z szefem o godz. 14:00. Przykładem warunku opartego na lokalizacji jest powiadomienie, które przypomina o zakupie mleka, gdy zbliżasz się do sklepu spożywczego. Powiadomienia push mogą być opóźniane z powodu problemów z połączeniem sieci lub funkcjami oszczędzania baterii, takimi jak tryb Doze.
Wyzwalacze powiadomień rozwiązują ten problem, umożliwiając zaplanowanie powiadomień z ich warunkiem wyzwalającym z wyprzedzeniem. Dzięki temu system operacyjny będzie mógł wyświetlać powiadomienia we właściwym czasie, nawet jeśli nie ma połączenia z internetem lub urządzenie jest w trybie oszczędzania baterii.
Przypadki użycia
Aplikacje kalendarza mogą używać wyzwalaczy powiadomień zależnych od czasu, aby przypominać użytkownikom o nadchodzących spotkaniach. Domyślny schemat powiadomień w aplikacji kalendarza może polegać na wyświetlaniu pierwszego powiadomienia z wyprzedzeniem 1 godziny przed spotkaniem, a potem drugiego, pilniejszego powiadomienia na 5 minut przed spotkaniem.
Sieć telewizyjna może przypomnieć użytkownikom, że ich ulubiony program telewizyjny lub transmisja na żywo z konferencji wkrótce się rozpocznie.
Witryny umożliwiające konwersję stref czasowych mogą używać wyzwalaczy powiadomień o czasie, aby umożliwić użytkownikom planowanie alarmów na konferencje telefoniczne lub rozmowy wideo.
Obecny stan,
| Krok | Stan |
|---|---|
| 1. Tworzenie wyjaśnienia | Zakończono |
| 2. Tworzenie wstępnej wersji specyfikacji | Nie rozpoczęto |
| 3. Zbieraj opinie i ulepszaj projekt. | W toku |
| 4. Wersja próbna origin | Zakończone |
| 5. Uruchom | Nie rozpoczęto |
Jak używać wyzwalaczy powiadomień
Włączanie za pomocą about://flags
Aby eksperymentować z interfejsem Notification Triggers API lokalnie bez tokena testowania origin, włącz flagę #enable-experimental-web-platform-features w pliku about://flags.
Wykrywanie cech
Aby sprawdzić, czy przeglądarka obsługuje reguły powiadomień, sprawdź, czy istnieje właściwość showTrigger:
if ('showTrigger' in Notification.prototype) {
/* Notification Triggers supported */
}
Planowanie powiadomienia
Zaplanowanie powiadomienia jest podobne do wyświetlania zwykłego powiadomienia push, z tą różnicą, że do obiektu options powiadomienia musisz przekazać jako wartość właściwość showTrigger warunku z obiektem TimestampTrigger.
const createScheduledNotification = async (tag, title, timestamp) => {
const registration = await navigator.serviceWorker.getRegistration();
registration.showNotification(title, {
tag: tag,
body: 'This notification was scheduled 30 seconds ago',
showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
});
};
Anulowanie zaplanowanego powiadomienia
Aby anulować zaplanowane powiadomienia, najpierw poproś o listę wszystkich powiadomień pasujących do określonego tagu za pomocą ServiceWorkerRegistration.getNotifications(). Pamiętaj, że musisz przekazać flagę includeTriggered, aby zaplanowane powiadomienia zostały uwzględnione na liście:
const cancelScheduledNotification = async (tag) => {
const registration = await navigator.serviceWorker.getRegistration();
const notifications = await registration.getNotifications({
tag: tag,
includeTriggered: true,
});
notifications.forEach((notification) => notification.close());
};
Debugowanie
Aby debugować powiadomienia, możesz użyć panelu Powiadomienia w Narzędziach deweloperskich Chrome. Aby rozpocząć debugowanie, naciśnij Rozpocznij nagrywanie zdarzeń
lub Control + E (Command + E na Macu). Narzędzia deweloperskie Chrome rejestrują wszystkie zdarzenia powiadomień, w tym zaplanowane, wyświetlone i zamknięte powiadomienia, przez 3 dni, nawet gdy są zamknięte.
Prezentacja
Możesz zobaczyć działanie wyzwalaczy powiadomień w demonstracji, która umożliwia planowanie powiadomień, wyświetlanie zaplanowanych powiadomień i ich anulowanie. Kod źródłowy jest dostępny na Glitch.
Zabezpieczenia i uprawnienia
Zespół Chrome zaprojektował i wdrożył interfejs Notification Triggers API, korzystając z podstawowych zasad określonych w artykule Kontrolowanie dostępu do zaawansowanych funkcji platformy internetowej, w tym kontroli użytkownika, przejrzystości i ergonomiki. Ponieważ ten interfejs API wymaga usług w tle, wymaga też kontekstu niezabezpieczonego. Korzystanie z interfejsu API wymaga tych samych uprawnień co w przypadku zwykłych powiadomień push.
Kontrola użytkownika
Ten interfejs API jest dostępny tylko w kontekście ServiceWorkerRegistration. Oznacza to, że wszystkie wymagane dane są przechowywane w tym samym kontekście i automatycznie usuwane, gdy usuniesz pracownika usługi lub użytkownik usunie wszystkie dane witryny dla danego źródła. Blokowanie plików cookie uniemożliwia też instalowanie w Chrome usług workers, a tym samym uniemożliwia korzystanie z tego interfejsu API. Użytkownik może w dowolnym momencie wyłączyć powiadomienia w ustawieniach witryny.
Przejrzystość
W przeciwieństwie do interfejsu Push API ten interfejs API nie zależy od sieci, co oznacza, że zaplanowane powiadomienia wymagają wcześniejszego podania wszystkich wymaganych danych, w tym zasobów obrazów wskazywanych przez atrybuty badge, icon i image. Oznacza to, że wyświetlanie zaplanowanego powiadomienia nie jest widoczne dla dewelopera i nie powoduje aktywacji usługi, dopóki użytkownik nie wejdzie w interakcję z powiadomieniem.
W związku z tym nie ma obecnie znanego sposobu, aby deweloper mógł uzyskać informacje o użytkowniku za pomocą metod potencjalnie naruszających prywatność, takich jak wyszukiwanie lokalizacji na podstawie adresu IP. Dzięki temu funkcja może opcjonalnie korzystać z mechanizmów planowania udostępnianych przez system operacyjny, takich jak AlarmManager w Androidzie, co pomaga oszczędzać baterię.
Prześlij opinię
Zespół Chrome chce poznać Twoje wrażenia związane z korzystaniem z wyzwalaczy powiadomień.
Poinformuj nas o projektowaniu interfejsu API
Czy coś w interfejsie API nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do wdrożenia swojego pomysłu? Masz pytania lub uwagi dotyczące modelu bezpieczeństwa? Zgłoś problem ze specyfikacją w repozytorium GitHub Notification Triggers lub podziel się opinią na temat istniejącego problemu.
Problem z implementacją?
Czy znalazłeś/znalazłaś błąd w implementacji Chrome? A może implementacja różni się od specyfikacji?
Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje odtwarzania błędu i ustaw komponenty na UI>Notifications. Glitch świetnie sprawdza się do szybkiego i łatwego udostępniania informacji o błędach.
Planujesz korzystać z interfejsu API?
Planujesz użyć w swojej witrynie wyzwalaczy powiadomień? Twoje publiczne wsparcie pomaga nam ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie. Wyślij tweeta do @ChromiumDev, używając hashtaga #NotificationTriggers, i podaj, gdzie i jak go używasz.
Przydatne linki
- Publiczny film wyjaśniający
- Demonstracja funkcji Powiadomienia wyzwalające | źródło demonstracyjne funkcji Powiadomienia wyzwalające
- Śledzenie błędu
- Wpis na stronie ChromeStatus.com
- Składnik Blink:
UI>Notifications
Podziękowania
Funkcja „Wyzwalacze powiadomień” została zaimplementowana przez Richarda Knolla, a artykuł wyjaśniający jej działanie został napisany przez Petera Beverloo, z udziałem Richarda. Artykuł został sprawdzony przez te osoby: Joe Medley, Pete LePage, a także Richard i Peter. Baner powitalny autorstwa Lukas Blazek z Unsplash.