Начинаем разработку с Web Bluetooth и Progressive Web Apps

Небольшое введение

Web Bluetooth - это новая технология, которая соединяет Web с Интернетом Вещей. Web Bluetooth довольно молодой, он все еще перекраивается и прототипируется! Но это, конечно же, не значит, что мы не сможем с ним поиграть...

По сути, Web Bluetooth позволяет вам управлять любым устройством Bluetooth Low Energy (умной бытовой техникой, медицинскими приборами, такими как монитор сердечного ритма, монитор глюкозы, датчики температуры и т. д.) непосредственно с вашего ПК или смартфона без необходимости установки приложения.

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

Вечера лучше всего проводить с хорошим вином, интересной компанией и Web Bluetooth (нет).

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

Я предполагаю, что вы уже знакомы с терминами Bluetooth Low Energy, такими как периферия (Peripherals), службы (Services) и характеристики (Characteristics).

прим. Если вы не знакомы с данными понятиями, посмотрите короткий пост BLE & GATT или как отправить данные по Bluetooth.

Возможно, вы подумаете: «Но мы уже можем отправлять команды на лампочку - разве лампа не пришла вместе с приложением?» Да, она действительно пришла с приложением, но есть ли у него голосовое управление? (Нет, и я покажу вам, как вы можете его создать.)

Если вам не терпится, вы можете посмотреть код здесь или попробовать демку (см. следующий раздел о поддерживаемых браузерах / платформах). Если вам нужна дополнительная информация о Web Bluetooth, ознакомьтесь с этой статьей от Google Developers.

Могу ли я использовать Web Bluetooth?

В настоящее время он работает только на Chrome на Android 6, Mac OS X, Linux и Chrome OS. Однако ситуация быстро меняется, поэтому может быть полезно периодически проверять страницу состояния поддержки.

В этой демонстрации я буду использовать Chrome для создания своего веб-приложения. Есть два варианта использования Web Bluetooth в Chrome:

• Веб-сайт должен быть частью эксперимента («Origin Trial»), который проводит Chrome. Вы можете зарегистрироваться на этой странице. После того, как вы занесете свой сайт, все ваши посетители смогут использовать Web Bluetooth с вашего сайта, если у них есть поддерживаемое устройство / операционная система.
• Вы можете включить Web Bluetooth для всех сайтов, перейдя на хром-флаги. Просто введите «chrome://flags» в адресной строке, найдите «Web Bluetooth» и включите его (также применительно к пользователям Android 6).

Web Bluetooth API

JS API можно найти через navigator.bluetooth. Он основан на промисах, поэтому убедитесь, что вы знакомы с ними.
Прим. Рекомендую заглянуть на developer mozilla - Bluetooth.requestDevice.

Чтобы использовать Web Bluetooth, ваш сайт должен работать через безопасное соединение (HTTPS). Безопасное соединения веб-сайта становится требованием для растущего числа новых веб-API, и его довольно легко настроить. Один из способов (который я использую здесь) - использовать хостинг GitHub, a.k.a gh-pages.

Создание Web Bluetooth App

Это последовательность действий, которая будет распространяться для всех приложений с Web Bluetooth. Прежде чем просмотреть код, давайте сначала посмотрим на основные шаги:

• Поиск соответствующего устройства;
• Подключение к нему;
• Выбор Service, который вас интересует;
• Выбро Characteristic, которая вас интересует;
• Чтение, запись или подписка на Characteristic.

Теперь к коду - подключитесь к смарт лампе, а затем напишите ей:

// Step 1: Scan for a device with 0xffe5 service
navigator.bluetooth.requestDevice({
  filters: [{ services: [0xffe5] }]
})
  .then(function(device) {
    // Step 2: Connect to it
    return device.gatt.connect();
  })
  .then(function(server) {
    // Step 3: Get the Service
    return server.getPrimaryService(0xffe5);
  })
  .then(function(service) {
    // Step 4: get the Characteristic
    return service.getCharacteristic(0xffe9);
  })
  .then(function(characteristic) {
    // Step 5: Write to the characteristic
    var data = new Uint8Array([0xbb, 0x25, 0x05, 0x44]);
    return characteristic.writeValue(data);
  })
  .catch(function(error) {
     // And of course: error handling!
     console.error('Connection failed!', error);
  });

Этот код сканирует устройство с Service номером ffe5, затем запрашивает этот Service, запрашивает Characteristic с номером ffe9 и, наконец, записывает четыре байта: bb 25 05 44, которые являются командой для того, чтобы лампочка медленно переливалась всеми цветами радуги, как я описал в предыдущем посте.

