Как-то мне пришла идея реализовать поддержку Pinned Sites в виде расширения BlogEngine.NET. Может быть и еще кому пригодится.
Что такое прикрепленные сайты (pinned sites)? По сути это попытка слегка замаскировать веб-сайт под обычное приложение, а именно:
- позволить создать для него ярлык в меню "Пуск";
- выделить для него отдельное окно Internet Explorer;
- разрешить прикрепить его к панели задач и предоставить возможность вывести дополнительные пункты в её контекстное меню;
- обеспечить добавление кнопок управления сайтом в его окно предварительного просмотра.
Хорошая статья с описанием всех этих возможностей расположена на сайте MSDN. В ней рассмотрена их реализация на наглядных примерах. Здесь же будет приведено только краткое описание. Возможно кому-то этого будет достаточно и сэкономит время.
Настраиваем внешний вид прикрепленного сайта
В первую очередь стоит отметить возможность настройки внешнего вида прикрепленного сайта. Это обеспечивается с помощью следующей группы элементов <meta>:
<meta name="application-name" content="Andrey on .NET" />
<meta name="msapplication-tooltip" content="Про .NET, ASP.NET, C#, WPF, Silverlight ..." />
<meta name="msapplication-starturl" content="http://andrey.moveax.ru/" />
<meta name="msapplication-navbutton-color" content="#5686af" />
<meta name="msapplication-window-min" content="width=1024;height=720" />
<link rel="shortcut icon" href="pics/blogengine.ico" type="image/x-icon" />
Разберемся, какие настройки задаются в приведенном коде:
- application-name – Название веб-сайта.
- msapplication-tooltip – Текст подсказки, выводимый при наведении курсора мыши на иконку.
- msapplication-starturl – Адрес страницы сайта, которая должна быть открыта при нажатии на иконку.
- msapplication-navbutton-color – Цвет кнопок "Вперед" и "Назад". Возможно задать как код цвета так и его наименование (по аналогии с CSS). При этом, если его не указать, то будет выбран наиболее часто используемый цвет в иконке, что иногда дает неожиданные результаты.
- msapplication-window-min – Размеры открываемого окна Internet Explorer. При этом в значении content указываются сразу как ширина, так и высота: "width=X;height=Y".
- Элемент <link rel="shortcut icon"…> задаёт иконку для сайта. Она должна содержать не только стандартную картинку размером 16x16, но и более крупные варианты вплоть до 48x48 для отображения на рабочем столе. При отсутствии нужного размера он будет получен из существующих при помощи масштабирования.
Настраиваем контекстное меню – JumpList
В контекстом меню веб-сайта, открывающемся нажатием правой кнопки на иконке сайта в панели задач, есть два раздела в которые можно добавить пункты меню:
- Задачи (Tasks) – ссылки на важные разделы сайта (до 5 элементов, например: ссылки на разделы сайта, форму для связи, страницу пользователя и т.д.).
- Ссылки (Jump List items) – ссылки на актуальные ресурсы (до 20 элементов, например: новости, последние публикации, поступившие персональные сообщения, объявления, важные уведомления и т. д.).
Основная разница между ними в том, что Задачи указываются с помощью элементов <meta> и могут быть обновлены только при загрузке страницы. В отличии от них, Ссылки управляются c помощью кода на JavaScript и могут быть изменены в реальном времени.
Обратите внимание, что ничего не ограничивает создание разных элементов контекстного меню в зависимости от текущей страницы или бизнес-логики сайта.
Установим небольшое соглашение: все указанные далее JavaScript функции для работы с прикрепленным сайтом определены для объекта window.external. Однако вне кода примеров будут указаны только их имена, чтобы описания не выглядели громоздко.
Задачи
Создать новую задачу очень просто. Для этого необходимо добавить элемент <meta> следующего вида (добавлены переносы строк для более удобного чтения кода):
<meta name="msapplication-task"
content="name=ASP.NET MVC 3 в деталях;
action-uri=http://andrey.moveax.ru/page/aspnet-mvc-3-in-depth.aspx;
icon-uri=/pics/categories/asp.net.ico">
Имя name всегда устанавливается равным "msapplication-task". В значении content через разделитель ";" перечисляется три параметра:
- name – название задачи которое будет отображено в контекстном меню;
- action-uri – ссылка на страницу, которая должна быть открыта;
- icon-uri – (опционально) ссылка на иконку.
Как было уже отмечено, можно добавить до 5 таких элементов включительно.
Ссылки
Для работы с Ссылками необходимо использовать код на JavaScript. При этом в начале функции, которая будет использовать рассматриваемые возможности, необходимо убедиться в том, что сайт запущен в прикреплённом режиме. Для этого можно использовать вот такой код проверки:
var isPinnedSiteMode = window.external && "msIsSiteMode" in window.external
&& window.external.msIsSiteMode();
Затем, если переменная isPinnedSiteMode равна true, можно можно использовать следующие методы для управления элементами в блоке Ссылки:
- msSiteModeCreateJumplist(header) – создает группу ссылок (она может быть только одна):
- header – заголовок для отображения в контекстном меню.
- msSiteModeAddJumpListItem(itemName, itemUrl, itemIcon) – добавляет элемент в список ссылок:
- itemName – имя элемента;
- itemUrl – ссылка, по которой произойдет переход при нажатии на элемент;
- itemIcon – (не обязательно) ссылка на иконку элемента.
- msSiteModeClearJumplist() – удаляет все элементы из списка;
- msSiteModeShowJumplist() – выводит контекстное меню.
В общем виде заполнение списка Ссылок может выглядеть следующим образом:
if (isPinnedSiteMode) {
window.external.msSiteModeCreateJumplist('List title:');
window.external.msSiteModeClearJumplist();
var posts = getPostsList();
for (i = posts.length - 1; i >= 0; i--) {
window.external.msSiteModeAddJumpListItem(
posts[i].name, posts[i].url, posts[i].iconUrl);
}
}
Обратите внимание что:
- все методы вызываются только если сайт запущен в прикреплённом режиме;
- заполнение списка происходит снизу вверх (поэтому в цикле используется обратный отсчет).
Стоит отметить еще одну возможность – подписку на событие mssitemodejumplistitemremoved. Дело в том, что пользователь может изменять само контекстное меню. А именно закреплять ссылки в его специальном блоке или удалять их из списка. Последнее можно отследить подписавшись на указанное выше событие следующим образом:
document.addEventListener('mssitemodejumplistitemremoved', jumpListItemRemoved, false);
document.attachEvent('onmssitemodejumplistitemremoved', jumpListItemRemoved);
function jumpListItemRemoved(url) {
.........
}
Эффекты для иконки сайта
Internet Explorer 9 предоставляет возможность применения двух дополнительных эффектов для иконки закреплённого веб-сайта. Первый это наложение дополнительной иконки поверх существующей. Таким образом можно привлечь внимание пользователя к событиям (например: сообщения в личном кабинете, обновление новостей и т.д.). Второй – подсветка всей иконки веб-сайта в панели задач.
Для активации указанных выше эффектов используются следующие методы:
- msSiteModeSetIconOverlay(iconUrl, iconTitle) – добавляет иконку поверх существующей:
- iconUrl – ссылка на иконку;
- iconTitle – заголовок иконки.
- msSiteModeClearIconOverlay() – убирает добавленную иконку.
- msSiteModeActivate() – подсвечивает иконку.
Кнопки в окне предварительного просмотра
Последняя из рассматриваемых возможностей это создание своих кнопок в окне предварительного просмотра. Это позволяет пользователю взаимодействовать с сайтом не переключаясь на его окно.
Вот пример добавления трех кнопок для аудио плеера:
var btnPrevId = window.external.msSiteModeAddThumbBarButton('prev.ico', 'Назад');
var btnPlayId = window.external.msSiteModeAddThumbBarButton('play.ico', 'Воспроизвести');
var btnNextId = window.external.msSiteModeAddThumbBarButton('next.ico', 'Вперед');
document.addEventListener('msthumbnailclick', function (btnId) {
if (btnId == btnPrevId) {
.........
}
if (btnId == btnPlayId) {
.........
}
if (btnId == btnNextId) {
.........
}
}, false);
window.external.msSiteModeShowThumbBar();
Метод msSiteModeAddThumbBarButton(iconUrl, buttonTitle) используется для создания кнопок. Он возвращает уникальный код, который затем используется в регистрируемом обработчике события msthumbnailclick. Для включения отображения кнопок в окне предварительного просмотра вызывается функция msSiteModeShowThumbBar().
Кроме того, в процессе работы сайта можно указать доступность (isEnabled) и видимость (isVisible) кнопки с заданным btnId с помощью метода msSiteModeUpdateThumbBarButton(btnId, isEnabled, isVisible).
Также имеется возможность создания и смены стилей кнопки во время работы пользователя с сайтом:
- var btnStyle = msSiteModeAddButtonStyle(btnId, iconUrl, buttonTitle); – определяет новую иконку и описание для существующей кнопки.
- msSiteModeShowButtonStyle(btnId, style); – изменяет вид кнопки с заданным btnId в соответствии с определенным ранее стилем style.
Обратите внимание, что кнопки не удаляются автоматически при переходе пользователя на другую страницу сайта. Необходимо самостоятельно определять это событие и соответственно изменять состояние кнопок или удалять их.
На этом завершим обзор возможностей прикрепленных сайтов и перейдем к реализации. В следующей части рассмотрим создание поддержки возможностей прикрепленных сайтов для достаточно популярного движка блогов BlogEngine.NET в виде расширения.