Progressive Web Application | html

Progressive Web Application (PWA) — это технология, которая объединяет возможности обычных веб-сайтов и нативных мобильных приложений. PWA позволяют устанавливать веб-приложение на устройство, работать офлайн и отправлять push-уведомления, используя при этом единую кодовую базу.

В основе PWA лежат три главных элемента, обеспечивающих его функциональность:

Service Workers: это скрипты, которые работают в фоновом режиме независимо от веб-страницы. Они перехватывают сетевые запросы и управляют кешированием, что позволяет приложению загружаться быстрее и функционировать при плохом подключении или полном отсутствии интернета.
Web App Manifest: файл конфигурации (обычно в формате JSON), который содержит метаданные о приложении: его название, иконки, цвет темы и стартовый URL. Именно этот файл сообщает браузеру, что сайт можно установить на главный экран устройства как отдельное приложение.
HTTPS: PWA требуют защищенного соединения. Service Workers и другие современные API работают только через HTTPS, что гарантирует безопасность и целостность данных пользователя.

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

• Установка и независимость от браузера: пользователь может установить PWA на рабочий стол или главный экран. После установки приложение запускается в отдельном окне без интерфейса браузера, что делает его неотличимым от нативного.
• Работа офлайн и производительность: благодаря кешированию через Service Workers, PWA может работать без интернета. Это особенно важно для пользователей с нестабильным соединением. Кроме того, повторные загрузки происходят практически мгновенно.
• Кроссплатформенность и экономия: одна кодовая база (HTML, CSS, JavaScript) работает на всех платформах (Windows, Android, iOS, macOS). Это значительно снижает затраты на разработку и поддержку по сравнению с созданием отдельных нативных приложений для каждой ОС.
• Push-уведомления: PWA могут отправлять пользователям push-уведомления, даже когда приложение закрыто, что помогает удерживать аудиторию и повышать вовлеченность.

Несмотря на широкие возможности, у PWA есть и ограничения, особенно в экосистеме Apple:

• Ограничения на iOS: 'то самое значительное препятствие. Apple исторически ограничивает доступ PWA к некоторым функциям и API (например, к Bluetooth или фоновой синхронизации), которые доступны на Android или в нативных приложениях iOS. Кроме того, установка PWA на iOS не так очевидна для пользователя, как на Android.
• Ограниченный доступ к «железу»: хотя ситуация улучшается (появляются Web Bluetooth, WebUSB), PWA все еще имеют ограниченный доступ к аппаратным функциям устройства по сравнению с нативными приложениями.
• Меньшая заметность: PWA, установленные через браузер, могут быть менее заметны в магазинах приложений. Однако эту проблему решают такие платформы, как Microsoft Store, которые позволяют публиковать PWA наравне с нативными приложениями.

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

Работа с Bluetooth в Progressive Web Application (PWA) осуществляется через Web Bluetooth API. Эта технология позволяет веб-приложению напрямую подключаться к устройствам с поддержкой Bluetooth Low Energy (BLE) и обмениваться с ними данными, минуя необходимость создавать отдельное нативное приложение.

Однако здесь есть критически важный нюанс: поддержка этого API сильно различается в зависимости от браузера и операционной системы. Если вы планируете использовать Bluetooth в PWA, вам придется столкнуться с серьезными ограничениями, особенно на устройствах Apple.

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

1. Запрос устройства: приложение вызывает метод `navigator.bluetooth.requestDevice()`. Этот вызов должен быть инициирован действием пользователя (например, нажатием кнопки) и открывает системный диалог выбора Bluetooth-устройства .

2. Фильтрация: чтобы показать пользователю только релевантные устройства, в запросе можно указать фильтры по имени, префиксу имени или предоставляемым услугам (GATT-сервисам).

3. Подключение и обмен данными: после того как пользователь выбрал устройство, приложение может подключиться к его GATT-серверу, найти нужные сервисы и характеристики (Characteristics) и начать обмен данными: читать, записывать значения или подписываться на уведомления (notifications).

4. Безопасность: API работает только в защищенном контексте (HTTPS) и требует явного разрешения пользователя на доступ к Bluetooth.

Главное ограничение: поддержка браузеров. Это самый важный раздел для любого разработчика PWA. Ситуация с поддержкой Web Bluetooth далека от идеала.

• Полная поддержка (Chromium): API отлично работает в браузерах на базе Chromium: Google Chrome, Microsoft Edge, Opera (на десктопе и Android). Это основная платформа для использования Bluetooth в PWA.

