Skip to content

Почему (и как) вы должны использовать веб уведомления

Веб уведомления(Web notifications) позволяют показывать пользователю какие-либо сообщения прямо в его браузере. С Chrome 29, Google полностью внедрил Chrome Notification Center, что расширяет область использования веб уведомления.

Chrome, Firefox и последние версии Opera уже поддерживают уведомления. Вот несколько причин, почему их стоит использовать:

  • Поскольку push-уведомления становятся все более распространенным явлением, то пользователи будут ожидать их и в веб-приложениях и сайтах.
  • Центр оповещений Chrome сохраняет все уведомления в выпадающем списке. Когда пользователь будет просматривать его, он может вернуться на сайт и закончить свою задачу.
  • Уведомления исполняются вне браузера. Это означает, что производители браузеров смогут адаптировать оповещения для разных устройств. Так, например, уведомление занимает много места на экране смартфона. Поэтому разработчики могут создать способ вывода оповещений вне браузера или в ненавязчивой форме.
chrome-notification2

Как использовать уведомления

Web Notifications API

Использовать уведомления не трудно. API веб уведомлений (Web Notifications API) дают Вам все необходимое для этого. Для примера создадим функцию уведомления. Таким образом, мы можем вызвать ее несколько раз.

Чтобы сделать уведомление, надо вызвать new Notification с некоторыми настройками:

window.addEventListener('load', function() {
	function theNotification() {
	   	var n = new Notification("Hi!",  {
	   		icon: 'icon.jpg', 
	   		tag: 'note', 
	   		body: 'Notification content...'
	    });
	}

Разберем код выше. «Hi!» — это заголовок уведомления. Вторым аргументом передается объект со специальными настройками:

  • dir: «ltr» или «rtl», направление текста уведомления.
  • icon: URL до картинки, представляющей уведомление.
  • tag: служит индификатором для уведомления.
  • body: основное тело (текст) уведомления.
  • lang: код локали (BCP 47).

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

	// Query selector
	var button = document.querySelector('#button');
	
	// When the button is clicked
	button.addEventListener('click', function () {
	
		// If notifications are granted show the notification
		if (Notification && Notification.permission === "granted") {
			theNotification();
		}
	
		// If they are not denied (i.e. default)
		else if (Notification && Notification.permission !== "denied") {
			
			// Request permission
			Notification.requestPermission(function (status) {
				
				// Change based on user's decision
				if (Notification.permission !== status) {
					Notification.permission = status;
				}
				
				// If it's granted show the notification
				if (status === "granted") {
					theNotification();
				}
		
				else {
					// Back up if the user's browser doesn't support notifications
				}
				
			});
		
		}
	
		else {
			// Back up if the user's browser doesn't support notifications
		}
		
	});

В этой части кода мы используем Notification.requestPermission, чтобы запросить разрешение от браузера. Вызов функции вернет строку: granteddenied, или default. Если возвращено значение granted, то можем показать уведомление. Если это не так, необходимо спросить у пользователя разрешение.

JavaScript

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

Главная проблема медленного развития веб-уведомлений — система разрешения. Большинство пользователей полагает, что, если браузер спрашивает его, значит это должно быть опасно. Поэтому приходится искать обходные пути.

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

<p>Данный сайт использует уведомления! Нажмите "Уведомления!"
ниже разрешите браузеру их показывать. Это позволит снабдить вас информацией для более удобного путешествию по сайту</p>

<button id="button">Уведомления!</button>
window.addEventListener('load', function() {
	// Query selector
	var button = document.querySelector('#button');
	
	// Event
	button.addEventListener('click', function() {
		
		// If browser supports notifications
		if(Notification) {
			
			// If the notification is not denied
			if(Notification.permission !== "denied") {
				
				// Request permission
				Notification.requestPermission(function (status) {
				
					if (Notification.permission !== status) {
						Notification.permission = status;
					}
					
				});
				
			}
			
		}
			
	});
	
	// Set an interval so when notifications are granted or denied the browser will redirect
	setInterval(function() {
		
		if(Notification.permission === "granted" || Notification.permission === "denied") {
			
			// Put the URL you want to redirect to here.
			document.location.href = 'redirect URL';
			
		}
		
	}, 500);
});

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

Так же можно заменить браузерные уведомления, эмулировать их с помощью div с фиксированным позиционированием. Такой вариант вы встретите в демонстрации.

На момент публикации материала, поддержка браузерами Web Notifications API выглядит следующим образом:

Chrome/SafariFirefoxOperaInternet Explorer
Web Notifications API++

Источник: InsertHTML