Статьи

31 день Windows 8 для HTML5 | День № 11: Приложения блокировки экрана

 Эта статья посвящена Дню № 11 из серии под названием « 31 день Windows 8» . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти дополнительные ресурсы, загрузки и исходный код на нашем сайте .

advertisementsample


Сегодня мы рассмотрим еще одну часть уведомлений в Windows 8: экран блокировки. Если вы используете Windows Phone или Windows 8 на своем компьютере, вы, вероятно, довольно хорошо знакомы с экраном блокировки. Он показывает, сколько писем вы получили, сообщения Facebook, часы и ваше состояние подключения. Вот мой текущий экран блокировки:

day11-7

Да, это фото моего экрана. Я понятия не имею, как сделать снимок экрана блокировки без установленной виртуальной машины. В любом случае, вы также можете видеть, что я пишу эту статью только за несколько дней до публикации, и кто-то оставил мне несколько мгновенных сообщений.

У нас, как у разработчиков, есть возможность добавлять свои значки и к этому экрану блокировки, но идти в одиночку опасно. Возьми это. Это руководство Microsoft о лучших способах использования области уведомлений экрана блокировки .

Настройка нашего манифеста

Для начала первое, что нам нужно сделать, это настроить приложение для уведомлений на экране блокировки. Мы делаем это где? Да, наш файл package.appxmanifest в разделе « Интерфейс приложения / уведомления». Мы собираемся установить для уведомлений экрана блокировки либо значок, либо значок и текст плитки. Какая разница? Знак будет обновлять экран блокировки и ваши плитки в то время как знак и текст Tile обновят что + кладя текстовое уведомление на переднем экране , если пользователь выбирает приложение. Это то, что, кажется, устанавливается только из манифеста и пользователем. На сегодня давайте изо всех сил и выберитеОпция Бейдж и Плитка .

образ

Ну, это вызвало множество ошибок проверки. Вы заметите, что экран теперь подсвечен красными символами X. Когда уведомления на экране блокировки включены, мы должны иметь логотип Badge (для этого мы создали новый 24 × 24 PNG, который должен быть прозрачным белым PNG), и так как мы выбрали опцию, которая также включает обновления плитки, мы ‘ Также необходимо предоставить изображение с широким логотипом. Вот моя вкладка пользовательского интерфейса приложения с добавленными этими файлами:

образ

Чего ждать? Почему еще красный? Что ж, «Если включены уведомления экрана блокировки, необходимо указать одно или несколько объявлений фоновых задач типа« Таймер »,« Канал управления »или« Push-уведомление ».»

Это означает, что приложения блокировки экрана обычно ожидают обновления от фонового агента. Давайте флип к нашей Declarations вкладке, и добавить фоновый процесс . Мы собираемся добавить поддержку push-уведомлений и добавить нашу страницу по умолчанию в качестве точки входа:

образ

Однако в моем примере приложения мы не собираемся создавать фоновую задачу. Я собираюсь осветить это завтра. Вместо этого мы собираемся сосредоточиться конкретно на процессах и коде, который позволяет нам обновлять информацию нашего экрана блокировки.

Спрашивая разрешения

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

Вы получаете ОДНУ, и только ОДНУ возможность, возможность спросить пользователя о разрешении находиться на его экране блокировки. 

Если вы спросите один раз, и они скажут «Не разрешать», вы даже не сможете спросить снова. 

Вот как это выглядит, когда вы спрашиваете:

образ

А вот как вы это делаете:

var background = Windows.ApplicationModel.Background;
var promise = background.BackgroundExecutionManager.requestAccessAsync();

Если вы никогда не спросите, единственный способ попасть на экран блокировки — это открыть пользователю настройки своего ПК и явно добавить вас. Сколько пользователей действительно сделают это после факта?

образ

Пользователи могут выбрать до 7 приложений для отображения на экране блокировки и * 1 * для отображения текста.   Мы хотим убедиться, что мы одни из них. Поэтому, поскольку наш статус может меняться по желанию пользователя, мы должны нести ответственность перед тем, как отправлять обновления на его экран блокировки.

Убедиться, что у вас есть разрешение

Это не обязательный шаг. У вас может быть приложение или фоновая задача (о чем мы поговорим завтра), чтобы продолжать отправлять обновления, даже если у вас нет разрешения. При этом ваши обновления также никогда не будут видны пользователю. Без разрешения ваши обновления исчезнут в эфире.

Вот как мы проверяем, предоставил ли пользователь нам разрешение на обновление экрана блокировки:

var background = Windows.ApplicationModel.Background;

var promise = background.BackgroundExecutionManager.requestAccessAsync().then(
    function (result) {
        switch (result) {
            case background.BackgroundAccessStatus.denied:
                // Background activity and updates DENIED 
                break;

            case background.BackgroundAccessStatus.allowedWithAlwaysOnRealTimeConnectivity:
                // Added to list of background apps.
                // Set up background tasks
                // CAN use the network connectivity broker.
                break;

            case background.BackgroundAccessStatus.allowedMayUseActiveRealTimeConnectivity:
                // Added to list of background apps.
                // Set up background tasks
                // CANNOT use the network connectivity broker.
                break;

            case background.BackgroundAccessStatus.unspecified:
                // The user didn't explicitly disable or enable access and updates. 
                break;
        }
    });

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

