Закрепленные сайты в Windows 8
Начальный экран Windows 8 — самое удобное место для поиска необходимых вам приложений и контента и отслеживания их обновлений. Плитки приложений находятся в активном состоянии и отображают актуальный настроенный контент, благодаря чему вы всегда будете в курсе интересующих вас событий.
Мы уже писали о просмотре сайтов в Windows 8 с использованием Internet Explorer 10 в стиле Metro. В этой записи блога подробно рассматриваются закрепленные сайты Internet Explorer 10 и доступ к ним на начальном экране Windows 8, а также соответствующие сайтам визуальные элементы и уведомления на индикаторах событий, сообщающие о появлении нового контента. Мы также рассмотрим особенности поддержки закрепленных сайтов со стороны веб-разработчиков.
В следующем видеоролике показаны закрепленные сайты в Windows 8 Consumer Preview в действии.
Закрепленные сайты в Windows 8
Закрепленные сайты — это больше, чем просто "Избранное"
Пользователи Windows большую часть своего времени проводят в Интернете, и из результатов телеметрии, проводимой с их явного согласия (в рамках официальной программы улучшения качества программного обеспечения Майкрософт), мы знаем, что они многократно посещают один и тот же набор сайтов. С помощью закрепленных сайтов в Windows 8 можно легко и быстро перейти к интересующим вас сайтам. Благодаря уведомлениям на индикаторах событий, плитки сайтов наполняются новой информацией, и вы всегда будете осведомлены о том, что появился новый контент.
Разработчики могут использовать закрепленные сайты, чтобы улучшить связь между своим сайтом и пользователями и продвигать свой сайт непосредственно на начальном экране Windows. Мы обнаружили, что для сайтов, которые использовали этот компонент с Internet Explorer 9 в Windows 7, рост числа посещений составил от 15 до 50 процентов. В Windows 8 взаимодействовать с сайтами еще удобнее благодаря обновлениям плитки сайта, даже если он не открыт в браузере.
На двух следующих снимках экрана представлены плитки закрепленных сайтов и уведомления на индикаторах событий.
Закрепленные сайты на начальном экране: показаны соответствующие сайту визуальные элементы и уведомления на индикаторах событий
Пример уведомления на индикаторе событий на плитке закрепленного сайта
Соответствующий сайту визуальный элемент на плитке закрепленного сайта
Как веб-разработчик, вы можете предоставить значок сайта, который будет использоваться Internet Explorer 10 для представления сайта в браузере, в адресной строке, на странице новой вкладки и на начальном экране. Для идентификации сайта, закрепленного на начальном экране, Internet Explorer 10 использует большие значки сайта (32 x 32 пикселя) аналогично тому, как они использовались в Internet Explorer 9 для закрепления на панели задач.
Снимок экрана, на котором показано закрепление сайта: Internet Explorer 10 в стиле Metro отображает предварительный вид плитки сайта
Internet Explorer 10 определяет преобладающий цвет значка и автоматически использует его в качестве цвета фона для плитки на начальном экране.
Одним из средств создания значков является x-icon editor. Воспользуйтесь им для создания значка размером 32x32 для своего сайта. С его помощью можно также преобразовать изображение в формат файла значка (с расширением ICO). Затем свяжите этот ICO-файл, используя обычную разметку для значка сайта:
<link href="testdrive.ico" rel="shortcut icon" />
Уведомления на индикаторах событий, обновляющиеся в фоновом режиме
Windows 8 может выполнять опрос на предмет наличия обновлений для плиток сайтов, закрепленных на начальном экране. Этот механизм хорошо работает для облегченных уведомлений, таких как уведомления о новых сообщениях от других пользователей (полученных по электронной почте или в социальных сетях), новых скидках в интернет-магазине, новых статьях в канале новостей и т. п.
С помощью Internet Explorer 10 и Windows 8 вы можете предлагать уведомления на индикаторах событий непосредственно на плитках ваших закрепленных сайтов. Это означает, что пользователи получают обновленные данные с интересующих сайтов, не открывая их в браузере. В качестве примера закрепите демонстрационный сайт Fresh Tweets с помощью Internet Explorer 10 в Windows 8 Consumer Preview. Плитка закрепленного сайта периодически обновляется и уведомляет пользователя о появлении новых записей в Twitter.
Для отображения фоновых уведомлений требуются компоненты, предоставляемые сайтами. К ним относятся: (1) XML-код уведомления на индикаторе событий — XML-ответ, описывающий уведомление на индикаторе событий для Windows, и (2) мета-теги закрепленного сайта — разметка веб-страницы с указанием местоположения и периодичности для выполняемого Windows опроса на предмет наличия уведомлений.
XML-код уведомления на индикаторе событий
Windows обрабатывает опросы и отображение уведомлений на индикаторах событий. Windows опрашивает XML-код уведомления на индикаторе событий, описывающий визуальный элемент для плитки закрепленного сайта. Этот простой XML-ответ определен в XML-схеме индикатора событий. Например, чтобы обновить плитку, отобразив на ней число "3", вы отправляете следующий XML-код:
<?xml version="1.0" encoding="utf-8" ?>
<badge value="3"/>
Индикаторы событий могут представлять собой числа или глифы, такие как индикаторы "оповещение" и "новое сообщение". Полный список элементов, которые может отображать индикатор событий, см. в статье Выбор изображения индикатора событий на сайте MSDN.
Мета-теги закрепленного сайта
Следующий этап заключается в установлении связи между XML-кодом уведомления на индикаторе событий и веб-страницей. Чтобы определить, поддерживает ли веб-страница возможности закрепленных сайтов, такие как уведомления и списки переходов, Internet Explorer 10 использует мета-тег "application-name". Для обеспечения поддержки уведомлений на индикаторах событий включите в код разметки новый мета-тег, содержащий URL-адрес XML-кода уведомления на индикаторе событий и периодичность, с которой Windows должна его запрашивать. Internet Explorer проверяет наличие мета-тега "msApplication-badge" на странице в момент закрепления, а также при последовательных запусках сайта с плитки закрепленного сайта.
<meta name="msapplication-badge" value="frequency=360;polling-uri=http://ietestdrive2.com/PinnedSites/TweetCounter/microsoft/360" />
Параметр value состоит из двух компонентов: polling-uri (обязательный) и frequency (необязательный).
polling-uri — абсолютный универсальный код ресурса (URI), из которого Windows запрашивает простой XML-документ, определенный выше.
frequency — количество минут между обновлениями. Можно не указывать этот параметр или указать для него одно из следующих значений:
- 30 (Windows будет опрашивать URI каждые 30 минут)
- 60 (1 час)
- 360 (6 часов)
- 720 (12 часов)
- 1440 (1 день. Это значение используется по умолчанию.)
Если параметр frequency пропущен или имеет значение, отличное от приведенных выше, обновление по умолчанию выполняется ежедневно (с периодичностью 1440 минут).
API-интерфейсы для обновления уведомлений на индикаторах событий
Вы также можете убирать или обновлять индикатор событий плитки сайта непосредственно с веб-страницы, чтобы поддерживать плитку сайта в актуальном состоянии.
Когда пользователь запускает плитку закрепленного сайта с начального экрана, веб-сайт выполняется в собственном сеансе, называемом SiteMode, и может использовать следующие функции JavaScript для обновления индикатора событий.
window.external.msSiteModeClearBadge() убирает уведомление на индикаторе событий с плитки. В демонстрационном примере Fresh Tweets, когда пользователь получает уведомление и касается плитки, чтобы запустить браузер, веб-страница использует msSiteModeClearBadge(), чтобы убрать уведомление с плитки. Когда на плитке снова появляется индикатор событий, пользователь понимает, что доступен новый контент.
window.external.msSiteModeRefreshBadge() вызывает Windows, чтобы обновить индикатор событий для сайта с использованием URI опроса. Например, пользователь видит на плитке закрепленного сайта уведомление о трех непрочитанных сообщениях и щелкает плитку, чтобы вернуться на сайт. Если пользователь читает только первое сообщение, можно сделать так, чтобы индикатор событий отображал правильное количество прочитанных и непрочитанных (два) сообщений.
В Windows 8 Consumer Preview эти два API функционируют только на сайтах, работающих в локальной интрасети или в зонах надежных сайтов. Это будет исправлено в следующем предварительном выпуске. Чтобы протестировать эти API в Consumer Preview на своем сайте, добавьте соответствующий домен в список надежных сайтов, используя вкладку "Безопасность" диалогового окна "Свойства Интернета".
Уведомления на панели задач рабочего стола
Уведомления, отображаемые в виде дополнительных значков для закрепленных сайтов на панели задач рабочего стола, будут работать для Windows 8 и Internet Explorer 10 на рабочем столе. Такая форма уведомлений недоступна для закрепленного сайта на начальном экране Windows 8. Операционная система Windows 8 обрабатывает уведомления для всех плиток на начальном экране энергоэффективным способом.
Списки переходов для быстрой навигации по сайту
Многие наиболее популярные сайты, например NYTimes.com, CNN.com и Amazon.com, поддерживают такие компоненты закрепленных сайтов Internet Explorer 9, как списки переходов для перехода к конкретной задаче или определенному разделу сайта. При использовании Internet Explorer 10 списки переходов, доступные на панели навигации, обеспечивают удобный для сенсорного управления способ навигации по сайту.
Когда пользователь открывает сайт с начального экрана, кнопка закрепления показывает, что для данного сайта доступны списки переходов:
Снимок экрана, на котором показан список переходов демонстрационного сайта Fresh Tweets
Такой же список переходов отображался браузером Internet Explorer 9 на панели задач Windows 7.
В список переходов своего сайта можно добавить неизменные задачи, используя разметку страницы (подробнее), или задачи могут добавляться динамически в зависимости от действий пользователя (подробнее). В Windows 8 индикаторы событий и списки переходов относятся к конкретным сайтам. Для каждого полного доменного имени может существовать один и только один набор данных опроса и данных списка переходов.
Заключение
Благодаря интеграции Internet Explorer 10 с начальным экраном Windows 8 сайты находятся в центре внимания. Веб-разработчики могут создавать соответствующие сайтам визуальные элементы для плиток закрепленных сайтов, уведомлять о появлении нового контента на сайте и предлагать списки переходов для быстрой навигации по сайту.
Мы с нетерпением ждем, когда вы добавите эти простые компоненты в свои веб-сайты, чтобы увеличить их влияние в Windows 8.
— Рахул Лалмалани (Rahul Lalmalani), руководитель программы, Internet Explorer