Диалоговое окно, спрашивающее пользователя, к какому устройству он хочет подключиться

Теперь о том, как запустить его: есть несколько способов это сделать, но все они немного сложные. Вы можете вставить вышеприведенный код в консоль Chrome, как только вы включили флаг Web Bluetooth, но это сработает только в поддерживаемых операционных системах (например, Mac с Chrome 53, Linux или Chrome OS).

Если у вас есть устройство с Android 6, вы можете включить режим разработки, подключить его к ПК с помощью USB-кабеля, а затем в Chrome на ПК перейдите по следующему URL-адресу: «chrome://inspect». Это откроет консоль Chrome, которая будет подключена к Android-устройству - вот как я обычно это делаю на своей Windows-машине. Вот страница, которая объясняет этот метод шаг за шагом (придется повозиться с adb и драйверами для вашего Android, возможно придется использовать бубен. Особенно пригодится, если вы собираетесь вести разработку под мобилки на JS).

Вы можете проверить код для демонстрационного приложения здесь. Вышеприведенный код находится в функции connect().

Устранение проблем

Если устройства не отображаются, убедитесь, что:

1. Оба - Bluetooth и служба геолокации включены. На Android 6 требуется как Bluetooth, так и доступ к местоположению для сканирования устройств BLE.
2. Никакие другие приложения не подключены к целевому устройству. Устройства BLE перестают шарить свои сервисы, когда к ним подключено какое-либо приложение.
3. Если вы все еще не видите устройство, попробуйте перезапустить хром, выключите Bluetooth, затем снова включите или перезапустите устройство.

Вы можете найти другой пример в документе стандартной спецификации Web Bluetooth. В этом примере показано, как подключиться к устройству мониторинга сердечного ритма, прочитать Characteristic службы местоположения (которая сообщает вам, где находится датчик - на какой части тела), и подписаться на уведомления из Characteristic датчика сердечного ритма. Это означает, что всякий раз, когда устройство выполнит новое измерение будет вызываться событие. Если вы хотите увидеть рабочий пример, ознакомьтесь с этой демкой на GitHub.

Взаимодействие с Интернетом вещей: изменение цвета лампы

Мы видели код, который подключается к лампочке и посылает ей команды. Давайте теперь создадим функцию, которая задает цвета с красным, зеленым и синим значениями:

function setColor(red, green, blue) {
  var data = new Uint8Array([
    0x56, red, green, blue, 0x00, 0xf0, 0xaa
  ]);
  return ledCharacteristic.writeValue(data);
}

Обратите внимание, что функция предполагает, что мы сохранили ссылку на объект characteristic, который мы получили на предыдущем шаге, в глобальной переменной, называемой ledCharacteristic.

Мы можем подключиться к устройству, и теперь у нас есть функция, с помощью которой можно изменить цвет. Значения цветовых компонентов определяются как значения RGB от 0 до 255. Например, чтобы установить фиолетовый цвет, мы будем использовать:

setColor(255, 0, 255);

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

Добавить голосовое управление!

Поскольку у нас есть базовые функциональные возможности приложения, давайте сделаем приложение более интересным, добавив голосовое управление. Оно будет использовать Web Speech API. Я воспользуюсь крошечной библиотекой JavaScript под названием annyang, которая обеспечивает более простой интерфейс для Speech API.

Использовать библиотеку annyang так же просто, как перечисленить всех голосовые команды, которые вы хотите реализовать, а затем вызовать метод start():

annyang.addCommands({
  "red":   function() { setColor(255,0,0); },
  "green": function() { setColor(0,255,0); },
  "blue":  function() { setColor(0,0,255); }
});
annyang.start({ continuous: true });

Как вы можете видеть, добавление новых команд довольно простое. Вы можете поэкспериментировать с добавлением новых цветов, командой «выключить» (“off”) или более интересными командами, такими как «случайный цвет» (“random color”), «кроссфейд» (“crossfade”) или «быстрое мигание» (“blink rapidly”).

Реализация Web Speech API в Chrome использует сервисы Google Cloud для распознавания речи, поэтому задержка получения результатов составляет около 1 секунды.

Вызов annyang.start() будет запрашивать у пользователя разрешение на доступ к микрофону, чтобы можно был записать свой голос. В реальном приложении я добавлю кнопку микрофона и вызову этот метод только после того, как пользователь нажал эту кнопку. В конце концов,запрос на использование микрофона при загрузке веб страницы выглядит доволно пугающе, не так ли?

Наконец, вы, вероятно, заметили, что я передал continuous:true в метод start(). Это гарантирует, что функция постоянно прослушивает пользовательские команды, а не только один раз.

