Использование уведомления о сообщении HTML5 (веб-уведомление)

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

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

 new Notification('Уведомление о сообщении Jartto/', { dir: 'rtl', body: 'Это сообщение, отправленное через веб-уведомление в качестве теста!', icon: 'https://raw.githubusercontent.com /chenfengyanyu/my-web-accumulation/master/images/logo.jpeg'})

Уведомление о сообщении не появляется, что происходит? Не волнуйтесь, продолжайте читать.

В соответствии с приведенным выше примером мы запустили его, но не смогли успешно активировать окно отправки сообщений. В это время вам необходимо проверить, авторизован ли пользователь. Введите в консоли: > Notification.permission

Вскоре мы обнаружим, что исходное разрешение пользователя — default . Поскольку выбор пользователя неизвестен, поведение браузера такое же, как и denied , то есть отказ.

Когда вы видите эти высокоуровневые API HTML5 , всегда возникают некоторые проблемы. Хотя пример хорош и прост в использовании, стоит задуматься о совместимости.

Как видите, его поддерживают практически все браузеры, кроме iOS Safari и Opera Mini , поэтому с мобильными приложениями нужно быть осторожными.

4. Документация по API

Давайте сначала разберемся с API системно. Это очень просто. Просто потратьте на это 5 минут.

Вариант использования:

 let уведомление = новое уведомление (название, параметры)

параметр:

title: заголовок уведомления, который обязательно будет отображаться

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

• dir: направление текста; его значение может быть auto (автоматическое), ltr (слева направо) или rtl (справа налево).
• lang: указывает язык, используемый в уведомлениях. Эта строка должна быть допустимой в документе языкового тега BCP 47.
• тело: дополнительная строка, отображаемая в уведомлении.
• тег: присвойте уведомлению идентификатор, чтобы его можно было обновить, заменить или удалить при необходимости.
• значок: URL-адрес изображения, которое будет использоваться для отображения значка уведомления.

свойство:

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

• denied (пользователь запретил отображение уведомления),
• granted (пользователь разрешил отображение уведомления),
• default (поскольку выбор пользователя неизвестен, браузер ведет себя так же, как и в случае denied )

метод:

• Notification.onclick: обрабатывает событие щелчка, которое запускается каждый раз, когда пользователь нажимает на уведомление.
• Notification.onshow: обрабатывает событие показа, которое запускается при отображении уведомления.
• Notification.onerror: обрабатывает событие ошибки, которое запускается всякий раз, когда уведомление обнаруживает ошибку.
• Notification.onclose: обрабатывает событие закрытия, которое срабатывает, когда пользователь закрывает уведомление.
• Notification.requestPermission(): используется для текущей страницы, чтобы обратиться к пользователю за разрешением на отображение уведомлений.
• Notification.close(): используется для закрытия уведомлений.

Notification.requestPermission Этот метод может быть вызван только поведением пользователя (например, событием onclick) и не может быть вызван другими методами.

Согласно приведенному выше API, давайте напишем полный пример:

 function notifyMe(){ // Сначала проверяем, поддерживает ли браузер if (!(Уведомление в окне)) { alert(Этот браузер не поддерживает уведомления на рабочем столе } // Проверяем, согласен ли пользователь получать уведомления else if (Notification. разрешение = == предоставлено) { // Если все в порядке, давайте создадим уведомление var Notification = new Notification(Hi there! } // В противном случае нам нужно получить разрешение от пользователя else if (Notification.permission !== 'denied); ') { Notification.requestPermission(function (permission){ // Если пользователь согласен, вы можете отправить ему уведомление if (разрешение === предоставлено) { var Notification = new Notification(Hi there!); } }); // Наконец, , Если выполнение доходит до этой точки, это означает, что пользователь отказался авторизовать соответствующие уведомления // Из уважения, мы не должны их больше беспокоить}

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