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

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

предисловие

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

Права пользователя

Чтобы отображать уведомительные сообщения для пользователей, вам необходимо получить разрешения пользователя, а одно и то же доменное имя должно получить разрешения только один раз. Уведомление может работать только с разрешения пользователя, чтобы реклама на некоторых веб-сайтах не злоупотребляла уведомлением или иным образом не влияла на пользователей. Итак, как узнать, разрешен ли пользователю доступ или нет?

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

  • default : не знаю выбора пользователя, по умолчанию.
  • предоставлено : Разрешено пользователем.
  • отказал : пользователю отказано.
if(Notification.permission === 'granted'){
    console.log('用户允许通知');
}else if(Notification.permission === 'denied'){
    console.log('用户拒绝通知');
}else{
    console.log('用户还没选择,去向用户申请权限吧');
}

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

Когда пользователь не выбрал, нам нужно запросить у пользователя разрешение. Объект Notification предоставляет метод requestPermission() для запроса разрешения от текущего источника пользователя на отображение уведомлений.

Предыдущий синтаксис на основе обратного вызова устарел (конечно, он все еще работает в современных браузерах), а последняя спецификация обновила этот метод до синтаксиса на основе обещаний:

Notification.requestPermission().then(function(permission) {
    if(permission === 'granted'){
        console.log('用户允许通知');
    }else if(permission === 'denied'){
        console.log('用户拒绝通知');
    }
});

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

После авторизации пользователя вы можете получать push-уведомления.

var notification = new Notification(title, options)

Параметры следующие:

  • title: заголовок уведомления
  • options: параметры настройки уведомления (необязательно).
    • body: содержимое уведомления.
    • tag: Идентификационный тег, представляющий уведомление. При использовании одного и того же тега будет открыто только одно и то же окно уведомления.
    • icon: URL-адрес значка для отображения в уведомлении.
    • изображение: URL-адрес изображения для отображения в уведомлении.
    • data: данные типа задачи, которые вы хотите связать с уведомлением.
    • requireInteraction: уведомление остается в силе и не закрывается автоматически, значение по умолчанию — false.

Есть еще какие-то параметры, потому что они здесь не используются или не нужны, тут и говорить не приходится.

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧',
    tag: 'linxin',
    icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
    requireInteraction: true
})

Отображение сообщения уведомления выглядит следующим образом:

image
image

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

Как видно из вышеперечисленных параметров, нет параметра, используемого для настройки продолжительности отображения. Если я хочу, чтобы оно закрывалось автоматически через 3 секунды, я могу вызвать метод close(), чтобы закрыть уведомление.

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧'
})

setTimeout(function() {
    n.close();
}, 3000);

мероприятие

Свойство onclick интерфейса уведомлений задает прослушиватель событий для получения событий щелчка. При нажатии на окно уведомления будет запущено соответствующее событие, например открытие URL-адреса, что приведет к возврату пользователя на его веб-сайт.

var n = new Notification('状态更新提醒',{
    body: '你的朋友圈有3条新状态,快去查看吧',
    data: {
        url: 'http://blog.gdfengshuo.com'
    }
})
n.onclick = function(){
    window.open(n.data.url, '_blank');      // 打开网址
    n.close();                              // 并且关闭通知
}

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

Так много было сказано прежде, на самом деле это для использования. Итак, где его можно использовать?

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

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

Я думаю, что это больше подходит для новостных сайтов. Когда пользователи просматривают новости, они могут получать новости в режиме реального времени. Взяв в качестве примера Tencent Sports, он использует Notification API. Введено уведомление 2017_v0118.js на странице, если вам интересно, вы можете увидеть, как другие используют его зрело.

Как только вы зайдете на страницу, вы будете авторизованы, а на вашей странице появится плавающее окно с предложением разрешить авторизацию. Если разрешено, он начнет отправлять вам push-уведомления. Однако, когда он закрывает вкладку, уведомление также будет закрыто, потому что оно прослушивает страницу перед событием загрузки.

function addOnBeforeUnload(e) {
    FERD_NavNotice.notification.close();
}
if(window.attachEvent){
    window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
    window.addEventListener('beforeunload', addOnBeforeUnload, false);
}

совместимый

Когда дело доходит до совместимости, это, естественно, большое падение, и производительность каждого браузера будет немного отличаться. Мобильный терминал почти полностью отключен, но большинство терминалов ПК могут его поддерживать, за исключением IE. Поэтому перед использованием нужно проверить, поддерживает ли браузер Notification.

Еще статьи:GitHub.com/lin-new/no...

Я слышал, что написав статью, можно получить книгу об асинхронном сообществе. Асинхронное сообщество — это ведущее книжное сообщество ИТ-специалистов в Китае. Мне очень нужна эта книга, поэтому я изо всех сил старался написать эту статью, я хочу эту книгу«Высокопроизводительная адаптивная веб-разработка на практике»