Interfejs Notification Activates API

Wyzwalacze powiadomień umożliwiają zaplanowanie powiadomień lokalnych, które nie wymagają połączenia sieciowego, dzięki czemu idealnie nadają się do takich zastosowań jak aplikacje kalendarza.

Thomas Steiner
Thomas Steiner

Czym są reguły powiadomień?

Programiści stron internetowych mogą wyświetlać powiadomienia za pomocą Web Notification API. Funkcja ta jest często używana wraz z Push API, który informuje użytkownika o informacjach pilnych i czasowych, takich jak jako aktualności lub otrzymane wiadomości. Powiadomienia są wyświetlane po uruchomieniu JavaScriptu na na urządzeniu użytkownika.

Problem z interfejsem Push API polega na tym, że nie jest on niezawodny w uruchamianiu powiadomień, co musi być wyświetla się, gdy zostanie spełniony określony warunek, np. czas lub lokalizacja. Przykład raportu opartego na upływie czasu stan to powiadomienie z kalendarza, które przypomina Ci o ważnym spotkaniu z szefem o 14:00. Przykładem stanu związanego z lokalizacją jest powiadomienie o zakupie mleka w pobliżu sklepu spożywczego. Połączenie sieciowe lub oszczędzanie baterii funkcje takie jak tryb uśpienia mogą opóźniać dostarczanie powiadomień push.

Wyzwalanie powiadomień rozwiązuje ten problem, umożliwiając planowanie wyświetlania powiadomień aby system operacyjny dostarczył powiadomienie we właściwym czasie nawet jeśli nie masz połączenia z siecią lub urządzenie działa w trybie oszczędzania baterii.

Przypadki użycia

Aplikacje do obsługi kalendarza mogą używać wyzwalaczy powiadomień zależnych od czasu, aby przypomnieć użytkownikowi o nadchodzących wydarzeniach spotkaniach. Domyślnym schematem powiadomień w aplikacji kalendarza może być wyświetlanie powiadomienie na godzinę przed spotkaniem, a następnie kolejne pilne powiadomienie pięć minut przed spotkaniem wcześniej.

Sieć telewizyjna może przypominać użytkownikom o zbliżającej się dacie rozpoczęcia ich ulubionego programu lub konferencji na żywo. transmisja na żywo wkrótce się rozpocznie.

Witryny z konwersjami według strefy czasowej mogą używać reguł powiadomień opartych na czasie, aby umożliwiać użytkownikom planowanie wydarzeń alarmów podczas rozmów telefonicznych lub wideo.

Obecny stan,

Krok Stan
1. Utwórz wyjaśnienie Zakończono
2. Utwórz początkową wersję roboczą 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ć reguł powiadomień

Włączanie przez about://flags

Aby eksperymentować z interfejsem Notification Triggers API lokalnie, bez korzystania z tokena testowania origin, włącz interfejs API Flaga #enable-experimental-web-platform-features w: about://flags.

Wykrywanie cech

Aby dowiedzieć się, czy przeglądarka obsługuje aktywatory powiadomień, sprawdź istnienie elementu Właściwość showTrigger:

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

Planowanie wyświetlania powiadomienia

Planowanie wysyłania powiadomień przypomina planowanie wyświetlania zwykłych powiadomień push, z tą różnicą, że musisz przekazać właściwość warunku showTrigger z obiektem TimestampTrigger jako wartością do obiektu options powiadomienia.

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ń, które pasują do określonego tagu za pomocą usługi ServiceWorkerRegistration.getNotifications(). Pamiętaj, że musisz zdać Flaga includeTriggered oznaczająca zaplanowane powiadomienia, które mają być 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

Powiadomienia możesz debugować w panelu powiadomień Narzędzi deweloperskich w Chrome. Na początek kliknij Rozpocznij rejestrowanie zdarzeń. Zacznij rejestrować zdarzenia lub Control+E (Command+E na Macu). Rekordy w Narzędziach deweloperskich w Chrome wszystkich powiadomień, w tym zaplanowanych, wyświetlonych i zamkniętych powiadomień, nawet jeśli są zamknięte.

