Уведомления. Это те маленькие цифры, которые появляются на значках ваших приложений, которые вы не можете не заметить.
Клиенты Facebook, Google+, Twitter и почтовые клиенты используют их, чтобы сообщать вам о новых сообщениях или обновлениях.
Блоги могут использовать их, чтобы уведомлять пользователей о появлении новых сообщений или новых комментариев к интересующим их сообщениям.
Существуют даже такие веб-приложения, как
Milage Stats, которые могут уведомлять вас, когда ваш автомобиль нуждается в настройках.
Механизмы уведомлений могут помочь повысить заинтересованность пользователей, предоставляя соответствующую и своевременную обратную связь с пользователем, когда это необходимо. В этой статье показано, как включить веб-уведомления на собственных веб-сайтах, используя несколько методов, в том числе надежные функции закрепленных сайтов IE9 и с помощью раннего API веб-уведомлений HTML5.
Мы покажем вам, почему для вашего общего участия сайта очень полезно реализовать один или несколько из этих методов для уведомлений.
Зачем вообще беспокоиться об уведомлениях?
Прежде чем мы перейдем к какой-либо технической информации, давайте начнем с нескольких примеров сайтов, которые намного более интересны из-за их умного использования уведомлений.
Milage Stats — это веб-приложение для сравнения и оповещения автомобилей, созданное командой Microsoft Patterns & Practices. Одной из интересных особенностей этого приложения является его способность уведомлять пользователя, когда его автомобиль нуждается в настройке. Это действительно интересный пример уведомления, которое
позволяет пользователю узнать, когда ему нужно позаботиться о реальной задаче, которая может быть очень ценной для пользователя. Нет ничего более полезного, чем получать уведомления, когда вам нужно сделать что-то, что вы можете забыть.
Другим примером, который вы, вероятно, уже интенсивно использовали в своей повседневной жизни, являются уведомления по электронной почте. Будь то на работе или дома, почтовые уведомления сообщают пользователю, когда приходит новая почта, и помогают им быть более отзывчивыми.
Последний пример, который я приведу, — это уведомления о сайтах ежедневных сделок. Уведомления имеют решающее значение для сайтов, таких как NewEgg и SlickDeals, потому что вы пытаетесь привлечь пользователей к точке, где они не хотят пропустить ни одной ежедневной скидки. В некотором смысле вы хотите, чтобы ваши пользователи были зависимы от функций, которые предлагает ваш сайт.
Все эти примеры показывают только одно — уведомления — это важный инструмент, который, при правильном использовании, может помочь повысить заинтересованность пользователей.
ЗДРАВСТВУЙТЕ! Я здесь, пожалуйста, ответьте
Есть много способов добавить уведомления на веб-сайты / приложения. В прошлом разработчик мог реализовать мигающее поведение, при котором значок браузера мигал. Другой вариант — добавить всплывающее окно. Обе эти опции раздражали пользователей, потому что никто не любит всплывающие окна или мигающие иконки повсюду.
Сегодня существует два основных способа уведомления пользователей о том, что что-то произошло на веб-сайте / в приложении — с помощью уведомлений на рабочем столе с помощью таких утилит, как закрепленные сайты Internet Explorer 9, или с помощью API веб-уведомлений HTML5. Поскольку API веб-уведомлений HTML5 еще не является рекомендацией, это оставляет нас с другими утилитами. Имея это в виду, давайте начнем с введения закрепленных сайтов в Internet Explorer 9, а затем перейдем к API уведомлений HTML5 и нескольким другим утилитам.
Закрепить или не закрепить — вот в чем вопрос
Одной из функций, которые можно найти в операционной системе Windows 7, является возможность закрепления программ на панели задач Windows. Когда программа закреплена на панели задач, к ней можно быстро получить доступ и активировать всплывающий список, который позволяет быстро перейти к определенным областям или функциям приложения, таким как задачи, списки переходов и уведомления. Эти функции позволили разработчику раскрыть часто используемые функции программы, такие как создание нового электронного письма в Outlook или переход к часто используемому URL-адресу в Internet Explorer.
Так же , как вы бы настольные «контактные» программы, Internet Explorer 9 позволяет закрепить наиболее часто посещаемых веб — сайты и приложения. Эта функция, называемая закрепленными сайтами, может также включать задачи, списки переходов и использовать уведомления на рабочем столе для улучшения взаимодействия с пользователем. Нет никакого программного способа прикрепить сайт к панели задач — это может сделать только пользователь.
Как только разработчик добавляет эту функцию на свой сайт, у пользователя есть два варианта закрепления сайта разработчика на панели задач — отрывая вкладку от Internet Explorer 9 и перетаскивая ее на панель задач, или перетаскивая значок из адресной строки Internet Explorer 9 на панели задач. На следующих рисунках показан процесс привязки сайта MSN к панели задач Windows с использованием второго параметра:
Рисунок 1. Закрепление сайта
Согласно публикациям Microsoft, сайты, которые в полной мере используют функцию закрепленных сайтов, демонстрируют растущую заинтересованность своих пользователей. Например, после интеграции закрепленных сайтов Flixster сообщает, что пользователи читают на 34% больше страниц и проводят на своих сайтах 57% больше времени.
Используйте Волшебника! Или плагин jQuery!
Использовать функцию «Закрепленные сайты» очень просто, и она предоставляется с помощью набора метатегов и функций JavaScript API, включенных в Internet Explorer 9.
Совсем недавно Microsoft опубликовала инструмент « Мастер закрепления» , который может создать поведение закрепления сайта за несколько минут. Все, что нужно владельцу сайта, — это запустить мастер, предоставить некоторую информацию, включая URL-адрес домашней страницы и значок сайта, а затем просто интегрировать сгенерированную строку JavaScript в свой веб-сайт. Если владелец сайта предпочитает создавать поведение самостоятельно, он также может использовать созданный сообществом плагин jQuery под названием «Pinify» или просто использовать JavaScript API.
В следующем разделе мы рассмотрим JavaScript API.
API закрепленных сайтов
Чтобы позволить разработчикам активировать функцию «Закрепленные сайты», Internet Explorer 9 предоставляет набор API-интерфейсов JavaScript. Эти API разделены на четыре основные части:
1. SiteMode API — предоставляет функциональные возможности для проверки, закреплен ли сайт в данный момент на панели задач.
2. Jumplist API — управляет созданием и обновлением списков переходов, которые будут использоваться при закреплении сайта.
3. Icon Overlay API — управляет созданием оверлейных иконок для уведомлений.
4. ThumbBar Button API — Управляет созданием кнопок в представлении миниатюр панели задач .
Поскольку эта статья посвящена уведомлениям, давайте погрузимся в API Overlay Icon, который предоставляет эту функциональность.
Если вы хотите узнать более подробную информацию о других Закрепленные сайты API вы можете перейти к buildmypinnedsite.com учебник.
API наложения значков закрепленных сайтов
Icon Overlay API позволяет вашему закрепленному на сайте кнопке отображать наложение значков, уведомляющее пользователя о том, что на веб-сайте необходимо уделить внимание. Это гораздо менее навязчивый способ уведомления пользователей по сравнению с примерами, которые мы упоминали в начале, с всплывающими окнами и мигающими значками. Если значок уведомления имеет правильную форму или цвет, он привлечет внимание пользователя к кнопке панели задач.
Значок наложения будет показан в правом нижнем углу кнопки панели задач закрепленного сайта. Вот рисунок, который показывает пример наложения информационного значка:
Рисунок 2: Пример наложения значков
Разработчик отвечает за создание поведения уведомлений, и его следует использовать в основном для важных статусов, таких как новая почта, новые сообщения в блоге, состояние сети, сообщения и т. Д. Чрезмерное использование поведения наложения значков может привести к негативным последствиям для пользователей. , заставляя их игнорировать важные уведомления или отключить их.
API Overlay Icon включает в себя две простые функции :
1. msSiteModeSetIconOverlay — функция позволяет сайту сообщать пользователям о предупреждениях, уведомлениях и статусах, добавляя значок поверх существующего значка веб-сайта. Метод принимает два параметра — отображаемый URL-адрес изображения и значение всплывающей подсказки. Вот простой пример использования функции:
window.external.msSiteModeSetIconOverlay (‘/ info.ico’, ‘Attention Needed’);
2. msSiteModeClearIconOverlay — функция очищает любой существующий значок наложения от закрепленного значка на панели задач сайта. Вот пример того, как использовать функцию:
window.external.msSiteModeClearIconOverlay ();
Вот полный и простой пример, который показывает, как использовать Icon Overlay API:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Application</title>
<meta name="application-name" content="Sample Application" />
<meta name="msapplication-tooltip" content="Sample Application" />
<meta name="msapplication-starturl" content="./Demo.html" />
<meta name="msapplication-task" content="name=Dzone;action-uri=http://www.dzone.com;icon-uri=/favicon.ico" />
<script type="text/javascript">
window.external.msSiteModeSetIconOverlay('/info.ico', 'Attention Needed');
function contentLoaded() {
document.getElementById('btnRemove').onclick = function () {
window.external.msSiteModeClearIconOverlay();
}
}
document.addEventListener("DOMContentLoaded", contentLoaded, false);
</script>
</head>
<body>
<form>
<div class="page">
<div class="main">
<input id="btnRemove" type="button" value="Remove Icon Overlay" />
</div>
</div>
</form>
</body>
</html>
В примере, когда сайт загружается и закрепляется, информационный значок будет добавлен к значку панели задач. Веб-страница также содержит кнопку, которая при нажатии удалит наложение значка. Другой способ удалить значок — установить тайм-аут и очистить его через несколько секунд.
Разработчик должен учитывать, что он может вызывать msSiteModeSetIconOverlay более одного раза, прежде чем очистить значок. Последний добавленный значок будет показан пользователю, а при его очистке будет отображен значок снизу (поведение «Последний пришел первым»).
Как видите, высокая награда, которую получают уведомления о закрепленном сайте с минимальными усилиями, оправдывает затраты времени на внедрение этой функции. Далее мы рассмотрим веб-уведомления HTML5, которые могут быть реализованы вместе с закрепленными сайтами. Там нет необходимости выбирать между тем или другим, вы можете сделать оба!
Новый малыш на блоке
API веб-уведомлений HTML5 — это механизм для создания простых уведомлений, которые будут предупреждать пользователей за пределами веб-страницы. Эти уведомления могут использоваться пассивно или активно, и они не привязаны к открытой вкладке. API полагается на пользователя, предоставляющего разрешение на уведомления. Без указания на то, что уведомления были запрошены и утверждены пользователем, механизм уведомлений не будет работать.
Предоставление разрешений на веб-уведомления HTML5
Первым шагом для использования веб-уведомлений является проверка того, хочет ли пользователь получать уведомления о чем-либо. В следующем примере кода показано, как использовать функции requestPermission и checkPermission, которые являются частью API уведомлений:
$('#btnGrantPermission').click(function () {
if (window.Notifications.checkPermission() == 0) {
createNotification();
} else {
window.Notifications.requestPermission();
}
});
В примере используется jQuery для привязки события click к кнопке, которая проверяет, есть ли у сайта разрешение на использование уведомлений или нет. Если разрешение существует, функция checkPermission вернет 0 и будет вызвана функция createNotification. Если разрешения нет, вызывается функция requestPermission, чтобы запросить разрешение на использование уведомлений на веб-странице. Разработчик должен знать, что функция requestPermission должна выполняться внутри обработчика событий.
Уведомить пользователя с помощью веб-уведомлений HTML5
Чтобы использовать API веб-уведомлений, вам нужно создать объект уведомления. Вот пример создания уведомления с использованием функции createNotification:
function createNotification() {
var notification = window.Notifications.createNotification("icon.png", "New HTML5 Notification", "More Content...");
notification.onshow = function () {
setTimeout(notification.cancel(), 1500);
}
notification.show();
}
В этом примере показано использование фабричной функции createNotification для создания уведомления. Функция получает URI для изображения, отображаемого в уведомлении, строку темы и строку содержимого. После этого обработчик подключается к событию onshow, которое вызывает функцию setTimeout для отмены уведомления через 1500 миллисекунд. Функция show, которая используется в последней строке, будет отображать уведомление для пользователя. В спецификации вы также можете использовать объект Notification и создавать его экземпляры с теми же параметрами.
Что использовать тогда?
Как было написано ранее, API веб-уведомлений HTML5 в настоящее время находится в стадии разработки. Так как это так, код, показанный в статье, может со временем меняться. Более того, единственными браузерами, которые поддерживают API веб-уведомлений HTML5, являются браузеры, которые используют WebKit в качестве движка браузера (Safari, Chrome). Это означает, что использование API в настоящее время очень рискованно. С другой стороны, закрепленные на IE9 сайты — это функция, реализованная многими крупнейшими сайтами, такими как Twitter, Amazon, IMDb и многими другими.
Одно из основных различий между закрепленными сайтами и веб-уведомлениями HTML5 заключается в том, что закрепленные сайты не требуют пользовательских разрешений. Оба API просты в реализации и не требуют большого количества кодирования и исследований. Поскольку в этой статье рассматриваются уведомления для веб-сайтов на рабочем столе Windows 7, в ней не рассматриваются другие механизмы уведомления и «закрепления», которые вы можете там найти, такие как Fluid для Mac или GWatchman, который является уведомителем служб Google.
Резюме
Уведомления могут обеспечить хороший канал связи между сайтом и его пользователями. Это может создать большую заинтересованность для сайта, если функция используется эффективно, не раздражая пользователей.
В статье были показаны два способа создания веб-уведомлений на рабочем столе Windows 7, включая закрепленные сайты IE9 и API веб-уведомлений HTML5. Нет сомнений в том, что оба способа имеют свои плюсы и минусы, но использование любого из них может помочь веб-сайту создать диалог со своими пользователями и улучшить их работу
.
Хороший пользовательский опыт — это то, что возвращает пользователей снова и снова, и именно к этому стремятся веб-сайты.