Рубрики
Без рубрики

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

andrej Chrastina Progressive Web Apps (PWAS) быстро стал самым горячим платформой разработки в течение последнего года. Давайте посмотрим, что вам нужно сделать, чтобы придерживаться стандартов PWA. Статьи о концепции PWA повсюду. Я сосредоточусь на фактическом

Автор оригинала: FreeCodeCamp Community Member.

Ondrej Chrastina.

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

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

Предпосылки

Я начну с этого простого углового приложения, которое я использовал для демонстрации комбинации углового и PWA-подхода в моем Предыдущая статья Отказ У меня есть Обновлена Это к углому V6 и Kentico Cloud SDK V4 Отказ

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

  • манифест .json С набором значков, используемых при приложении, установлено в системе.
  • Реализация сервисного работника, используемая для кэширования скелета приложений (называемая раковиной приложения) и данные из безголовых CMS.

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

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

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

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

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

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

  • Установка NPM
  • NPM запустить сборку Чтобы создать приложение в режиме производства в /dist папка
  • NPM Установить -G Furge установить всплеск CLI глобально
  • всплеск/св Your-own-subdomain.surge.sh Разверните папку «dist» до указанного URL. Это требует от вас либо войти в систему или Установите переменные среды RUGE с логином и токеном.

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

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

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

PWA CheckList

Отступление, когда JavaScript не доступен

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

......

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

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

.........

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

Это только о конфигурации развертывания. Для достижения Автоматическое исполнение HTTPS Просто используйте «HTTPS://» перед доменом, к которому вы хотите развернуть приложение.

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

Йппер!

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

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

Бонус – быстрее первая нагрузка в угловой

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

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

..    
        
Pack and Go
    
    
...

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

Линии закрытия

Хорошо, мы закончили! Если вы стремитесь к Alla-Modern PWA приложение, построенное на вершине прочной структуры, теперь у вас есть.

Приложение работает на последней версии угловой, и поддерживается быстро и безголовый облако Centico CMS . Это встречает Все Требования инструмента аудита маяка, сделанного Google.

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

Оригинал: “https://www.freecodecamp.org/news/how-to-tune-up-your-progressive-web-app-to-get-a-perfect-audit-score-a1779d063eb7/”

Читайте ещё по теме: