Уведомление браузера H5 на рабочем столе

JavaScript HTML
Уведомление браузера H5 на рабочем столе

NotificationНовый для HTML5 API для настройки и отображения уведомлений на рабочем столе для пользователей. В последний раз, когда я видел чужое всплывающее окно с уведомлением на другом веб-сайте, мне было любопытно, и я хотел знать, как его добиться. На самом деле проверить его несложно, и можно сказать, относительно просто, поэтому я написал блог, чтобы поделиться им с вами, надеясь помочь вам понять этот API.

нпм-пакет:

Я также разместил пакет npm:notification-Koro1, очень легкий и простой, если вы считаете, что это хорошо, нажмите звездочку~

под хромNotificationПредставление:

  1. Возьмите Google в качестве примера, пользователю разрешено уведомлять:

  1. После включения уведомлений отображаемое уведомление выглядит так:

Notificationхарактеристика

  1. Уведомление вне браузера, даже если пользователь не остается на текущей вкладке или даже сворачивает браузер, уведомление отображается в правом верхнем углу главного экрана, а затем через некоторое время исчезает.

  2. Мы можем отслеживать отображение, щелчок, закрытие и другие события уведомления, например, щелкнув уведомление, чтобы открыть страницу.

блог,Документы внешнего накопления,Нет публики,GitHub

Каштан: перейдите в консоль на каждом веб-сайте, чтобы запустить

Конкретные детали API будут обсуждаться позже. Сначала попробуйте этот API~

Далее идет простой каштан, всемВы можете сначала запустить его в консоли каждого веб-сайта, чтобы просмотретьNotificationЭффект:

var options = {
  dir: "auto", // 文字方向
  body: "通知：OBKoro1评论了你的朋友圈", // 通知主体
  requireInteraction: true, // 不自动关闭通知
  // 通知图标 
  icon: "https://upload-images.jianshu.io/upload_images/5245297-818e624b75271127.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
};
notifyMe('这是通知的标题', options);
function notifyMe(title, options) {
  // 先检查浏览器是否支持
  if (!window.Notification) {
    console.log('浏览器不支持通知');
  } else {
    // 检查用户曾经是否同意接受通知
    if (Notification.permission === 'granted') {
      var notification = new Notification(title, options); // 显示通知
    } else if (Notification.permission === 'default') {
      // 用户还未选择，可以询问用户是否同意发送通知
      Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
          console.log('用户同意授权');
          var notification = new Notification(title, options); // 显示通知
        } else if (permission === 'default') {
          console.warn('用户关闭授权 未刷新页面之前 可以再次请求授权');
        } else {
          // denied
          console.log('用户拒绝授权 不能显示通知');
        }
      });
    } else {
      // denied 用户拒绝
      console.log('用户曾经拒绝显示通知');
    }
  }
}

Поддержка браузера:

MDN:В настоящее времяNotificationЗа исключением IE, который не поддерживается, другие браузеры уже поддерживают настольные уведомления, а мобильные браузеры в основном не поддерживаются.

Из-за проблем с совместимостью мы используемNotificationПрежде нам нужно посмотреть, поддерживает ли браузерNotificationЭтот API:

if(window.Notification){
  // 桌面通知的逻辑
}

Разрешения на уведомления:

Чтобы избежать неудобств с уведомлениями о злоупотреблениях на веб-сайте, требуется согласие пользователя, прежде чем уведомления будут отображаться для пользователей.

Notification.permission Используется для указания статуса авторизации текущего отображения уведомлений.Он имеет три значения:

  1. default: по умолчанию, пользователи не выбрали
  2. granted: Пользователь разрешает этому сайту отправлять уведомления
  3. denied: Пользователь отказывается от отправки уведомлений сайтом

Проверьте разрешения:

Проверьте, поддерживает ли его браузерNotificationПосле этого вам нужно проверить разрешение на уведомление пользователя.

  if (Notification.permission === 'granted') {
    console.log('用户曾经同意授权');
     // 随时可以显示通知
  } else if (Notification.permission === 'default') {
    console.log('用户还未选择同意/拒绝');
    // 下一步请求用户授权
  } else {
    console.log('用户曾经拒绝授权 不能显示通知');
  }