Zaplanowane zdarzenie powiadomienia zostało zarejestrowane w panelu Powiadomienia w Narzędziach deweloperskich Chrome, który znajduje się w panelu Aplikacje.
Zaplanowane powiadomienie.
.
.
Wyświetlone zdarzenie powiadomienia zostało zarejestrowane w panelu Powiadomienia w Narzędziach deweloperskich w Chrome.
Wyświetlone powiadomienie.

Prezentacja

Jak działają reguły powiadomień, możesz zobaczyć w wersji demonstracyjnej, co pozwoli Ci zaplanować powiadomienia, wyświetlić listę zaplanowanych powiadomień i je anulować. Kod źródłowy jest dostępny na Błąd.

Zrzut ekranu przedstawiający demonstracyjną aplikację internetową wyzwalaczy powiadomień.
Prezentacja dotycząca wyzwalaczy powiadomień.

Bezpieczeństwo i uprawnienia

Zespół Chrome zaprojektował i wdrożył interfejs Notification Triggers API, kierując się podstawowymi zasadami w artykule Kontrola nad dostępem do zaawansowanych funkcji platform internetowych, w tym kontrolę, przejrzystość i ergonomię. Ten interfejs API wymaga mechanizmów Service Worker, dlatego wymaga również w bezpiecznym kontekście. Korzystanie z interfejsu API wymaga takich samych uprawnień jak zwykłe powiadomienia push.

Kontrola użytkowników

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 są automatycznie usuwane, gdy skrypt service worker lub użytkownik usunie wszystkie dane witryny pochodzenia. Blokowanie plików cookie uniemożliwia również działanie usługi instancji roboczych przed instalowaniem w Chrome, dlatego nie można używać tego interfejsu API. Powiadomienia mogą być zawsze wyłączone przez użytkownika w danej witrynie w ustawieniach witryny.

Przejrzystość

W przeciwieństwie do interfejsu Push API ten interfejs API nie zależy od sieci, co oznacza zaplanowane powiadomienia potrzebują wszystkich wymaganych danych, w tym zasobów graficznych, do których odwołuje się badge, icon oraz Atrybuty: image. Oznacza to, że deweloper nie może zobaczyć zaplanowanego powiadomienia i nie obejmuje wybudzania skryptu service worker do momentu interakcji użytkownika z powiadomieniem. W związku z tym nie ma obecnie znanego sposobu, w jaki deweloper może uzyskać informacje o użytkowniku. za pomocą metod potencjalnie naruszających prywatność, np. wyszukiwania geolokalizacji na podstawie adresów IP. Ten projekt również umożliwia funkcji opcjonalne korzystanie z mechanizmów planowania udostępnianych przez system operacyjny np. AlarmManager Androida, co pomaga oszczędzać baterię.

Prześlij opinię

Zespół Chrome chce poznać Twoją opinię o regułach powiadomień.

Opowiedz nam o konstrukcji interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? Czy może brakuje tu metod lub właściwości potrzebne do realizacji pomysłu? Masz pytanie lub komentarz na temat zabezpieczeń model? Zgłoś problem ze specyfikacją w repozytorium GitHub aktywującym powiadomienia lub dodaj opinię do do istniejącego problemu.

Problem z implementacją?

Czy wystąpił błąd z implementacją Chrome? Czy implementacja różni się od specyfikacji? Zgłoś błąd na new.crbug.com. Podaj jak najwięcej szczegółów. instrukcje odtwarzania i ustaw Komponenty na UI>Notifications. Błąd działa świetnie do szybkiego i łatwego odtworzenia błędów.

Planujesz korzystać z interfejsu API?

Zastanawiasz się, jak wdrożyć w swojej witrynie reguły powiadomień? Twoje publiczne wsparcie pomaga nam potraktować priorytetowo i pokazuje innym dostawcom przeglądarek, jak ważne jest ich zapewnienie. Wyślij tweeta do @ChromiumDev za pomocą hashtagu #NotificationTriggers. i daj nam znać, gdzie i jak go używasz.

Przydatne linki

Podziękowania

Aktywatory powiadomień zostały wdrożone przez Richarda Knolla oraz wyjaśnienie, które napisał Peter Beverloo. do twórczości Richarda. Następujące osoby recenzowały ten artykuł: Joe Medley, Pete LePage oraz Richard i Peter. Baner powitalny – autor: Lukas Blazek o Unsplash.