Interfejs API rozszerzonych powiadomień

Interfejs Rich Notifications API umożliwia tworzenie powiadomień za pomocą szablonów i wyświetlanie tych powiadomień użytkownikom w obszarze powiadomień systemu:

Wygląd

Powiadomienia rozszerzone są dostępne w 4 wersjach: podstawowej, graficznej, listy i postępu. Wszystkie powiadomienia zawierają tytuł, wiadomość, małą ikonę wyświetlaną po lewej stronie wiadomości powiadomienia oraz pole contextMessage, które jest wyświetlane jako 3 pole tekstowe w jaśniejszym kolorze czcionki.

Podstawowy obraz:

Powiadomienia z listą wyświetlają dowolną liczbę elementów listy:

Powiadomienia graficzne zawierają podgląd obrazu:

Powiadomienia o postępie zawierają pasek postępu:

Zachowanie

W ChromeOS powiadomienia pojawiają się w obszarze powiadomień użytkownika i pozostają tam, dopóki użytkownik ich nie zamknie. Obszar powiadomień zlicza wszystkie nowe powiadomienia. Gdy użytkownik zobaczy powiadomienia w obszarze powiadomień, licznik zostanie zresetowany do zera.

Powiadomieniom można przypisać priorytet od -2 do 2. Priorytety < 0 są wyświetlane w centrum powiadomień ChromeOS i powodują błąd na innych platformach. Priorytet 0 jest priorytetem domyślnym. Priorytety > 0 są wyświetlane przez dłuższy czas, a w obszarze powiadomień można wyświetlać więcej powiadomień o wysokim priorytecie.

Oprócz wyświetlania informacji wszystkie typy powiadomień mogą zawierać maksymalnie 2 elementy działania. Gdy użytkownicy klikną element działania, Twoja aplikacja może odpowiedzieć odpowiednim działaniem. Na przykład gdy użytkownik kliknie „Odpowiedz”, otworzy się aplikacja do poczty e-mail i użytkownik będzie mógł dokończyć odpowiedź:

Tworzenie

Aby użyć tego interfejsu API, wywołaj metodę notifications.create, przekazując szczegóły powiadomienia za pomocą parametru options:

chrome.notifications.create(id, options, creationCallback);

notifications.NotificationOptions musi zawierać notifications.TemplateType, który określa dostępne szczegóły powiadomienia i sposób ich wyświetlania.

Tworzenie podstawowego powiadomienia

Wszystkie typy szablonów (basic, image, list i progress) muszą zawierać title i message powiadomienia oraz iconUrl, czyli link do małej ikony wyświetlanej po lewej stronie wiadomości powiadomienia.

Oto przykład szablonu basic:

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon"
}

Tworzenie powiadomienia graficznego

Typ szablonu image zawiera też imageUrl, czyli link do obrazu, którego podgląd jest wyświetlany w powiadomieniu:

var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

W aplikacjach Chrome ze względu na ścisłą Content Security Policy te adresy URL muszą wskazywać zasób lokalny lub używać adresu URL typu blob lub data. Użyj obrazu w formacie 3:2. W przeciwnym razie obraz będzie otoczony czarną ramką.

Tworzenie powiadomienia z listą

Szablon list wyświetla items w formacie listy:

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."}]
}

Tworzenie powiadomienia o postępie

Szablon progress wyświetla pasek postępu, na którym bieżący postęp mieści się w zakresie od 0 do 100:

var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

Nasłuchiwanie zdarzeń i reagowanie na nie

Wszystkie powiadomienia mogą zawierać detektory zdarzeń i moduły obsługi zdarzeń, które reagują na działania użytkownika (patrz chrome.events). Możesz na przykład napisać moduł obsługi zdarzeń, który będzie reagować 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ż umieszczenie detektorów i modułów obsługi zdarzeń na stronie zdarzeń, aby powiadomienia mogły się pojawiać nawet wtedy, gdy aplikacja lub rozszerzenie nie są uruchomione.