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

409

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.

Sridhar Ratnakumar
źródło
2
Zostawiłem odpowiedź poniżej zaktualizowaną od listopada 2012 roku, po tym, jak powiadomienia HTML stały się nieaktualne. Ma prawdziwy przykład, taki jak ten, którego szukałeś.
Dan Dascalescu,
1
Aktualizacja : od 2015 roku strony internetowe mogą również wysyłać prawdziwe powiadomienia push, które są dostarczane, nawet gdy użytkownik nie surfuje po stronie. Sprawdź tę odpowiedź
collimarco
3
Wszyscy ci wyborcy, którzy chcą oznaczyć go jako zamknięty, muszą być miłośnikami IE / Safari. Jest to specyficzne dla powiadomień przeglądarki, a szczególnie dla Chrome. jeśli to tak nie na temat, to dlaczego tak wielu ludzi to lubi i na pierwszym miejscu zaznacza ją jako gwiazdkę?
prash
2
Dlaczego nie na temat?
SmartManoj

Odpowiedzi:

716

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.

Dan Dascalescu
źródło
4
@mghaoui - popularna! = prawda (koniecznie). zaznaczyłem ten jako prawidłową odpowiedź.
Sridhar Ratnakumar
2
window.webkitNotifications.checkPermission () zgłosi wyjątek w przeglądarkach innych niż Chrome
JT Taylor
2
Zamknij nie jest metodą. Myślę, że chcesz powiadomienie. Anuluj ()> decadecity.net/blog/2012/10/12/webkit-notification-api >> Również wydaje się, że zamyka się samo.
KingOfHypocrites
3
Dziękuję za wsparcie, użycie tego z Pusher pomogło mi zbudować system powiadomień.
Awijeet,
3
nie działa w wersji Chrome 47.0.2526.80 dev-m podczas pracy nad Mozilla Fire fox na Windows 8
Sarz
87

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.

GmonC
źródło
Czy nie ma nic, co działa dla wszystkich przeglądarek?
Royi Namir
@Royi, istnieje rozszerzenie Firefoksa , a także natywna implementacja Firefoksa, która pojawi się wcześniej czy później . W przypadku przeglądarki Internet Explorer możliwym rozwiązaniem byłoby poproszenie użytkowników witryny o pobranie przeglądarki Chrome Frame , ponieważ byłoby to realnym rozwiązaniem umożliwiającym działanie powiadomień. Istnieje inne rozwiązanie Microsoft .
Bryan Field,
7
Ta odpowiedź jest już całkowicie nieaktualna, 4 lata później. @RoyiNamir: istnieje interfejs API powiadomień. Sprawdzić moją odpowiedź .
Dan Dascalescu
1
Przykładowy link nie działa.
Vinny,
33

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

mpen
źródło
@Miron Proszę spojrzeć na hiperłącze w pierwszym akapicie. Połączyłem źródło, a następnie skopiowałem kod do mojej odpowiedzi zgodnie z etykietą SO. Gdyby MDN nie było wiki, mógłbym być bardziej wyraźny na temat tego, kto był autorem, ale niczego nie udaję.
mpen
Nie rozumiem, gdzie powiedział, że to napisał?
Brandito,
codepen nie działa
Stepan Yakovenko
1
@StepanYakovenko Spróbuj ponownie link codepen. Na końcu dodałem dodatkowy, elseaby powiedzieć, na czym polega problem. Prawdopodobnie globalnie wyłączyłeś powiadomienia takie jak ja: \
mpen
14

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.

Rudie
źródło
Przykład Twittera już nie działa.
Dan Dascalescu,
Powinieneś powiedzieć html5rocks.com/en/profiles Jeden z nich musi działać na Twitterze =)
Rudie
Heh Hakim był najlepszym facetem, który mógł powiadomić , ponieważ zdarzyło mi się przyczynić do jego struktury prezentacji.
Dan Dascalescu,
4

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.

gravmatt
źródło
@gravmatt napotkałeś problem z Firefoksem, w którym jeśli jest otwarte więcej niż jedno okno przeglądarki, powiadomienie nie pojawia się?
eran otzap
@eranotzap powinien działać z wieloma kartami. Prowadzę projekt, w którym nie stanowi to problemu. ale nie jestem pewien co do wielu okien.
gravmatt
Mam ten sam problem z wieloma kartami
eran otzap
Czy to działa z wielu kart w przeglądarce Firefox?
eran otzap
1
@eranotzap Przetestowałem to teraz w systemie Windows i Mac. Nie widzę powiadomienia w żadnym rogu ekranu, ale słyszę dźwięk powiadomień, a na komputerze Mac otrzymuję powiadomienie na pasku bocznym (z otwartymi wieloma kartami). Firefox to nowy przeglądarka internetowa.
gravmatt
3
<!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>

Hina Halani
źródło
1
Powstrzymaj się od zamieszczania odpowiedzi tylko na kod. Dodaj trochę komentarzy i / lub wyjaśnień, aby ludzie, którzy przeczytają ten post w przyszłości, zrozumieli go.
Adriaan,
W przypadku tego fragmentu kodu wydaje się to jednak dość proste. Inni użytkownicy mogą również opublikować pytanie uzupełniające do komentarza, prawda?
frostshoxx
1
JSfiddle z powyższym kodem nie działa, „Nie można już wymagać zezwolenia na interfejs API powiadomień z elementu iframe pochodzącego z innego źródła”. Jednak po otwarciu konsoli programisty, a wejść Notification.requestPermission();, a następnie var notification = new Notification('hello', { body: "Hey there!", });pokazy powiadomień w górę.
Kai Noack,
Przepraszam, ale co dokładnie ta odpowiedź dodaje do mojej?
Dan Dascalescu