- Safari (macOS и iOS) и Firefox не поддерживают Web Bluetooth API нативно. Для пользователей iPhone и iPad это означает, что PWA с Bluetooth-функциями в стандартном Safari работать не будет.
- Обходные пути для iOS: существуют сторонние решения, но они требуют от пользователя установки дополнительного ПО. Например, приложения-расширения (вроде WebBLE или Bluefy), которые добавляют поддержку API в Safari. Это возможно, но создает дополнительный барьер для пользователя и не является нативным решением.

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

• Только BLE: API предназначен исключительно для Bluetooth Low Energy. Он не поддерживает классический Bluetooth (BR/EDR), поэтому вы не сможете подключиться, например, к старым Bluetooth-гарнитурам или принтерам, использующим классический профиль.
• Отсутствие фоновой работы: PWA не может поддерживать соединение с Bluetooth-устройством в фоновом режиме, когда приложение или вкладка закрыты. Это фундаментальное ограничение архитектуры веб-приложений. Согласно обсуждениям в рабочих группах W3C, на данный момент это невозможно ни на одной платформе . Bluetooth-соединение будет разорвано, как только пользователь свернет PWA или заблокирует экран.
• Требование HTTPS: как и для большинства мощных API (Service Workers, Geolocation), для Web Bluetooth требуется защищенное соединение (HTTPS).

Итог: стоит ли использовать? Использование Bluetooth в PWA — это история компромиссов.

• Когда это оправдано: если ваша целевая аудитория использует Android или десктопные ОС (Windows, macOS, Linux) с браузерами Chrome/Edge, и вам нужно простое взаимодействие с BLE-устройствами (например, чтение данных с датчика, настройка умной лампы), Web Bluetooth API является отличным, легковесным решением.

• Когда это проблематично: если значительная часть ваших пользователей — владельцы iPhone/iPad, или если вашему приложению требуется стабильное Bluetooth-соединение в фоне (например, для отслеживания фитнес-трекера или непрерывного мониторинга медицинского датчика), то PWA скорее всего не подходит. В этих случаях стоит рассмотреть разработку нативного приложения или гибридного решения (например, на Capacitor или React Native), которое имеет полный доступ к Bluetooth-стеку ОС.

PWA-приложение, которое передает данные через модуль моста Bluetooth-UART

Создание PWA для передачи данных через Bluetooth-UART мост — задача выполнимая, но с одним критическим ограничением: это будет работать только на Android, Windows, macOS, Linux и ChromeOS в браузерах на базе Chromium (Chrome, Edge, Opera). На iPhone и iPad это решение не заработает без установки пользователем специального расширения для Safari.

Ниже разобраны ключевые аспекты реализации.

[Что нужно для работы: BLE-модуль, а не классический Bluetooth]

Для PWA критически важен тип Bluetooth-модуля. Web Bluetooth API работает только с Bluetooth Low Energy (BLE).

• Подходящие модули: HM-10 (или его аналоги на чипах CC2540/CC2541), а также BT-1 и подобные. Они эмулируют последовательный порт (UART) через GATT-профиль, и PWA может подключаться к ним напрямую.
• Неподходящие модули: HC-05 / HC-06. Это классический Bluetooth (SPP), который Web Bluetooth API не поддерживает. PWA просто «не увидит» это устройство.

Примечание: некоторые не оригинальные модули HC-06 все-таки будут работать, потому что они фактически являются модулями BLE.

Схема подключения модуля к радиостанции остаётся стандартной: TX модуля → RX радиостанции, RX модуля → TX радиостанции (перекрёстно), плюс питание и земля. Обязательно проверьте уровни логики (3.3V или 5V), чтобы не сжечь модуль или порт радиостанции.

[Главное ограничение: PWA не работает в фоне]

Это фундаментальное архитектурное ограничение, которое нужно учитывать при проектировании.

Согласно официальным обсуждениям в рабочей группе W3C (2025 год), PWA, которая поддерживает Bluetooth-соединение в фоновом режиме (как нативное приложение), на данный момент невозможна ни на одной платформе. Это означает:

• Соединение Bluetooth-UART будет активно только пока вкладка с PWA открыта и находится на переднем плане (или хотя бы не «усыплена» системой).
• Как только пользователь свернёт браузер, заблокирует экран или переключится на другое приложение, соединение скорее всего будет разорвано.
• PWA не подходит для задач, где требуется постоянный мониторинг эфира или автоматическая передача данных в фоне (например, трекинг, автоответчик, постоянный маяк).

[Поддержка браузеров: состояние на 2026 год]

Ситуация с Web Bluetooth остаётся очень неоднородной.

