Инструменты аудита¶

Добро пожаловать на День 5 недели 3 проекта #30DaysOfPWA! Хотите узнать больше об этом проекте? Ознакомьтесь с нашим постом Kickoff, чтобы получить более подробную информацию о дорожной карте контента и участниках. А теперь давайте погрузимся в работу!

ЧТО МЫ РАССМОТРИМ СЕГОДНЯ¶

Раздел	Описание
Почему нужно проводить аудит PWA	Почему следует использовать эти инструменты аудита?
Аудит с помощью PWABuilder	PWABuilder может определить, является ли наш PWA устанавливаемым и готовым к работе в магазине
Аудит с помощью Webhint	Давайте воспользуемся этими двумя новыми инструментами для создания нового PWA с помощью нескольких щелчков кнопок.
Аудит производительности с помощью Lighthouse и Edge Devtools	Глубокое погружение в некоторые инструменты, используемые в PWA Studio и Starter

Здравствуйте! В сегодняшнем посте из серии "30 дней PWA" мы узнаем, как провести аудит PWA и использовать его для улучшения пользовательского опыта.

Зачем проводить аудит PWA¶

Итак, зачем вообще нужно проводить аудит PWA? И что это вообще значит?

Когда мы говорим об аудите PWA, мы имеем в виду использование инструментов, позволяющих убедиться в том, что наш PWA:

Устанавливается из браузера
Готовность к отправке в магазины приложений, такие как Microsoft Store
доступным
быстрым
Соответствует лучшим практикам кроссбраузерной разработки.

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

Сегодня мы будем использовать PWABuider, Webhint и Edge Devtools для аудита нашего PWA, давайте приступим!

Аудит с помощью PWABuilder¶

Начнем с PWABuilder. Аудит, проводимый PWABuilder, направлен на то, чтобы убедиться в том, что наш PWA является качественным, устанавливаемым и готовым к публикации в магазинах приложений, таких как Microsoft Store. Для этого PWABuilder просматривает:

Web Manifest
Сервис-воркер
HTTPS Setup

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

Web Manifest	Сервис-воркер	Безопасность
Правильно подключен + зарегистрирован	Правильно подключен + зарегистрирован	Использует HTTPS
Содержит необходимые поля для установки	Работает в автономном режиме	Valid HTTPS Setup
Значки соответствуют лучшим практикам	Предлагаемые функции для улучшения работы в автономном режиме	Нет HTTP-контента на странице
Предлагаемые поля для улучшения PWA или включения новых функций

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

Для начала работы с аудитами PWABuilder можно использовать либо PWABuilder, либо расширение PWA Studio VSCode Extension.

Получение аудита с сайта pwabuilder.com¶

У вас уже есть опубликованный и работающий PWA, который вы хотите проверить?

Возьмите наш URL-адрес и перейдите на сайт.
Введите URL нашего PWA на главной странице сайта pwabuilder.com и нажмите кнопку Start !
Теперь pwabuilder.com проанализирует наш PWA и выдаст результаты аудита

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

Если общая оценка зеленая, значит, наш PWA готов к публикации, и мы можем нажать кнопку next, чтобы начать упаковку нашего PWA.

Если общая оценка желтая, это означает, что наш PWA, скорее всего, готов к публикации, но, возможно, в нем отсутствуют рекомендуемые функции, такие как background_color в нашем Web Manifest. Раздел, который снижает наш результат, также будет иметь желтый цвет. В этот момент следует щелкнуть на нем, чтобы увидеть, что нужно добавить.

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

Получение аудита с помощью PWA Studio¶

PWA Studio позволяет проводить аудит с помощью PWABuilder во время разработки, а не только после запуска PWA в эксплуатацию.

Установите PWA Studio из VSCode Marketplace
Откройте нашу кодовую базу в VSCode
Щелкните на пиктограмме PWABuilder в левой части VSCode
Теперь мы увидим наши аудиты

В PWA Studio используется более простой способ отображения аудитов. Как показано на скриншоте выше, здесь снова три секции, но на этот раз немного другие: Web Manifest, Service-воркер, Store Ready.

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

Для получения наилучшего PWA рекомендуется отметить как можно больше пунктов. Если вы не отметили что-то необходимое, PWA Studio выдаст вам предупреждение при попытке публикации в Интернете или упаковки PWA для магазинов приложений.

Аудит PWA с помощью Webhint¶

Возможно, вы уже слышали о Webhint, но знаете ли вы, что аудит с его помощью встроен в панель Issues в Edge devtools?

Панель Issues позволяет быстро просмотреть все проблемы, обнаруженные webhint в нашем приложении. Кроме того, она подсказывает, на какой HTML-элемент влияет проблема и как ее устранить.

.

Для использования:

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

Аудит производительности с помощью Lighthouse и Devtools¶

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

Примечание Инструментарий Edge devtools также может помочь оценить и улучшить производительность нашего приложения во время выполнения. Более подробную информацию можно найти в документации.

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

Чтобы приступить к аудиту производительности загрузки с помощью Lighthouse, выполните следующие действия:

Откройте наше приложение в Edge
Откройте Edge devtools.
Откройте вкладку Lighthouse в devtools

Нажмите кнопку Generate Report, чтобы получить базовый отчет
Проанализируйте отчет и внесите предложенные изменения в наше приложение.

Полное описание использования Lighthouse для улучшения производительности загрузки нашего приложения можно найти в docs.

Используя эти инструменты, мы можем быстро внести изменения в наш PWA, чтобы обеспечить наилучшее качество работы для наших пользователей. А поскольку PWA обновляются мгновенно, как обычные веб-сайты, мы можем быстро донести эти изменения до наших пользователей!

В следующей статье мы рассмотрим процесс преобразования существующего сайта в PWA!