просить разрешение

когдаNotification.permissionдляdefault, нам нужно использоватьNotification.requestPermission()для запроса разрешений пользователя.

Notification.requestPermission()Основываясь на синтаксисе обещания, параметр функции обратного вызова then представляет собой статус разрешений пользователя.Notification.permissionценность .

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('用户同意授权');
     // 随时可以显示通知
  } else if (permission === 'default') {
    console.log('用户关闭授权 可以再次请求授权');
  } else {
    console.log('用户拒绝授权 不能显示通知');
  }
});
// 老版本使用的是回调函数机制：Notification.requestPermission(callback); 参数一样

Отправить уведомление

когдаNotification.permissionдляgrantedКогда запрашивается разрешение пользователя, уведомление не обязательно отправлять немедленно, и уведомление можно отправить в любой форме в любое время.

const options = {}; // 传空配置
const title = '这里是标题';
const notification = new Notification(title, options) // 显示通知

Приведенный выше код может отображать простое уведомление, если пользователь разрешает вам открывать всплывающее окно.

NotificationПараметры:

  • title: заголовок уведомления
  • options: параметры настройки уведомления (необязательно).
    • тело: строка. Содержимое тела уведомления.
    • тег: идентификационный тег, представляющий уведомление,Для одного и того же тега будет открыто только одно окно уведомления..
    • значок: Строка. URL-адрес значка для отображения в уведомлении.
    • данные: данные, которые вы хотите связать с уведомлением, которые можно найти вnew Notificationнайден в возвращенном экземпляре.
    • renotify: логическое значение. Для того же тега, заменять ли предыдущее уведомление при появлении нового уведомления (откройте эту опцию, тег должен быть установлен).
    • requireInteraction: логическое значение. Уведомления не закрываются автоматически, по умолчанию установлено значение false (автозакрытие).
    • Есть также некоторые менее важные конфигурации, чтобы увидетьБлог учителя Чжан Синьсюйа такжеMDNвведение

requireInteraction: предотвратить автоматическое закрытие уведомлений

Значение по умолчанию — false, и уведомление автоматически закроется через три или четыре секунды.

когда установлено наtrue, и когда есть более двух уведомлений (new Notification(title, options)), появится статус наложения уведомлений, как показано ниже.

В этом случае мы можем работать только с последним уведомлением по умолчанию, если только вы не сохраните экземпляр, возвращаемый каждым уведомлением.

Мой опубликованный пакет npm:notification-koro1,МогуНастройте определенный интервал времени для автоматического закрытия уведомлений, которые не закрываются автоматически, или вы можете закрыть все уведомления одновременно

PS: Если оверлей не срабатывает, вероятно, элементы конфигурации тегов ваших двух уведомлений одинаковы (для одного и того же тега может появиться только одно всплывающее окно).

PS: эта опция не поддерживается в сафари, и по умолчанию она автоматически закрывается.

renotify:такой же

Значение по умолчанию false, уведомление того же тега под chorme не заменяется, это все еще старое уведомление

Установить какtrue, Для двух уведомлений с одинаковым тегом новое уведомление заменяет старое.

Уведомление:использоватьrenotify,должны быть установлены одновременноtagопция, иначе будет сообщено об ошибке.

PS: Этот вариант не поддерживается в сафари, по умолчанию два уведомления с одинаковым тегом, и новое уведомление заменяет старое.

NotificationПример:

При создании уведомления возвращается экземпляр следующим образом:

const instanceNotification = new Notification(title, options)

instanceNotificationэкземпляр текущего уведомления, на котором мы можемЗапрос конфигурации уведомления, прослушивание событий и вызов методов экземпляра.

Ниже приведеныinstanceNotificationОтносится к экземпляру, возвращенному уведомлением.

Конфигурация уведомлений:

Все конфигурации при настройке уведомлений можно прочитать в экземпляре уведомления.,Например:

Заголовок уведомления:instanceNotification. title, содержание уведомления:instanceNotification. body, значок уведомления:instanceNotification. iconЖдать.

PS: Эти свойства доступны только для чтения, не могут быть удалены, не могут быть изменены и не могут быть пройдены.

