Gebruik de Meldingen-API

Met de browser.notifications API kunt u meldingen maken met behulp van sjablonen en deze meldingen aan gebruikers tonen in hun systeemvak:

Hoe ze eruitzien

Er zijn vier verschillende soorten uitgebreide meldingen: basis, afbeelding, lijst en voortgang. Alle meldingen bevatten een titel, een bericht, een klein pictogram links van het bericht en een contextMessage veld, dat als een derde tekstveld in een lichter lettertype wordt weergegeven.

Een standaardmelding:

Lijstmeldingen tonen een willekeurig aantal lijstitems:

Afbeeldingsmeldingen bevatten een voorbeeldweergave van de afbeelding:

Voortgangsmeldingen tonen een voortgangsbalk:

Hoe ze zich gedragen

Op ChromeOS verschijnen meldingen in het systeemvak van de gebruiker en blijven daar staan ​​totdat de gebruiker ze sluit. Het systeemvak houdt een teller bij van alle nieuwe meldingen. Zodra een gebruiker de meldingen in het systeemvak heeft gezien, wordt de teller gereset naar nul.

Aan meldingen kan een prioriteit tussen -2 en 2 worden toegekend. Prioriteiten lager dan 0 worden weergegeven in het ChromeOS-meldingencentrum en veroorzaken een foutmelding op andere platforms. De standaardprioriteit is 0. Prioriteiten hoger dan 0 worden steeds langer weergegeven en meldingen met een hogere prioriteit kunnen in het systeemvak worden getoond.

De priority heeft geen invloed op de volgorde van meldingen in macOS.

Naast het weergeven van informatie kunnen alle notificatietypen maximaal twee actie-items bevatten. Wanneer gebruikers op een actie-item klikken, kan uw extensie reageren met de bijbehorende actie. Als de gebruiker bijvoorbeeld op 'Beantwoorden' klikt, wordt de e-mailapp geopend en kan de gebruiker het antwoord voltooien.

Hoe ontwikkel je ze?

Om deze API te gebruiken, roept u de methode notifications.create() aan en geeft u de notificatiegegevens door via de parameter options :

await browser.notifications.create(id, options);

De notifications.NotificationOptions moet een notifications.TemplateType bevatten, die de beschikbare notificatiegegevens definieert en hoe deze gegevens worden weergegeven.

Maak een eenvoudige melding aan.

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

Gebruik een afbeelding

Het sjabloontype voor image bevat ook een imageUrl , een link naar een afbeelding die in de melding wordt weergegeven. Houd er rekening mee dat afbeeldingen niet aan gebruikers op macOS worden getoond.

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

Maak een lijstmelding aan

De list geeft items weer in een lijstformaat. Houd er rekening mee dat op macOS alleen het eerste item wordt weergegeven.

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
}

Luister naar gebeurtenissen en reageer erop.

Alle notificaties kunnen gebeurtenislisteners en gebeurtenisafhandelaars bevatten die reageren op gebruikersacties (zie browser.events ). U kunt bijvoorbeeld een gebeurtenisafhandelaar schrijven om te reageren op een notifications.onButtonClicked -gebeurtenis.

Gebeurtenisluisteraar:

browser.notifications.onButtonClicked.addListener(replyBtnClick);

Gebeurtenisafhandelaar:

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

Overweeg om eventlisteners en -handlers in de service worker op te nemen, zodat meldingen kunnen verschijnen, zelfs wanneer de extensie niet actief is.