Большие дебаты в разработке Windows всегда касались того, как создать пользовательский интерфейс вашего приложения. Мы были избалованы выбором, и каждый раз, когда Microsoft представляет новую интерфейсную среду, нам приходится пытаться выяснить, будет ли этот новый инструмент делать то, что нам нужно. Сейчас мы жонглируем Electron, Win UI, Win32, UWP, WinForms, MAUI, Flutter и другими. Каждый из них предполагает новый набор API, новые SDK и многое другое.
Создание такого пользовательского опыта — это способ обеспечить высокую производительность. Но у него есть свои ограничения: приложения часто привязываются к одной платформе и требуют дополнительной инфраструктуры развертывания. Эволюция современной сети дала нам альтернативу: PWA (прогрессивные веб-приложения), которые сочетают в себе общий набор API-интерфейсов уровня устройства с пользовательским интерфейсом HTML/CSS/JavaScript.
Microsoft и PWA
Microsoft является ярым сторонником PWA, предлагая их поддержку в Microsoft Store и предоставляя простые инструменты для их установки и управления ими как через меню «Пуск» Windows, так и в браузере Edge на базе Chromium. Что касается инструментов, компания вкладывает значительные средства в поддержку PWA в инструментах разработчика Edge F12 и спонсирует разработку набора инструментов PWA Builder.
PWA Builder — это веб-инструмент (который можно установить как PWA из вашего браузера), который берет URL-адрес сайта и проводит вас через процесс его создания как PWA. Он помогает создать соответствующий манифест для вашего PWA, затем настраивает основные требования, а затем направляет вас через процесс отправки для доставки вашего PWA в большинство распространенных магазинов приложений. Это эффективный способ перехода от веб-интерфейса к PWA, добавляя попутно такие возможности, как работа в автономном режиме.
Не все PWA конвертируются из существующих веб-приложений. Во многих случаях вам, скорее всего, придется создавать собственный внутренний инструмент. Хотя PWA Builder может здесь помочь, он все равно выводит ваш код за пределы вашей цепочки инструментов. Что необходимо, так это способ встроить его в знакомые инструменты разработки, при этом автоматизируя большую часть процесса разработки PWA.
Представляем PWA Studio
Именно здесь появился недавний запуск PWA Studio, предлагающий большую часть функций PWA Builder в подключаемом модуле Visual Studio Code. Доступный в Visual Studio Marketplace, это быстрая загрузка, которая добавляет расширение PWA Studio в вашу стандартную среду веб-разработки. Он находится рядом с другими расширениями Visual Studio Code, поэтому есть преимущество добавления дополнительных расширений, обеспечивающих поддержку Visual Studio Code для инструментов разработки Edge и функций сетевого анализа, предоставляя вам столь необходимые инструменты отладки как часть процесса разработки PWA.
Установка выполняется быстро и легко: в PWA Studio добавлена собственная панель проекта, а также новые командные команды в палитре команд Visual Studio. После установки откроется пошаговое руководство, которое поможет вам создать свой первый PWA. При этом существующее начальное приложение PWA клонируется в локальный экземпляр Git и начинается загрузка необходимых и рекомендуемых подключаемых модулей Visual Studio, если они еще не установлены. К ним относятся инструменты форматирования и проверки Prettier JavaScript, а также поддержка npm. Проект рекомендует добавить инструменты GitLens для работы с GitHub и отладчик Firefox, чтобы вы могли протестировать PWA в дополнительных браузерах.
Если у вас есть существующее веб-приложение, откройте его в Visual Studio Code (желательно скопировав его в новую ветку разработки), а затем используйте инструменты PWA Studio, чтобы преобразовать его в PWA. Вы можете быстро добавить манифест и сервис-воркера, прежде чем приступать к настройке кода для автономного использования.
Палитра команд кода — это самый быстрый способ взаимодействия с PWA Studio. Откройте его и начните вводить «PWA», чтобы использовать встроенный фильтр для вывода списка всех действий PWA Studio. Они обеспечивают быстрый доступ к ключевым функциям, таким как быстрое создание сервисного работника для автономной поддержки. Некоторые ключевые команды дублируются на панели проекта расширения, что объединяет их с контрольным списком необходимых элементов. Это полезный способ работы со Студией; Если ключевой элемент отсутствует, вы можете использовать панель проекта, чтобы быстро добавить базовый код, готовый к реализации ваших конкретных функций.
Вам нужно будет переключаться между панелью PWA Studio и встроенным представлением проводника. При переключении на Explorer отобразится предварительно созданная структура для PWA со смесью файлов TypeScript, JavaScript и JSON. В файле ReadMe с уценкой подробно описано, что включено, а также «самоуверенные» взгляды команд разработчиков PWA на лучшие практики. Поскольку их код активно работает, это хорошая отправная точка для размышлений о том, что должно входить в ваши собственные PWA.
Создание PWA в PWA Studio
Интересно отметить, насколько платформа PWA является межотраслевой. Входящий в комплект сервисный работник в примере кода PWA Studio основан на платформе Workbox, спонсируемой Google. Это имеет большой смысл, поскольку Workbox предлагает набор готовых пакетов, которые могут упростить создание сложных сервис-воркеров. Например, он включает инструменты для фоновой синхронизации для работы в автономном режиме, поддержки предварительного кэширования файлов и работы с источниками потокового контента.
Пакеты Workbox используются многими приложениями ChromeOS и должны хорошо работать в любом современном браузере Windows. Поскольку они универсальны, они идеально подходят для создания PWA, работающих на разных платформах. Они являются полезными прокси-серверами для сетевых операций браузера, обеспечивая уровень кэширования, который может поддерживать переключение с подключенного на отключенное состояние, не затрагивая ваших пользователей. Выполнение всех взаимодействий через кеш гарантирует, что пользователи работают с последними достоверными данными, а серверный код обеспечивает согласованность между пользователями.
Создание PWA — это одно; обеспечение того, чтобы это было правильно, это другое. Встроенные инструменты проверки PWA Studio, пожалуй, лучшая причина для его установки. На панели проектов имеется набор инструментов проверки, которые помогут вам подготовить код для Интернета и магазинов.
Первый инструмент проверяет манифест вашего кода. Всем PWA нужен манифест со списком файлов, составляющих ваше приложение, включая значки и ярлыки. Не все элементы являются обязательными, поэтому нажмите на значок информации рядом с предупреждениями, чтобы определить, нужно ли вам предоставить исправления перед публикацией. Если у вас нет манифеста, PWA Studio предоставляет форму, которая поможет вам создать его на основе вашего кода.
Аналогичным образом ваш PWA будет проверен на наличие сервис-воркера. Если вам нужно его создать, инструменты PWA Studio установят интерфейс командной строки Workbox и запустят его мастер, который поможет создать базового рабочего процесса. Расширенный вариант предоставляет расширяемую структуру для более сложных операций, позволяя добавить интеграцию с ОС, чтобы PWA могло работать с локальными файлами и ресурсами.
После создания PWA необходимо опубликовать в Интернете. Поскольку PWA Studio интегрируется со статическими веб-приложениями Azure, вы можете воспользоваться преимуществами рабочего процесса на базе GitHub для создания конечной точки, размещенной в Azure, для вашего приложения. Это работает с инструментами разработчика Edge для тестирования вашего кода перед упаковкой манифеста и значков и доставкой их в выбранные вами магазины приложений. Использование статических веб-приложений Azure означает, что запросы на извлечение GitHub автоматически обновляют ваше PWA, и ваши пользователи получат новую версию при следующем открытии.
PWA Studio — интересный пример того, что можно сделать с помощью кода Visual Studio. Благодаря поддержке JavaScript и TypeScript вы можете использовать знакомые инструменты и методы для создания и тестирования веб-приложения. Пример приложения показывает, что вы не ограничены его инструментами и можете комбинировать выбранные вами JavaScript и расширения браузера, чтобы обеспечить вашим пользователям наилучшее взаимодействие с PWA, от установки до подключенных и отключенных операций.