• Полная поддержка: Chrome, Edge, Opera на десктопе и Android. Это основная целевая платформа для PWA.
• Safari (macOS и iOS): нативной поддержки нет. Web Bluetooth API в Safari не реализован и не планируется в обозримом будущем.
• Firefox: поддержки нет.
• Обходной путь для iOS: существует стороннее расширение iOSWebBLE (распространяется через App Store). Оно «полифилит» `navigator.bluetooth`, перенаправляя вызовы к CoreBluetooth. Однако это не нативная поддержка, а костыль, требующий от пользователя установки приложения и включения расширения в настройках Safari. Полагаться на это как на основное решение для аудитории iOS рискованно.

[Практические шаги для реализации PWA]

Если вы готовы принять ограничения (только Android/десктоп, только BLE, без фоновой работы), вот примерный план:

1. Настройте BLE-модуль (например, HM-10): через AT-команды задайте необходимую скорость UART (например `AT+BAUD`), имя устройства и режим работы (Slave/Peripheral). Убедитесь, что модуль настроен на прозрачную передачу данных (transparent transmission).

2. Создайте PWA-интерфейс: вам понадобится веб-страница с кнопкой «Подключить». Вызов `navigator.bluetooth.requestDevice()` должен происходить по действию пользователя (клик). В фильтрах укажите `namePrefix` или `services` (UUID сервиса вашего BLE-модуля, для HM-10 это обычно `0000ffe0-...`).

3. Реализуйте обмен данными: после подключения найдите нужную GATT-характеристику (для HM-10 это `0000ffe1-...`), подпишитесь на уведомления (`startNotifications()`) для приёма данных и используйте `writeValue()` для отправки данных.

4. Учтите реальность: тестируйте на целевом устройстве (Android-смартфон или ПК с Chrome/Edge). Заранее предупредите пользователей iOS, что приложение у них не заработает (или потребует установки расширения).

[На каких программных платформах (SDK) можно разрабатывать приложения PWA?]

Разработка PWA (Progressive Web Application) — это, по сути, разработка веб-приложений. Поэтому вы можете использовать практически любой современный веб-стек. Однако для полноценной реализации возможностей PWA (офлайн-режим, установка, push-уведомления) удобнее всего использовать специализированные фреймворки или инструменты.

Вот основные варианты, сгруппированные по подходам:

Классические веб-фреймворки (JavaScript/TypeScript). Это самый распространенный путь. Вы разрабатываете приложение на привычном стеке, а PWA-специфику (Service Worker, манифест) добавляете через плагины или вручную.

• React / Vue / Svelte: вы можете использовать любой из этих фреймворков. Для быстрого старта с готовой PWA-конфигурацией (Vite, TypeScript, Service Worker) есть инструмент `create-pwa-boilerplate`, который поддерживает все три варианта. Это хороший выбор, если вы уже знакомы с одним из них.
• Angular: Angular имеет встроенную поддержку PWA. При создании нового проекта через Angular CLI можно сразу добавить схему `@angular/pwa`, которая настроит манифест и Service Worker.

Специализированные UI-фреймворки для гибридных приложений и PWA. Эти инструменты предоставляют готовые UI-компоненты, которые выглядят нативно на iOS и Android, и позволяют из одной кодовой базы собирать как PWA, так и нативные приложения (через Capacitor/Cordova).

• Ionic: очень популярный выбор. Ionic — это UI-тулкит, который можно использовать с Angular, React или Vue. Он специально спроектирован для создания высококачественных PWA и гибридных приложений, работающих в браузере как PWA или нативно через Capacitor. Идеально подходит, если вы хотите в будущем, при необходимости, легко завернуть PWA в нативное приложение.
• Onsen UI: аналогичный Ionic инструмент, предоставляющий нативные UI-компоненты. Он также агностичен к фреймворкам и может использоваться с React, Vue, Angular или даже без них.

Нестандартные подходы (WebAssembly). PWA можно разрабатывать не только на JavaScript. Благодаря WebAssembly (Wasm) в браузере можно запускать код, скомпилированный из других языков.

• Blazor WebAssembly (.NET): если вы работаете в экосистеме Microsoft, то Blazor позволяет создавать PWA на C# и .NET. Microsoft предоставляет встроенную поддержку PWA для Blazor, включая работу с манифестом и Service Worker.
• go-app (Go): существует библиотека `go-app`, которая позволяет писать PWA на языке Go, компилируя код в WebAssembly. Она предоставляет декларативный синтаксис для построения UI и поддерживает работу в офлайн-режиме.

Что не подходит для «чистого» PWA. Важно не путать PWA с гибридными фреймворками, которые хоть и используют веб-технологии, но не создают PWA.

