Przykład powiadomienia na pulpicie Chrome [zamknięte]

Jak korzystać z powiadomień na pulpicie Chrome ? Chciałbym, żeby to wykorzystało we własnym kodzie.

Aktualizacja : Oto post na blogu wyjaśniający powiadomienia zestawu internetowego na przykładzie.

W nowoczesnych przeglądarkach istnieją dwa rodzaje powiadomień:

• Powiadomienia na pulpicie - łatwe do wyzwolenia, działają tak długo, jak długo strona jest otwarta i mogą zniknąć automatycznie po kilku sekundach
• Powiadomienia pracownika serwisu - nieco bardziej skomplikowane, ale mogą działać w tle (nawet po zamknięciu strony), są trwałe i obsługują przyciski akcji

Wywołanie interfejsu API przyjmuje te same parametry (z wyjątkiem działań - niedostępne w powiadomieniach na pulpicie), które są dobrze udokumentowane w MDN i dla pracowników serwisu na stronie Google Web Fundamentals .

Poniżej znajduje się działający przykład powiadomień na pulpicie dla Chrome, Firefox, Opera i Safari. Pamiętaj, że ze względów bezpieczeństwa, począwszy od przeglądarki Chrome 62, nie można już wymagać zgody na interfejs API powiadomień z elementu iframe pochodzącego z różnych źródeł , dlatego nie możemy tego demonstrować przy użyciu fragmentów kodu StackOverflow. Musisz zapisać ten przykład w pliku HTML na swojej stronie / aplikacji i upewnić się, że używasz localhost://lub 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');
  };
 }
}

 <button onclick="notifyMe()">Notify me!</button>

Używamy interfejsu API powiadomień W3C . Nie należy tego mylić z interfejsem API powiadomień o rozszerzeniach Chrome , który jest inny. Powiadomienia o rozszerzeniach Chrome oczywiście działają tylko w rozszerzeniach Chrome i nie wymagają specjalnego pozwolenia od użytkownika.

Powiadomienia W3C działają w wielu przeglądarkach (patrz wsparcie w caniuse ) i wymagają zgody użytkownika. Jako najlepszą praktykę nie proś o to pozwolenie od razu. Wyjaśnij najpierw użytkownikowi, dlaczego chce otrzymywać powiadomienia i zobacz inne wzorce powiadomień wypychanych .

Pamiętaj, że Chrome nie honoruje ikony powiadomienia w systemie Linux z powodu tego błędu .

Ostatnie słowa

Obsługa powiadomień nieustannie się zmienia, a różne interfejsy API były przestarzałe w ciągu ostatnich lat. Jeśli jesteś ciekawy, sprawdź poprzednie edycje tej odpowiedzi, aby zobaczyć, co działało w Chrome i poznać historię bogatych powiadomień HTML.

Teraz najnowszy standard znajduje się na stronie https://notifications.spec.whatwg.org/ .

Aby dowiedzieć się, dlaczego istnieją dwa różne połączenia z tym samym skutkiem, w zależności od tego, czy jesteś pracownikiem usługowym, czy nie - zobacz ten bilet, który złożyłem podczas pracy w Google .

Zobacz także powiadomienie.js dla biblioteki pomocnika.

Sprawdź projekt i specyfikację API (wciąż jest to wersja robocza) lub sprawdź źródło z (strona nie jest już dostępna) na prosty przykład: jest to głównie wywołanie do window.webkitNotifications.createNotification.

Jeśli chcesz bardziej solidny przykład (próbujesz utworzyć własne rozszerzenie Google Chrome i chcesz wiedzieć, jak radzić sobie z uprawnieniami, pamięcią lokalną itp.), Sprawdź Gmail Notifier Extension : pobierz plik CRX zamiast instalować rozpakuj go i przeczytaj jego kod źródłowy.

Wygląda na to, że window.webkitNotificationszostał już wycofany i usunięty. Istnieje jednak nowy interfejs API , który wydaje się działać również w najnowszej wersji przeglądarki Firefox.

function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check if the user is okay to get some notification
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  // Note, Chrome does not implement the permission static property
  // So we have to check for NOT 'denied' instead of 'default'
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {

      // Whatever the user answers, we make sure we store the information
      if(!('permission' in Notification)) {
        Notification.permission = permission;
      }

      // If the user is okay, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  } else {
    alert(`Permission is ${Notification.permission}`);
  }
}

codepen

Lubię: http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples, ale używa starych zmiennych, więc demo nie działa. webkitNotificationsjest teraz Notification.

Zrobiłem to proste opakowanie powiadomienia. Działa w Chrome, Safari i Firefox.

Prawdopodobnie na Opera, IE i Edge, ale jeszcze tego nie testowałem.

Pobierz plik powiadomień.js tutaj https://github.com/gravmatt/js-notify i umieść go na swojej stronie.

Zdobądź go w Bower

$ bower install js-notify

Tak to działa:

notify('title', {
    body: 'Notification Text',
    icon: 'path/to/image.png',
    onclick: function(e) {}, // e -> Notification object
    onclose: function(e) {},
    ondenied: function(e) {}
  });

Musisz ustawić tytuł, ale obiekt json jako drugi argument jest opcjonalny.

Oto ładna dokumentacja interfejsów API,

https://developer.chrome.com/apps/notifications

I oficjalne objaśnienie wideo przez Google,

https://developers.google.com/live/shows/83992232-1001

Notify.js to opakowanie wokół powiadomień o nowym zestawie internetowym. Działa całkiem dobrze.

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/

<!DOCTYPE html>

<html>

<head>
<title>Hello!</title>
<script>
function notify(){

if (Notification.permission !== "granted") {
Notification.requestPermission();
}
 else{
var notification = new Notification('hello', {
  body: "Hey there!",
});
notification.onclick = function () {
  window.open("http://google.com");
};
}
}
</script>
</head>

<body>
<button onclick="notify()">Notify</button>
</body>