Предисловие: Как фронтенд-разработчик, я всегда обращаю внимание на некоторые новые функции при просмотре веб-страниц. Что касается меня, который всегда использует Teambition на работе, я всегда получаю уведомления... Итак, сегодня я изучу эту функцию H5...
1. Экземпляр уведомления let n = new Notification( Это сообщение с уведомлением, //Это требуемый заголовок и заголовок уведомления, который будет отображаться { icon: xxx.png, // Этот значок используется для отображения левого изображения в теле уведомления: Привет, я xxx, // Символы содержимого в каталоге уведомлений: auto, // Значение направления текста включает в себя: auto (автоматически), ltr (слева направо), rtl (справа налево) тег: gxlself / / Укажите идентификатор этого уведомления, Используется для обновления, удаления, замены и других операций с этим уведомлением // long: en-US // Поле lang должно ссылаться на https://tools.ietf.org/html/bcp47. Это не обязательно и имеет. нет эффекта .. // ... // Другие необязательные свойства см. в свойствах экземпляра ниже}) Получите доступ к соответствующим свойствам экземпляра:n.actions // Массив объектов NotificationAction, доступный только для чтения. Каждый объект описывает одно действие, которое пользователь может выбрать в уведомлении.
n.image // URL-адрес изображения, отображаемого как часть уведомления
n.badge // URL-адрес изображения, используемого для представления уведомления, когда недостаточно места для отображения самого уведомления.
n.permission // Существует три значения: granted , denied или default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝
n.renotify // Логическое значение. Заменять ли предыдущее уведомление при появлении нового. Если установлено значение true, это означает замену, а это означает, что появится только одно уведомление о текущей отметке. Обратите внимание на текущую разметку? Правильно, чтобы параметр true работал, tag必须установить значение атрибута.
n.requireInteraction // Логическое значение, указывающее, остается ли уведомление активным до тех пор, пока пользователь не нажмет или не отменит уведомление вместо автоматического закрытия.
n.silent // Логическое значение. Должен ли быть звук при появлении уведомления. По умолчанию false , что означает молчание.
n.timestamp //Время, когда уведомление создается или может быть использовано.
n.data // Любой тип данных, связанных с уведомлением.
n.vibrate // Когда отображается уведомление, режим вибрации, требуемый аппаратным обеспечением вибрации устройства. Так называемый режим вибрации относится к массиву, описывающему время чередования, которое представляет собой количество миллисекунд вибрации и отсутствия вибрации соответственно и продолжает чередоваться. Например, [200, 100, 200] означает, что устройство вибрирует в течение 200 миллисекунд, затем останавливается на 100 миллисекунд, а затем вибрирует в течение 200 миллисекунд. (мобильная версия)
n.sound // Строка. Аудио адрес. Указывает на уведомление о наличии звукового ресурса для воспроизведения.
n.sticky // Адсорбцию уведомлений нелегко очистить... (мобильная версия)
n.noscreen // Логическое значение. Следует ли прекратить отображение информации уведомлений на экране. По умолчанию установлено значение false , что означает, что содержимое уведомления должно отображаться на экране. (мобильная версия)
1> событие щелчка пользователя onclick по информации уведомления
2> событие onshow срабатывает после отображения уведомления
3> onerror — это событие, которое будет вызвано при обнаружении ошибки.
4> Обработка события закрытия onclose
2. Какие свойства/методы имеет объект уведомления. Используйте вывод объекта окна в консоли, чтобы открыть его и просмотреть:Стоит отметить, что метод requestPermission() действителен только в объекте Notification, а не в объекте экземпляра!!! Этот метод используется для обращения к пользователю за разрешением на отображение уведомлений и может быть вызван только пользователем активно ( его можно вызвать на странице загрузки, применить к пользователю и отправить позже...)
Методы, которыми обладают объекты экземпляра:
(1). close() используется для закрытия уведомлений -> Вы также можете добавить отложенный вызов к методу onshow, чтобы улучшить взаимодействие с пользователем...
(2). addEventListener() прослушивает события (этот общий метод).
(3). RemoveEventListener удаляет события прослушивания (в целом, как указано выше).
(4). Событие отправки события sendEvent (то же, что и выше).
Далее напишите js-тест. Если вы используете Google Chrome, рекомендуется в настройках отобразить уведомления и добавить адрес локального сервиса, чтобы разрешить уведомления.
Однако доменное имя http по умолчанию закрыто в Google Chrome и не может быть изменено. Проверьте консоль Google Chrome на наличие предупреждающего сообщения --->.
index.js:78 [Устарело] API уведомлений больше нельзя использовать из небезопасного источника. Вам следует рассмотреть возможность переключения вашего приложения на безопасный источник, например HTTPS. Дополнительную информацию см. на https://goo.gl/rStTGz.
Ну да ладно, добавление https-сертификата действительно вредно... Хотя добавление этой функции на домашнюю страницу в Firefox может быть только удовольствием...
(Tencent Cloud имеет бесплатный сертификат SSL сроком на один год, вы можете установить его самостоятельно...)
// index.jswindow.onload = function() {let gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{constructor(){this. isNotificationSupported = Уведомление в окне } isPermissionGranted() { return Notification.permission ===; 'предоставлено'; } requestPermission() { if(!this.isNotificationSupported){ return; } Notification.requestPermission(status=>{ let Permission = Notification.permission; }) } showNotification(){ if (!this.isNotificationSupported) { return } if (!this.isPermissionGranted()) { return } var n = new; Notification(gxlself передает вам привет, { icon: 'gxlself.png', body: 'Добро пожаловать в гости, я очень благодарен! Нажмите, чтобы перейти на страницу моего блога~' }); n.onshow = function () { console .log('gxlself отправил информацию уведомления'); setTimeout(function() { n.close(); }, 5000 } n.onclick = function () { location.href = 'http://gxlself.com/blog' n.close() } n.onerror = function (err) { console.log(err) } n.onclose = function () { console.log(' Окно сообщения gxlself закрыто') } } }Это отображение эффекта после запуска браузера Firefox:
Давайте посмотрим на эффект от локального запуска Google: (Доменное имя было перехвачено и отключено по умолчанию. Это было объяснено выше и не будет повторяться)
Эффект у гугла на самом деле неплохой, ну... просто https меня заблокировал...
------- Приложение для ПК -----------
Если вы хотите использовать уведомления в открытом веб-приложении, обязательно добавьте разрешение desktop-notification в файл манифеста. Уведомления можно использовать на любом уровне разрешений, размещенном на хосте или выше.
разрешения: { Desktop-notification:{} }Это уведомление доставляет больше удовольствия, а также является важной частью отправки сообщений в будущем. Оставьте эту запись... Я надеюсь, что она будет полезна для изучения всеми, и я также надеюсь, что все поддержат сеть VeVb Wulin.