Пример уведомления на рабочем столе Chrome

Как использовать уведомления обозревателя Chrome? Я бы хотел, чтобы это использовалось в моем собственном коде.

Обновить: здесь сообщение в блоге, объясняющее уведомления вебкита с примером.

ОТВЕТЫ

Ответ 1

В современных браузерах существует два типа уведомлений:

  • Уведомления на рабочем столе - легко запускаются, работают до тех пор, пока страница открыта, и могут исчезнуть автоматически через несколько секунд
  • Уведомления Service Worker - немного сложнее, но они могут работать в фоновом режиме (даже после закрытия страницы), являются постоянными и поддерживают кнопки действий

Вызов API принимает те же параметры (за исключением действий - недоступных в уведомлениях на рабочем столе), которые хорошо документированы на MDN и для сервисных работников на сайте Google Web Fundamentals.

Ниже приведен рабочий пример настольных уведомлений для Chrome, Firefox, Opera и Safari. Обратите внимание, что по соображениям безопасности, начиная с Chrome 62, разрешение для API уведомлений больше не может запрашиваться у iframe из разных источников, поэтому мы не можем продемонстрировать это с помощью фрагментов кода Qaru. Вам нужно сохранить этот пример в HTML файле на вашем сайте/в приложении и обязательно использовать localhost:// или 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>

Ответ 2

Проверьте дизайн и спецификацию API (это все еще черновик) или проверьте источник из (страница больше не доступна) для простого примера: это в основном вызов window.webkitNotifications.createNotification.

Если вы хотите более надежный пример (вы пытаетесь создать собственное расширение Google Chrome и хотите знать, как обращаться с разрешениями, локальным хранилищем и т.д.), Проверьте расширение Gmail Notifier: загрузите файл crx вместо установки распакуйте его и прочитайте его исходный код.

Ответ 3

Похоже, что window.webkitNotifications уже устарел и удален. Однако появился новый API, и он, похоже, работает и в последней версии Firefox.

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

  // Let check if the user is okay to get some notification
  else if (Notification.permission === "granted") {
    // If it okay let 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 create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  } else {
    alert('Permission is ${Notification.permission}');
  }
}

codepen

Ответ 5

Я сделал эту простую оболочку уведомлений. Он работает на Chrome, Safari и Firefox.

Вероятно, в Opera, IE и Edge, но я еще не тестировал его.

Просто откройте файл notify.js https://github.com/gravmatt/js-notify и поместите его на свою страницу.

Получите его на Bower

$ bower install js-notify

Вот как это работает:

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

Вы должны установить заголовок, но объект json, поскольку второй аргумент является необязательным.

Ответ 8

<!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>

Ответ 9

По какой-то причине принятый ответ не сработал у меня, я закончил использовать следующий пример:

https://developer.chrome.com/apps/app_codelab_alarms#create-notification

function notifyMe() {

    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon.png',
        title: 'Don\'t forget!',
        message: 'You have  things to do. Wake up, dude!'
    }, function(notificationId) {});

}