Автор оригинала: FreeCodeCamp Community Member.
Ondrej Chrastina.
Могу поспорить, что большинство из вас реализовали веб-приложение до. Некоторые из вас могут даже создать Прогрессивное веб-приложение (PWA), который может выступать в качестве собственного приложения, установленного в устройстве. Возможно, вы следовали мои советы Чтобы ваше приложение полностью соответствовало предписанным правилам и конвенциям PWA через инструмент аудита Lighthouse.
Теперь не было бы неплохо запустить аудит каждый раз, когда некоторые из ваших коллег обновляют кодовую базу? Происходит аварии, и даже если вы и ваши коллеги стремятся к 100% совместимой PWA, всегда приятно получить ранние предупреждения, сразу после каждой сборки.
В следующей статье я опишу, как автоматически проверять соответствие, встраивая Маяк PWA Audit в ваш конвейер постоянного интеграции.
Я начну, где я остановился в Моя предыдущая статья (То есть работает с примером путешествия приложений, который перечислены интересные места для посещения). Приложение хранит свои данные в Кентако облако без головы CMS И это отвечает всем Требования PWA Отказ После каждого шага реализации я предоставим ссылку GitHUB с состоянием кода, чтобы позволить вам попробовать изменения, шаг за шагом, без необходимости написать код самостоятельно.
Я буду использовать Пакет NPM маяка Отказ Хотя маяк может быть использован непосредственно из командной строки, его программная форма лучше, поскольку она правильно сообщает о успехе, неудаче и оценке аудита.
Я сделаю в основном две вещи. Во-первых, я покажу, как использовать пакет The Command Line, чтобы излучать строку JSON с результатами аудита в мое консольное окно. Затем я покажу, как использовать пакет NPM в непрерывной интеграционной трубопровод.
Как использовать пакет маяка из командной строки
Начнем с установки маяка в качестве зависимости в разработке проекту.
npm install --save-dev lighthouse
Для развертывания я использую Воспитание служба. Вам просто нужно зарегистрироваться на своем сайте и установить инструменты CLI (в следующем примере глобально). Затем вы можете развернуть папку в поддесявую папку.
npm install -g surge
Ruarge/Dist Youm-own-subdomain.surge.shНапример, разверните папку «DIST» до указанного URL. Это требует от вас либо войти в систему или Установите переменные среды RUGE с логином и токеном.
В вашем Package.json Файл, определите публичный URL-адрес, где будет развернуто ваше приложение, например:
{..."config": { "deployUrl": "https://your-own-subdomain.surge.sh"},...}Маяк будет настроен для выполнения аудита против этого URL. Но, чтобы сделать это, ему нужно подождать за несколько секунд до того, как приложение (или новая его версия) становится общедоступным.
Рюр иногда требует времени при публикации вашего приложения. Поэтому вы должны использовать NPM-задержка Пакет (или что-то подобное) ждать две секунды, прежде чем выполнять аудит. Давайте пройдемся через это. Установите пакет на зависимости разработки.
npm install --save-dev npm-delay
После того, как вы закончите с установкой, определите команду скрипта для развертывания, используя всплеск на свой URL. Затем определите команду скрипта «Маяк», которая построит приложение в режиме производства в Dist Папка, используйте команду «Развернуть», подождите две секунды (чтобы убедиться, что последняя версия приложения является общедоступным), а затем выполните аудит PWA против URL-адреса приложения.
{..."scripts": { ... "deploy": "surge dist %npm_package_config_deployUrl%", "lighthouse": "npm run build && npm run deploy && npm-delay 2000 && lighthouse --chrome-flags=\"--headless\" --quiet --output=json %npm_package_config_deployUrl%", ... }...}Хорошо, давайте запустим команду:
npm run lighthouse
В консоли вы увидите огромную строку JSON с результатом аудита. То, что вы хотите проверить, это ReportingCateguries Свойство, его внутренняя часть (отчет) по имени «Прогрессивное веб-приложение» с его свойством под названием Оценка Отказ
{ ... "reportCategories": [ .... { "name": "Progressive Web App", ... "id": "pwa", "score": 100 } ... }Добавить проверку маяка до постоянного интеграционного трубопровода
Чтобы подключить аудит PWA в трубопровод CI, мы можем использовать Программный подход использования маяка. Прежде всего, вы захотите определить сценарий JavaScript, который проверит счет вашей PWA.
Сценарий использует URL, определенный в Package.json файл. В этом скрипте есть функция, используемая для запуска Без головы хрома и выполнить аудит маяка на нем. После завершения аудита сценарий будет дождаться двух секунд, чтобы убедиться, что ваше приложение развернуто и доступно. Наконец, скрипт выбирает значение из Review Review json и проверяет, соответствует ли он определенный уровень оценки – 100 в этом случае. В противном случае он возвращает код выхода 1, который в свою очередь приведет к тому, что Трэвис CI построить, чтобы провалиться.
const lighthouse = require('lighthouse');const chromeLauncher = require('chrome-launcher');const appConfig = require('./package');const opts = { chromeFlags: ['--headless']};function launchChromeAndRunLighthouse(url, opts, config = null) { return chromeLauncher.launch({ chromeFlags: opts.chromeFlags }).then(chrome => { opts.port = chrome.port; return lighthouse(url, opts, config).then(results => { delete results.artifacts; return chrome.kill().then(() => results); }); });}launchChromeAndRunLighthouse(appConfig.config.deployUrl, opts).then(results => { setTimeout(() => { if (results.reportCategories.filter((item) => item.id === "pwa").length) { const score = results.reportCategories.filter((item) => item.id === "pwa")[0].score if (score >= 100) { console.info(`PWA score is 100.`); process.exit(0); } console.error(`Score is lower than 100. It is ${score}`); process.exit(1); } console.error(`No PWA score provided by lighthouse.`); process.exit(1); }, 2000); });Давайте определим новый скрипт в Package.json файл.
{... "scripts": { ... "check-pwa-score": "node checkLighthouse.js" ... }...}Наконец, триггерная сборка TRAVIS и Опубликовать 100% совместимый PWA !
Я использую файл yaml для конфигурации TRAVIS. В основном вы просто войти в Эта услуга На вашей учетной записи GitHub включите CI в репозиторий в UI TRAVIS, а затем вы просто совершаете файл .travis.yml к корню вашего репозитория.
sudo: requireddist: trustylanguage: node_jsnode_js:- "stable"before_script:- npm installbefore_deploy:- npm run builddeploy: provider: surge project: ./dist/ domain: https://kentico-cloud-sample-angular-pwa-app.surge.sh skip_cleanup: trueafter_deploy:- npm run check-pwa-score
Как вы можете видеть внизу, происходит действие после развертывания, которое проверяет оценку аудита PWA.
Вуаля! Ваш сбор по сборке теперь автоматически проверяет оценку аудита PWA.
Отныне следует ли у кого-либо из ваших коллег повредила соответствие вашего приложения PWA, они немедленно предупреждают Travis.
Окончательные слова
Молодец! Если вы следили за шагами, вы успешно добавили пакет NPM Lighthouse, чтобы получить строку JSON с результатами на консоль.
Вы также настроили вещи для автоматического публикации вашего приложения, подождите две секунды и используйте функциональность маяка в безголовом Chrome, чтобы проверить свой счет в трубопроводе TRAVIS CI.
Теперь вам больше не нужно потерять спать над вашим драгоценным приложением!