Eksempel på skrivebordsvarsling i Chrome

I moderne nettlesere finnes det to typer varsler:

• Skrivebordsvarsler - enkle å utløse, fungerer så lenge siden er åpen, og kan forsvinne automatisk etter noen sekunder.
• Service Worker-varsler - litt mer kompliserte, men de kan fungere i bakgrunnen (selv etter at siden er lukket), er vedvarende og støtter handlingsknapper.

API-kallet tar de samme parametrene (bortsett fra handlinger - ikke tilgjengelig på skrivebordsvarsler), som er godt dokumentert på MDN og for servicearbeidere, på Googles Web Fundamentals.

Nedenfor er et fungerende eksempel på skrivebordsvarsler for Chrome, Firefox, Opera og Safari. Merk at av sikkerhetsgrunner, fra og med Chrome 62, kan det ikke lenger bli bedt om tillatelse til varslings-API-et fra en iframe med kryssopprinnelse, så vi kan ikke demonstrere dette ved hjelp av StackOverflows kodebiter. Du må lagre dette eksemplet i en HTML-fil på nettstedet/applikasjonen din, og sørge for å bruke localhost:// eller HTTPS.

// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
 if (!Notification) {
  alert('Desktop notifications not available in your browser. Try Chromium.');
  return;
 }

 if (Notification.permission !== 'granted')
  Notification.requestPermission();
});

function notifyMe() {
 if (Notification.permission !== 'granted')
  Notification.requestPermission();
 else {
  var notification = new Notification('Notification title', {
   icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
   body: 'Hey there! You\'ve been notified!',
  });
  notification.onclick = function() {
   window.open('http://stackoverflow.com/a/13328397/1269037');
  };
 }
}

 Notify me!

Vi bruker W3C Notifications API. Ikke forveksle dette med Chrome extensions notifications API, som er annerledes. Chrome-utvidelsesvarsler fungerer åpenbart bare i Chrome-utvidelser, og krever ingen spesiell tillatelse fra brukeren.

W3C-varslinger fungerer i mange nettlesere (se støtte på caniuse), og krever brukertillatelse. Som beste praksis bør du ikke be om denne tillatelsen med en gang. Forklar brukeren først hvorfor de ønsker varslinger og se andre push-varslingsmønstre.

Vær oppmerksom på at Chrome ikke respekterer varslingsikonet på Linux på grunn av denne feilen.

Avsluttende ord

Varslingsstøtte har vært i kontinuerlig endring, og ulike API-er har blitt utfaset de siste årene. Hvis du er nysgjerrig, kan du sjekke tidligere redigeringer av dette svaret for å se hva som pleide å fungere i Chrome, og for å lære historien om rike HTML-varsler.

Nå finnes den nyeste standarden på https://notifications.spec.whatwg.org/.

Når det gjelder hvorfor det er to forskjellige samtaler med samme effekt, avhengig av om du er i en servicearbeider eller ikke - se denne billetten jeg arkiverte mens jeg jobbet hos Google.

Se også notify.js for et hjelperbibliotek.

Sjekk design og API-spesifikasjon (det er fortsatt et utkast) eller sjekk kilden fra (siden er ikke lenger tilgjengelig) for et enkelt eksempel: Det er hovedsakelig et kall til window.webkitNotifications.createNotification.

Hvis du vil ha et mer robust eksempel (du prøver å lage din egen Google Chrome-utvidelse, og ønsker å vite hvordan du skal håndtere tillatelser, lokal lagring og lignende), sjekk ut Gmail Notifier Extension: last ned crx-filen i stedet for å installere den, pakk den ut og les kildekoden.

Jeg liker: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples men den bruker gamle variabler, så demoen fungerer ikke lenger. webkitNotifications er nå Notification.