• React Native и Flutter: эти фреймворки предназначены для создания нативных приложений. Они не компилируются в PWA и не запускаются в браузере как веб-приложение. Согласно сравнительным таблицам, они несовместимы с PWA.

Итоговая рекомендация. Если ваша главная цель — именно PWA, и вы хотите использовать знакомые веб-технологии, лучшим выбором будет связка React/Vue/Svelte + Vite + vite-plugin-pwa (или аналогичный плагин). Это даст вам полный контроль и современный инструментарий.

Если вы хотите в будущем иметь возможность легко выпустить нативное приложение для iOS/Android из той же кодовой базы, обратите внимание на Ionic (с React или Angular). Он создан именно для таких сценариев.

Учитывая вашу предыдущую задачу (управление радиостанцией через Bluetooth), Ionic + Capacitor может быть особенно интересен: вы сможете начать с PWA (работающей в Chrome на Android), а если упрётесь в ограничения Web Bluetooth на iOS, относительно легко добавить нативную обёртку с плагином для Bluetooth, не переписывая всё приложение с нуля.

[Vue-приложение и PWA-приложение: в чем разница?]

Сравнивать «приложение на Vue» и «PWA» не совсем корректно, поскольку это не взаимоисключающие понятия. Vue — это JavaScript-фреймворк для создания пользовательского интерфейса, а PWA — это набор технологий и стандартов, которые превращают обычный веб-сайт в приложение, устанавливаемое на устройство. Приложение на Vue может быть обычным веб-сайтом, а может быть доработано до уровня PWA.

С точки зрения развертывания на веб-сервере и установки пользователем, ключевое различие заключается в том, что обычное приложение на Vue — это просто веб-страница, а PWA после добавления Service Worker и манифеста приобретает возможность установки и работы офлайн.

Ниже рассмотрены два основных различия использования приложений PWA и Vue в контексте развертывания на WEB-сервере и установки приложения на стороне пользователя.

Обычное приложение на Vue. Развертывание крайне простое: достаточно выполнить сборку (`npm run build`), получить статические файлы (HTML, JS, CSS) и разместить их на любом статическом сервере (например, Nginx, Apache, Vercel, Netlify). Серверу не требуется специальная конфигурация, HTTPS также не является обязательным (хотя рекомендуется).

PWA (приложение на Vue с интегрированными возможностями PWA). Базовое развертывание также заключается в размещении статических файлов, но есть два критически важных дополнительных требования:

1. Обязательное использование HTTPS: Service Worker (основная технология PWA) может быть зарегистрирован только в защищенном контексте (HTTPS или localhost). HTTP-развертывание сделает все функции PWA неработоспособными.

2. Необходимость создания Service Worker и манифеста: это требует добавления плагинов в конфигурацию сборки (например, `vite-plugin-pwa` или `@vue/cli-plugin-pwa`). Эти плагины автоматически генерируют `manifest.json` (определяющий имя, иконку, режим отображения приложения) и Service Worker (отвечающий за кеширование и офлайн-стратегии) во время сборки. Сам сервер не требует особой логики, но эти сгенерированные файлы должны корректно обслуживаться.

Обычное приложение на Vue не имеет концепции «установки». Пользователь может только открыть браузер, ввести URL, добавить страницу в закладки или на главный экран (но это просто ярлык, при открытии все равно запускается браузер с адресной строкой).

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

• Android (Chrome/Edge): при посещении страницы браузер обычно автоматически показывает баннер «Установить приложение» или позволяет вручную выбрать в меню «Добавить на главный экран» / «Установить приложение». После установки иконка появляется на рабочем столе, при запуске открывается в отдельном окне (без адресной строки), выглядит как нативное приложение.
• iOS (Safari): процесс более скрытый. Пользователю необходимо вручную нажать кнопку «Поделиться» → «На экран "Домой"» → «Добавить». Chrome и другие сторонние браузеры на iOS не поддерживают установку PWA. Важно отметить: на iOS PWA имеют ограничения, например, кеш может быть очищен системой при длительном неиспользовании, а поддержка push-уведомлений и фоновой синхронизации ограничена.
• Десктоп (Chrome/Edge): в адресной строке появляется иконка установки, нажатие на которую устанавливает приложение в операционную систему, создавая независимый ярлык и окно приложения.

Для приложения, передающего и принимающего данные через мост Bluetooth-UART выбор очевиден: необходимо создать приложение на Vue с интегрированными возможностями PWA. Только в этом случае пользователи смогут «установить» его на устройство Android и использовать Web Bluetooth API в полноэкранном режиме, близком к нативному приложению. Однако следует помнить об ограничении, которое упоминалось ранее: на iOS, даже после установки в качестве PWA, Web Bluetooth все равно не будет работать.