Разработка PWA

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

Вкратце, Progressive Web Apps (PWA) - это веб-сайты, которые выглядят и функционируют как нативные приложения. Пользуясь новыми возможностями, которые теперь доступны нам при web разработке (например, в Web Bluetooth!), мы можем использовать такие фичи, как service workers, чтобы имитировать возможности нативных приложений, такие как автономное функционирование, уведомления и другие фичи.

Поскольку у нас уже есть приложение для управления лампочкой, давайте посмотрим, можем ли мы превратить его в PWA.

Возьмем некоторую проблему, например, что делать, если я в автономном режиме и хочу изменить цвет лампы? К счастью, с PWA я могу создать Service Worker, который определит поведение приложения, когда телефон находится в offline.

(Для тех из вас, кто обратил на это внимание: вы правы, у нас не будет доступа к возможностям голосового управления из-за зависимости Google Cloud Speech API, но это не значит, что мы не можем определить адекватное поведение!)

Чтобы автоматически сгенерировать service worker, я буду использовать инструмент под названием «sw-precache». Я не буду здесь погружаться в подробности, но вы можете прочитать об этом в замечательном посте из блога Wassim Chegam.

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

«Web Light» добавлен на главный экран

Наш Splash Screen для PWA

Наличие service worker'ов и offline файла манифеста, а также тот факт, что сайт обслуживается через HTTPS, дают нам неплохой бонус - если пользователь часто посещает наше приложение, он автоматически получит запрос от Chrome на добавить ярлыка приложения на главный экран его устройства:

Chrome автоматически предложит добавить веб-приложение на главный экран пользователя

Эта функция называется «App Install Banners». Вы можете узнать больше об этом, а также о критериях отбора здесь.

Web Bluetooth и Physical Web

В предыдущем посте мы обсудили интересные вещи, которые вы можете сделать с Physical Web. С помощью Physical Web вы можете отправить ссылку на свой веб-сайт с Bluetooth маячка на устройство пользователя. С PWA эта ссылка может быть на ваше веб-приложение, которое выглядит и функционирует как нативное. Затем с помощью Web Bluetooth вы можете поговорить с устройством!

Одной из интересных особенностей, которая в настоящее время разрабатывается, является возможность передачи устройства с Physical Web на Web Bluetooth. Согласно текущим спецификациям, если пользователь открыл ссылку через Physical Web, указатель на устройство, в котором была создана ссылка, будет доступен на веб-странице через navigator.bluetooth.referringDevice.

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

Круто, не так ли?

Другие известные Web Bluetooth проекты

Безопасность - всегда то, что нам приходиться иметь ввиду. Не так уж сложно придумать какие-то интересные приколы, которые вы, возможно, захотите сделать с помощью Web Bluetooth, но в то же время есть еще более гнусные идеи, которые могут возникнуть у плохих парней. К счастью, ребята из команды Chrome довольно умны, и они создали соображения безопасности для платформы. Джеффри Яскин из Chrome Team написал замечательную статью о модели безопасности Web Bluetooth.

Хотя, это все еще новая технология, уже есть некоторые проекты, которые используют Web Bluetooth для управления различными устройствами. Вот некоторые из тех, что мне нравятся:

• Sphero Ollie
• Web MiP
• Приложение конфигурации Eddystone Beacon - настройка Physical Web маяков
• Контроллер Parrot Mini Drone

Здесь вы можете найти список других проектов Web Bluetooth. И вот еще несколько ресурсов:

• Спецификация Web Bluetooth
• Примеры кода Web Bluetooth

p.s. - если вы вообще беспокоились о безопасности Web Bluetooth, будьте уверены: команда Chrome уже занимается этим. Ознакомьтесь с замечательным постом Джеффри Яскина о модели безопасности Web Bluetooth, чтобы узнать больше.

Призыв к действию: давайте продвинем Web Bluetooth вперед!

Создайте свои собственные демо, поделитесь с сообществом - сделайте что-то интересное и необычное.

Еще одна небольшая вещь, которую вы можете сделать, чтобы помочь продвинуть Web Bluetooth вперед - голосовать за Web Bluetooth на Microsoft Edge. Даже если вы не используете его, его включение поможет продвинуть стандарт вперед, что сделает жизнь проще для всех. Вы можете проголосовать за него до трех раз на UserVoice.

Если вы найдете ошибки, придумаете какие-нибудь полезные фичи - команда Chrome всегда рада любому фидбеку. Вы можете поделиться им на GitHub Issues Page.

Оригинал статьи Uri Shaked - Start Building with Web Bluetooth and Progressive Web Apps

Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram чтобы не пропустить самое интересное!