Interfejs API chrome.notifications
umożliwia tworzenie powiadomień za pomocą szablonów i wyświetlanie użytkownikom tych powiadomień w obszarze powiadomień użytkownika:
Wygląd
Szczegółowe powiadomienia są dostępne na 4 różne rodzaje: podstawowe, graficzne, listy i postępy. Wszystkie powiadomienia zawierają tytuł, wiadomość, małą ikonę wyświetlaną po lewej stronie wiadomości oraz pole contextMessage
, które wyświetla się jako trzecie pole tekstowe, ale jest wyróżnione jaśniejszą czcionką.
Podstawowe powiadomienie:
W powiadomieniach o liście wyświetlana jest dowolna liczba elementów listy:
Powiadomienia o obrazach obejmują podgląd obrazu:
Powiadomienia o postępach pokazują pasek postępu:
jak się zachowują.
W ChromeOS powiadomienia są wyświetlane w obszarze powiadomień użytkownika i pozostają w obszarze powiadomień, dopóki użytkownik ich nie zamknie. W obszarze powiadomień są zapisane wszystkie nowe powiadomienia. Gdy użytkownik zobaczy powiadomienia w obszarze powiadomień, licznik jest resetowany do zera.
Powiadomieniam można przypisać priorytet z zakresu od -2 do 2. Priorytety mniejsze niż 0 są wyświetlane w Centrum powiadomień ChromeOS, a na innych platformach powodują wystąpienie błędu. Domyślnym priorytetem jest 0. Priorytety większe niż 0 są wyświetlane przy dłuższym czasie trwania, a w obszarze powiadomień może być wyświetlanych więcej powiadomień o wysokim priorytecie.
Ustawienie priority
nie ma wpływu na kolejność powiadomień w systemie macOS.
Poza wyświetlaniem informacji wszystkie typy powiadomień mogą zawierać maksymalnie 2 działania. Gdy użytkownik kliknie określone działanie, rozszerzenie może zareagować w ten sposób. Gdy na przykład użytkownik kliknie Odpowiedz, otworzy się aplikacja do poczty e-mail i będzie mógł odpowiedzieć:
Jak je tworzyć
Aby użyć tego interfejsu API, wywołaj metodę notifications.create()
, przekazując szczegóły powiadomienia za pomocą parametru options
:
await chrome.notifications.create(id, options);
notifications.NotificationOptions
musi zawierać element notifications.TemplateType
, który określa dostępne szczegóły powiadomień i sposób ich wyświetlania.
Tworzenie podstawowego powiadomienia
Wszystkie typy szablonów (basic
, image
, list
i progress
) muszą zawierać powiadomienie title
i message
, a także element iconUrl
będący linkiem do małej ikony wyświetlanej po lewej stronie wiadomości z powiadomieniem.
Oto przykład szablonu basic
:
var opt = {
type: "basic",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon"
}
Użyj obrazu
Typ szablonu image
zawiera też element imageUrl
, czyli link do obrazu wyświetlanego w powiadomieniu. Pamiętaj, że obrazy nie są wyświetlane użytkownikom korzystającym z systemu macOS.
var opt = {
type: "image",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
imageUrl: "url_to_preview_image"
}
Utwórz powiadomienia z listą
Szablon list
wyświetla items
w formacie listy. Pamiętaj, że w systemie macOS użytkownicy widzą tylko pierwszy element.
var opt = {
type: "list",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
items: [{ title: "Item1", message: "This is item 1."},
{ title: "Item2", message: "This is item 2."},
{ title: "Item3", message: "This is item 3."}]
}```
### Create progress notification {: #progress }
The `progress` template displays a progress bar where current progress ranges from 0 to 100. On macOS the progress bar displays as a percentage value in the notification title instead of in the progress bar.
```js
var opt = {
type: "progress",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "url_to_small_icon",
progress: 42
}
Wysłuchiwanie zdarzeń i odpowiadanie na nie
Wszystkie powiadomienia mogą zawierać detektory i moduły obsługi zdarzeń, które reagują na działania użytkownika (patrz sekcja chrome.events
). Możesz na przykład utworzyć moduł obsługi zdarzeń, który będzie odpowiadał na zdarzenie notifications.onButtonClicked
.
Detektor zdarzeń:
chrome.notifications.onButtonClicked.addListener(replyBtnClick);
Moduł obsługi zdarzeń:
function replyBtnClick {
//Write function to respond to user action.
}
Rozważ dodanie detektorów i modułów obsługi zdarzeń do skryptu service worker, co umożliwi wyświetlanie powiadomień nawet wtedy, gdy rozszerzenie nie jest uruchomione.