Обработка событий:

Мы можем использовать пример уведомления о событиях для прослушивания уведомлений:

  • click: срабатывает, когда пользователь нажимает на уведомление.
  • show: срабатывает при отображении уведомления
  • error: Уведомление запускается при обнаружении ошибки
  • close: срабатывает, когда пользователь отклоняет уведомление.
instanceNotification.onclick = e => {
  // do something 可以是：打开网址，发请求，关闭通知等
}

Уведомление: Лучше всего прослушивать события, как только выдается уведомление, в противном случае некоторые события могут вообще не запускаться или никогда не запускаться.

Например, если таймер используется для прослушивания щелчка и отображения событий уведомления через 5 секунд, обратный вызов отображения уведомления никогда не будет запущен, и событие щелчка будет нормально работать через 5 секунд, но пользовательский щелчок пять секунд назад будет неправильно.

Выключить уведомления

instanceNotification.close()

Если нет настройки автоматического закрытия, уведомление Chrome автоматически закроет уведомление примерно через 4,5 секунды, а сафари - через 5 секунд (нельзя настроить, чтобы оно не закрывалось автоматически).

уведомление не имеет функции регулярного контроля того, как долго уведомление будет исчезать, а при появлении нескольких уведомлений оно не может быть закрыто единообразно.

Эти две проблемы в моем опубликованном пакете npm:notification-koro1, разрешаются и обеспечивают более четкий обратный вызов

Сценарии применения

  • Программное обеспечение для обмена мгновенными сообщениями (почта, чат)

Браузер Safari: «Настройки» > «Веб-сайты» > «Уведомления» > «Поиск веб-сайтов» > «Изменить разрешения» / «Восстановить значения по умолчанию».

Отключите разрешения запроса:

В браузере chrome: когда пользователь закрывает всплывающее окно с запросом разрешения (крестик в правом верхнем углу), а страница не обновилась, мы можем снова запросить разрешение у пользователя.После обновления страницы пользователь браузера по умолчанию отказывается.

В браузере Safari нет возможности отключить запросы разрешений, пользователь должен согласиться/отклонить.

Значок не показывает проблему:

Возможно, сайт имеет ограничение на одно и то же происхождение (например, github) и не является изображением под доменным именем, он сообщит об ошибке и не может быть вызван.

ярлык:

  1. tagОдно и то же уведомление может появляться только по одному. Будет ли старое уведомление перезаписано, зависит от:renotifyконфигурация и браузер.
  2. В хроме: когда уведомление закрыто,Тег, появившийся в прошлый раз, не может появиться снова в течение определенного периода времени, например обновить страницу, а затем запросить уведомление о том же теге. (обычно отображается в сафари)

Значок не может отображаться в сафари

В сафари тот же веб-сайт (например, Google), тот же код, chorme может нормально отображать значок, но у сафари нет значка, и об ошибке не сообщается.

Позже Google обнаружил, что вstack overflowувидеть внутриSafari поддерживает только параметры тела и тегов, но не параметры значков..

Непрерывный триггер

Постоянно запускает уведомления в течение короткого периода времени в разделе Safari и Chrome (без настройкиtag, не установленrequireInteraction), появится следующая производительность:

notification 连续触发

это выступление,Уведомления бессмысленны без значков, заголовков и контента., браузер в этой форме запрещает разработчику часто беспокоить пользователя.

уведомление-Коро1:

попытайсяnotification-Koro1La, непрерывное обслуживание, простое и удобное~

Эпилог

Эта статья написана подробно, вы можете сначала разметить ее, а потом уже реально использовать этот API, вы можете сначала передать каштаны в тексте, а потом найти соответствующий контент.

Так же обратите внимание на различия между браузерами.Я сам пробовал хром и сафари, а тут много различий в деталях реализации этих двух браузеров, так что обращайте на них внимание при разработке.

Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.

блог,Документы внешнего накопления,Нет публики,GitHub

Выше 2019.02.17

Использованная литература:

notification-Koro1

Простое понимание настольных уведомлений Web Notification в HTML5

Notification MDN

Уведомления HTML5 Desktop: API уведомлений

Категории