Web API: Отобразить уведомление в веб-приложении с помощью Web Notification API

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

Пример использования Web Notification API

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

if( !( 'Notification' in window ) )
{
	console.log( 'Этот браузер не поддерживает системные уведомления' );
} 
else
{
	if ( Notification.permission === 'granted' )
	{
		// Если разрешение уже было дано	
		let notification = new Notification( 'Ку-ку' );	
	} 
	else if ( Notification.permission !== 'denied' )
	{	
		// Если пользователь ещё не давал разрешение, его можно запросить:
		Notification.requestPermission( function( permission )
		{
			// Если пользователь дал разрешение, то создаем уведомление
			if( permission === 'granted' )
			{			
				let notification = new Notification( 'Уведомление' );
			}
		});
	}
	else if( Notification.permission !== 'default' )
	{
		// Выбор пользователя неизвестен, поэтому браузер будет действовать так, как если бы значение было отклонено
	}
}

Можно настроить уведомление, добавив к нему некоторые параметры, такие как иконка, текст и т.д.

// Первым параметром переадётся заголовок уведомления, далее идёт набор параметров
let notification = new Notification( 'Ку-ку', {
	body: 'Привет, это снова Я.', // Строка тела уведомления
	icon: 'https://path-to-your-icon.png', // URL-адрес изображения, используемого в качестве значка уведомления
	dir: 'ltr', // Направление текста уведомления
	lang: 'ru-RU', // Код языка уведомления
	tag: 'message-notification', // Идентификатор уведомления (если есть)
	requireInteraction: true, // Логическое значение, указывающее, что уведомление должно оставаться активным до тех пор, пока пользователь не щелкнет его или не закроет, а не закрываться автоматически
	actions: // Предоставляет действия, доступные для выбора пользователями для взаимодействия с уведомлением
	[
		{ action: 'read', title: 'Прочитать сообщение' },
		{ action: 'ignore', title: 'Игнорировать' }
	]
});

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

self.addEventListener('notificationclick', function( event )
{
	event.notification.close();
	if( event.action === 'read' )
	{
		// Обработка действия "Прочитать сообщение"
	} 
	else 
	{
		// Обработка остальных действий или отсутствия действия
	}
}, false);