Обновление экрана блокировки

Отправка актуального обновления будет выглядеть довольно знакомо, если вы прочитали предыдущие две статьи. ( День № 9 — Live Tiles , День № 10 — Уведомления о тостах ) Как и в предыдущих примерах, мы собираем шаблон, который состоит из XML (в данном случае это невероятно просто):

<badge value="31"/>

Далее нам нужно указать значение, которое мы хотим отобразить. У нас есть несколько вариантов в этом сценарии. Мы можем не только использовать любое число от 1 до 99, но у нас также есть несколько символов на выбор. Самое приятное то, что шаблон достаточно умен, чтобы распознавать разницу, поэтому единственное, что изменится в нашем коде, — это фактическое значение, которое мы передаем. Вот код для обновления значка:

var notifications = Windows.UI.Notifications;

var template = notifications.BadgeTemplateType.badgeNumber;
var templateContent = notifications.BadgeUpdateManager.getTemplateContent(template);

var element = templateContent.selectSingleNode("/badge");
element.setAttribute("value", "31");

var update = new notifications.BadgeNotification(templateContent);
notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(update);

Так же, как плитки и тосты, я устанавливаю атрибут для элемента значка В этом случае я устанавливаю атрибут value на 31. Это приводит к значку блокировки экрана, который выглядит следующим образом:

day11-1

Если вы предпочитаете использовать один из глифов, вот список того, что доступно, любезно предоставлено страницей обзора Badge в MSDN .

11-XAML-GlyphList

Чтобы указать глиф, а не число, нам нужно только изменить атрибут value на имя глифа, указанное выше.

//set
element.setAttribute("value", "alert");

//result
<badge value="alert"/>

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

Подождите … Есть еще несколько вещей. Давайте ползти в сорняки. 

Когда мы начали эту статью, мы сразу же открыли файл манифеста приложения Первым делом мы обновили уведомления на экране блокировки, выбрав « Badge and Tile Text » в нашем файле appxmanifest, мы включили эти значки, которые мы создаем, чтобы они появлялись и на нашей Tile. (Вот почему был необходим файл WideTile.png.) Вот как выглядит мой Live Tile с тем же значком «Игра»:

11-XAML-WideLogo 

Чувак, эта плитка просто безобразна, но, ладно, ты понял. Сначала я думал, что моя работа здесь закончена, но что-то беспокоило меня. Слово текст в знак и кафеля текст . Мы действительно не отображали никакого настоящего текста, верно? Оказывается, история не была закончена. Если вы настроены на обновления плитки, вы можете на самом деле отображать эти обновления плитки на экране блокировки. Чего ждать?!!? Ага. Перейдем к: Настройки -> Изменить настройки ПК -> Персонализация. Посмотрите очень близко в нижней правой части настроек. Выберите приложение для отображения подробного статуса. Выберите этого парня, и ваше приложение должно быть указано в меню. Выбери это! Прямо сейчас!

образ

После этого, когда ваше приложение работает, текст плитки также будет отображаться на экране. Проверьте соус там.

day11-3

Но подождите, кто счастливчик? Я думаю, что это за вас, чтобы выбрать. Похоже, что ваше приложение не имеет права даже помещать себя в это поле.

— прочитайте это —

Теперь во время написания этой статьи я столкнулся с несколькими вещами.

# 1: setTimeout — ваш друг, по крайней мере, при попытке проверить это вручную. Чтобы увидеть, что будет отображаться на экране блокировки, я создал глупую кнопку в своем приложении. Обработчик для моей кнопки выглядел так:

clearNotifications();

setTimeout(function () {
    sendBadgeUpdateXML();
}, 5 * 1000);

setTimeout(function () {
    sendTileUpdate();
}, 6 * 1000);

Это дало мне время запустить события и заблокировать машину. Тогда я могу сидеть сложа руки и смотреть, как происходит волшебство.

№2. Существует три различных способа запуска обновлений значков. Почему ты спрашиваешь? Понятия не имею. Все, кажется, работают одинаково независимо. Сначала есть два шаблона:

var template = notifications.BadgeTemplateType.badgeGlyph;

var template = notifications.BadgeTemplateType.badgeNumber;

Как следует из шаблонов, один для числа и один для глифа. Это немного сбивает с толку, когда вы знаете, что XML просто:

<badge value="31"/>

Оказывается, просто не имеет значения, какой вы выберете. Они действуют одинаково. Возможно, в будущем это будет иметь большее значение, поэтому я бы использовал то, что вы хотите «семантически» сделать.

Так что было 2 разных способа. Какой третий. Ну, просто необработанные манипуляции с XML.

var badgeXmlString = "<badge value='alert'/>";

var badgeDOM = new Windows.Data.Xml.Dom.XmlDocument();
badgeDOM.loadXml(badgeXmlString);

var notifications = Windows.UI.Notifications;
var badge = new notifications.BadgeNotification(badgeDOM);
notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badge);

Это прямо и работает, но вы выбираете яд.

Резюме

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

Если вы хотите загрузить работающее приложение, использующее код из этой статьи, щелкните значок ниже:

 downloadHTMLdownloadTheTools

Завтра мы подведем итоги последних трех дней, поговорив о фоновых задачах. Мы покажем, как обновить живые плитки, уведомления о тостах и ​​данные экрана блокировки из фоновой задачи. Увидимся позже!