Как настроить прогрессивную веб-приложение, чтобы получить идеальный результат аудита

1656595934 kak nastroit progressivnuyu veb prilozhenie chtoby poluchit idealnyj rezultat audita

автор Ондрий Кристина

C1Ol57rJpxszHP6NFU1qYKCgV3Wcgt7x9ijq

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

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

Предпосылки

Я начну с того простого приложения Angular, которое я использовал для демонстрации комбинации подхода Angular и PWA в моей предыдущей статье. Я обновил его до Angular v6 и Kentico Cloud SDK v4.

DgVUccQ9UixlgkMxLh7qbEg-AX40bYZiXcJJ
Обновление изменений

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

  • manifest.json с набором иконок, используемых при установке программы в системе.
  • Реализация service worker, используемая для кэширования скелета программы (называемая оболочкой программы) и данных по безголовой CMS.
hsRG5ts-kQ1s1k5uVWD1D1bMcC5RuUsvDA5P

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

Как пройти контрольный список PWA

Чтобы проверить, соответствует ли программа всем критериям, определенным в контрольном списке Google, сегодня можно использовать различные инструменты. Самый популярный называется Маяк.

gL2OcEH88JhPypm7IMJKxpIJaafA5XW7wt1v
Контрольный список Google

Lighthouse уже встроен в инструменты разработчика браузера Google Chrome на вкладке аудита. Чтобы запустить его, я рекомендую опубликовать рабочий вариант программы в Интернете и выполнить аудит оттуда.

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

Для развертывания я использую surge. Вам просто необходимо зарегистрироваться и установить инструменты CLI. Затем вы сможете развернуть папку в субдомене *.source.sh.

SvXmPZVDOy8AbV4N1w6jMyeP2CtRAzDl4hD0
Начальное состояние программы
  • npm install
  • npm run build чтобы построить программу в производственном режиме в /dist папку
  • npm install -g surge для глобальной установки surge CLI
  • surge /dist your-own-subdomain.surge.sh развернуть папку «dist» по указанному URL-адресу. Для этого необходимо либо войти, либо настроить переменные среды для входа с помощью логина и маркера.

Затем просто перейдите в программу в браузере Chrome. Выделите «Инструменты разработчика» > «Аудит» > «Выполнить аудит» > выберите «Прогрессивное веб-приложение» > «Выполнить аудит». Вы увидите следующие результаты.

gk8m5IDRjuVsWu1lMwdkkjPBcSU9SmWCHz4o

Как видите, восемь проверок уже прошли.

Теперь давайте проверим контрольный перечень PWA.

Контрольный список PWA

Резервный вариант, когда JavaScript недоступен

Все, что вам нужно сделать, чтобы удалить это сообщение, — это предоставить какое-либо сообщение для браузеров, не являющихся JavaScript. The noscript тег – идеальный способ сделать это. Просто добавьте следующий HTML-код к телу index.html.

...<noscript>    This page requires you to have the Javascript enabled.</noscript>...
hoYVfT5QWsbq8seVneFyXYi-6HimWlhEJnuw
Добавьте содержимое без сценариев

Адресная строка не соответствует цвету бренда

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

<html><head>...<meta name="theme-color" content="#1e88e5">...</head>...
AebJUq6fV5ESn9rJemam9Xp2JvhONfNYROGM
Добавить мета-тег цвета темы
OJVdeXrUQlSZMNnFZFQaRbbuaruwuRj4tYzJ

Трафик HTTP не перенаправляется автоматически на HTTPS

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

Теперь вы готовы снова провести аудит.

Wjq4nJ11MBLPuI-LTFTqQVwYSPhzanujT4oh

Yippee!

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

  • Сайт работает кроссбраузерно
  • Переходы страниц не кажутся блокированными в сети. Каждый раз, когда вы прикасаетесь к ссылке/кнопке, программа должна немедленно переключаться или отображать индикатор загрузки, пока программа ждет ответа от сети.
  • Каждая страница должна иметь URL-адрес — мы должны иметь возможность создавать URL-адреса для общего доступа. Это в основном предназначено для применения к одностраничным программам, чтобы гарантировать, что маршрутизатор на стороне клиента может восстановить состояние программы с заданного URL-адреса.

Бонус – скорее первая загрузка в Angular

Планируете ли вы сделать свое приложение действительно большим? Хотите, чтобы он немедленно отображал свою оболочку программы, а все компоненты Angular загружались в фоновом режиме? В самом деле, с большими приложениями вы можете получить предупреждение в отчете о том, что первая загрузка занимает слишком много времени.

Чтобы сделать все быстро, просто добавьте статику HTML кода в корневой файл компонента Angular. Этот HTML будет показан при инициализации. В ссылке фиксации ниже можно увидеть, что я также добавил несколько статических стилей, чтобы вещи отображались за один раз.

..<app-root>    <header class="static" style="width: 100%;        height: 56px;        color: #fff;        background: #1e88e5;        position: fixed;        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 2px 9px 1px rgba(0, 0, 0, .12), 0 4px 2px -2px rgba(0, 0, 0, .2);        padding-left: 16px;        margin: auto;        z-index: 10000;">        <h2 style="font-size: 20px;">Pack and Go</h2>    </header>    <main style="padding-top: 60px;        flex: 1;        overflow-x: hidden;        overflow-y: auto;"></main></app-root>...

Ниже можно увидеть результат во время тестирования с настройкой подключения «Медленный 3G».

b0fN53QRTod8uKy6bSGLYhdzZldy2hLS8LsM
Q5OWTluieGNAAtF22wXF1mKgMeb90kWr5uOr
Добавьте статическую оболочку программы

Замыкающие линии

Ладно, мы кончили! Если вы хотите создать ультрасовременную программу PWA, построенную на основе надежной платформы, теперь она у вас есть.

Приложение работает на последней версии Angular и поддерживается быстрой и безголовой CMS Kentico Cloud. Оно встречается все требования инструмента аудита Lighthouse от Google

Если вам интересно узнать, как включить проверки Lighthouse в вашу экосистему непрерывной интеграции, просто свяжитесь со мной через Twitter!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *