Uitgebreide meldingen-API

Platformverschil: in Chrome versie 59 zien meldingen er anders uit voor Mac OS X-gebruikers. In plaats van de eigen meldingen van Chrome zien gebruikers native Mac OS X-meldingen. Lees meer in dit artikel .

Met de Rich Notifications API kunt u meldingen maken met behulp van sjablonen en deze meldingen aan gebruikers weergeven in het systeemvak van de gebruiker:

Meldingen in het systeemgebruikersvak

Hoe ze eruit zien

Uitgebreide meldingen zijn er in vier verschillende smaken: basis, afbeelding, lijst en voortgang. Alle meldingen bevatten een titel, bericht, een klein pictogram dat links van het meldingsbericht wordt weergegeven, en een contextberichtveld, dat wordt weergegeven als een derde tekstveld in een lichter kleurenlettertype.

Een basisbeeld:

Basismelding

Lijstmeldingen geven een willekeurig aantal lijstitems weer:

Lijstmelding

Afbeeldingsmeldingen bevatten een afbeeldingsvoorbeeld:

Afbeeldingsmelding

Voortgangsmeldingen tonen een voortgangsbalk:

Voortgangsmelding

Hoe ze zich gedragen

Op ChromeOS verschijnen meldingen in het systeemvak van een gebruiker en blijven in het systeemvak totdat de gebruiker ze sluit. Het systeemvak houdt een telling bij van alle nieuwe meldingen. Zodra een gebruiker de meldingen in het systeemvak ziet, wordt de telling op nul gezet.

Aan meldingen kan een prioriteit tussen -2 en 2 worden toegewezen. Prioriteiten < 0 worden weergegeven in het ChromeOS-meldingscentrum en veroorzaken een fout op andere platforms. Prioriteit 0 is de standaardprioriteit. Prioriteiten > 0 worden weergegeven voor een langere duur en er kunnen meer meldingen met hoge prioriteit worden weergegeven in het systeemvak.

Naast het weergeven van informatie kunnen alle meldingstypen maximaal twee actie-items bevatten. Wanneer gebruikers op een actie-item klikken, kan uw app reageren met de juiste actie. Wanneer de gebruiker bijvoorbeeld op "Beantwoorden" klikt, wordt de e-mailapp geopend en kan de gebruiker het antwoord voltooien:

Actie in melding

Hoe je ze kunt ontwikkelen

Om deze API te gebruiken, roept u de notificaties.create- methode aan en geeft u de meldingsdetails door via de options :

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

De notificaties.NotificationOptions moeten een notificaties.TemplateType bevatten, waarin de beschikbare meldingsdetails worden gedefinieerd en hoe deze details worden weergegeven.

Maak een basismelding

Alle sjabloontypen ( basic , image , list en progress ) moeten een title en message bevatten, evenals een iconUrl , een link naar een klein pictogram dat links van het meldingsbericht wordt weergegeven.

Hier is een voorbeeld van een basic :

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

Afbeeldingsmelding maken

Het image bevat ook een imageUrl , een link naar een afbeelding waarvan een voorbeeld wordt weergegeven in de melding:

Platformverschil: afbeeldingen worden niet weergegeven voor gebruikers die Chrome versie 59+ op Mac OS X gebruiken.
var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  imageUrl: "url_to_preview_image"
}

In Chrome-apps moeten deze URL's vanwege een strikt inhoudbeveiligingsbeleid verwijzen naar een lokale bron of een blob- of gegevens-URL gebruiken. Gebruik een verhouding van 3:2 voor uw afbeelding; anders omlijst een zwarte rand de afbeelding.

Lijstmelding maken

De list geeft items weer in een lijstindeling:

Platformverschil: Alleen het eerste lijstitem wordt weergegeven voor gebruikers in Chrome versie 59+ op Mac OS X.
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."}]
}

Voortgangsmelding maken

De progress geeft een voortgangsbalk weer waarbij de huidige voortgang varieert van 0 tot 100:

Platformverschil: In Chrome versie 59+ op Mac OS X wordt de voortgangsbalk weergegeven als een procentuele waarde in de titel van de melding in plaats van een voortgangsbalk.
var opt = {
  type: "progress",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  progress: 42
}

Luisteren naar en reageren op gebeurtenissen

Alle meldingen kunnen gebeurtenislisteners en gebeurtenishandlers bevatten die reageren op gebruikersacties (zie chrome.events ). U kunt bijvoorbeeld een gebeurtenishandler schrijven om te reageren op een notificaties.onButtonClicked -gebeurtenis.

Gebeurtenisluisteraar:

chrome.notifications.onButtonClicked.addListener(replyBtnClick);

Gebeurtenishandler:

function replyBtnClick {
    //Write function to respond to user action.
}

Overweeg om gebeurtenislisteners en handlers op te nemen in de gebeurtenispagina , zodat er zelfs meldingen kunnen verschijnen als de app of extensie niet actief is.