Как реализовать функцию уведомления рабочего стола веб-уведомлений в HTML5

Иногда мы видим эту подсказку в правом нижнем углу рабочего стола:

Это приглашение на рабочем столе представляет собой новую технологию веб-уведомлений HTML5.

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

PS: Помимо IE, все основные современные браузеры имеют базовую поддержку этого десктопного push.

начинать

Создать уведомление о сообщении очень просто. Просто используйте класс Notification в объекте окна. Код выглядит следующим образом:

 var n = новое уведомление (Desktop push, { icon: 'img/icon.png', body: 'Это мое первое уведомление на рабочем столе.', изображение: 'img/1.jpg'});

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

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

Конечно, возможно, вы ничего не видите, поэтому не волнуйтесь и продолжайте читать.

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

 пусть myNotification = новое уведомление (название, параметры);

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

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

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

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

значок: значок для отображения уведомлений

image: URL-адрес изображения, которое будет отображаться в теле уведомления.

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

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

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

Когда этот код будет выполнен, браузер спросит пользователя, разрешить ли сайту отображать уведомления о сообщениях, как показано на следующем рисунке:

Уведомления будут отображаться только в том случае, если пользователь нажмет Разрешить и разрешит отправку уведомлений.

Как узнать, нажимает ли пользователь «Разрешить» или «Заблокировать»?

Экземпляр окна Notification имеет функцию requestPermission для получения статуса авторизации пользователя:

 // Сначала мы проверяем, есть ли у нас разрешение на отображение уведомлений // Если нет, мы подаем заявку на разрешение if (window.Notification && Notification.permission !== предоставлено) { Notification.requestPermission(function (status) { //status is статус авторизации. //Если пользователь нажимает «Разрешить», статус «разрешен» // Если пользователь нажимает «Отключить», статус «запрещен» // Это позволит нам использовать Notification.permission, если в Chrome/Safari (Notification.permission !== статус) { Notification.permission = status } });

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

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

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

В Notification с самого начала был сформулирован ряд функций событий. Разработчики могут использовать эти функции для комплексного взаимодействия с пользователем:

Есть: onshow, onclick, onerror, onclose.

 var n = new Notification(Desktop push, { icon: 'img/icon.png', body: 'Это мое первое уведомление на рабочем столе.'}); // функция onshow срабатывает, когда отображается окно сообщения // ОК, сделайте запись некоторых данных и регулярное закрытие окна сообщения n.onshow = function() { console.log('Показать окно сообщения' //Закрываем окно сообщения через 5 секунд setTimeout(function() { n.close(); }); , 3000);};//Вызывается при нажатии на окно сообщения //Вы можете открыть соответствующее представление, закрыть окно сообщения и выполнить другие операции одновременно n.onclick = function() { console.log('Нажмите на сообщение box'); // Открыть соответствующее представление n.close();};//При возникновении ошибки будет вызвана функция onerror //Если авторизация не предоставлена, функция onerror также будет выполнена при создании Экземпляр объекта уведомления n.onerror = function() { console.log('Ошибка окна сообщения'); // Выполняем другие действия}; // Функция onclose будет вызываться при закрытии окна сообщения n.onclose = function() { console.log('Закрыть окно сообщения' ) ; //Сделаем что-нибудь еще};

простой пример

 <!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <title>Document</title> </head> <body> <button>Нажмите, чтобы инициировать уведомление</button> < /body> <script> window.addEventListener(load, function() { // Сначала проверим, есть ли у нас разрешение на отправку уведомлений // Если нет, запрашиваем разрешение if (window.Notification && Notification.permission !== предоставлено) { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } }); var button = document.getElementsByTagName(button)[0]; button.addEventListener(click, function() { // Создаем уведомление, если пользователь согласен if (window.Notification && Notification.permission === предоставлено) { var n = new Notification(Hi!); } // Если пользователь не выбирает, отображать ли уведомления // Примечание. Поскольку в Chrome мы не можем определить, имеет ли атрибут разрешения значение, небезопасно // проверять, имеет ли значение этот атрибут. по умолчанию else. if (window.Notification && Notification.permission !== отказано) { Notification.requestPermission(function(status) { if (Notification.permission !== status) { Notification.permission = status; } // Если пользователь согласен if (status === предоставлено) { var n = new Notification(Hi! } // В противном случае мы можем пойти на компромисс и использовать оповещение обычного режима else { alert(Hi! }); // Если пользователь отказывается принять уведомление else { // Мы можем пойти на компромисс и использовать оповещение обычного режима (Привет! } });

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

Выше мы просто отображаем сообщение.

 if (статус === предоставлено) { var n = новое уведомление (Привет);}

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

 for(var i=0; i<10; i++) {var n = новое уведомление(Hi,+i);}

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

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

Поэтому к вновь созданному уведомлению необходимо добавить тег.

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

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

 for (var i = 0; i < 10; i++) { // Наконец, будет видно только уведомление с содержимым Hi! 9 var n = new Notification(Hi! + i, {tag: 'soManyNotification'});}

Уведомление о сообщениях — хорошая функция, но не исключается, что некоторые сайты используют эту функцию злонамеренно. Как только пользователь разрешает ее, они время от времени отправляют недружественные сообщения и мешают работе пользователя. На данный момент мы можем удалить. Разрешения сайта. Отключите функцию уведомления о сообщениях.

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

Итак, реализовано самое базовое веб-уведомление.

Вышеупомянутый метод реализации функции уведомления на рабочем столе веб-уведомлений в HTML5, представленный редактором. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!

Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!