Как убедиться, что ваше прогрессивное веб-приложение сохраняет оценку аудита Lighthouse

1656576731 kak ubeditsya chto vashe progressivnoe veb prilozhenie sohranyaet oczenku audita lighthouse

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

AuQiZGF4KtL4zHYEAOqNEswIzQ6oCtSeu6Bv

Бьюсь об заклад, большинство из вас уже внедряли веб-приложение. Некоторые из вас, возможно, даже создали прогрессивную веб-программу (PWA), которая может действовать как родная программа, установленная на устройстве. Возможно, вы следовали моим советам, чтобы ваше приложение полностью соответствовало установленным правилам и условиям PWA с помощью инструмента аудита Lighthouse.

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

В следующей статье я опишу, как проверить соответствие автоматически, встроив аудит Lighthouse PWA в ваш конвейер непрерывной интеграции.

Я начну именно там, где я остановился в своей предыдущей статье (то есть работа с образцом туристической программы, в которой перечислены интересные места для посещения). Приложение хранит свои данные в безголовой CMS Kentico Cloud и отвечает всем требованиям PWA. После каждого шага внедрения я дам ссылку GitHub на состояние кода, чтобы вы могли попробовать изменения шаг за шагом, без необходимости писать код самостоятельно.

ChXsB7q9dIfEsqL0lsbUZndv6QTX7ylGCvC5
Начальное состояние
KflsZQz0gDj0VvhSaG-WANi-Ywt7mldUigo1
Образец заявки

Я использую пакет Lighthouse npm. Хотя Lighthouse можно использовать непосредственно из командной строки, его программная форма лучше, поскольку она правильно сообщает об успехе, неудаче и результатах аудита.

Я сделаю в основном две вещи. Сначала я покажу, как использовать пакет командной строки from для отправки строки JSON с результатами аудита в мое окно консоли. Затем я покажу, как использовать пакет npm в конвейере непрерывной интеграции.

Как использовать пакет Lighthouse из командной строки

Давайте начнем с установки Lighthouse как зависимости разработки к проекту.

npm install --save-dev lighthouse

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

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

В вашем package.json файл, определите общедоступный URL, где будет развернута ваша программа, например:

{..."config": {   "deployUrl": "https://your-own-subdomain.surge.sh"},...}

Lighthouse будет настроен для выполнения аудита по этому URL-адресу. Но для этого нужно подождать несколько секунд, прежде чем приложение (или новая версия) станет общедоступным.

Иногда Surge публикует ваше приложение. Поэтому следует использовать пакет npm-delay (или что-то подобное), чтобы подождать две секунды перед выполнением аудита. Давайте пройти через это. Установите пакет в зависимости от разработки.

npm install --save-dev npm-delay

После установки установите команду сценария для развертывания с помощью Surge для своего URL-адреса. Затем определите команду сценария «маяк», которая создаст приложение в производственном режиме dist папку, воспользуйтесь командой «deploy», подождите две секунды (чтобы убедиться, что последняя версия программы общедоступна), а затем запустите аудит 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 с результатом аудита. То, что вы хотите проверить, это reportingCategories свойства, его внутренняя часть (отчет) под названием «Прогрессивное веб-приложение» со свойством под названием score.

{..."Категории отчета": [    ....    {      "name": "Progressive Web App",      ...      "id": "pwa",      "score": 100    }  ...  }
Nm21thuCToMlkcU0XKWVq7S910-BZhMQNvfU
Lighthouse check

Add the Lighthouse check to the Continuous Integration pipeline

To plug the PWA audit into the CI pipeline, we can use the programmatic approach of using Lighthouse. First of all, you’ll want to define the JavaScript script that will check the score of you PWA.

The script uses the URL defined in the package.json file. In that script, there is a function used to run the Headless Chrome and perform the Lighthouse audit on it. After the audit is finished, the script will wait for two seconds to be sure that your application is deployed and accessible. Finally, the script selects the value from the audit result JSON string and checks whether it meets the defined score level — 100 in this case. Otherwise it returns the exit code 1, which will in turn cause the Travis CI build to fail.

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 в хранилище в интерфейсе Travis, а затем просто фиксируете файл .travis.yml к корню вашего хранилища.

sudo: requireddist: trustylanguage: node_jsnode_js:- "stable"before_script:- npm installbefore_deploy:- npm run builddeploy:  provider: surge  project: ./dist/  domain:    skip_cleanup: trueafter_deploy:- npm run check-pwa-score

Как вы можете видеть внизу, есть действие после развертывания, которое проверяет оценку аудита PWA.

OBVHa6yT8a1O7xzmQOllT9wfW2c9xTUWI8VU
Добавьте аудит PWA к конвейеру CI

Вуаль! Теперь ваш конвейер сборки автоматически проверяет оценку аудита PWA.

RfocjMvvihEm9D-0xbCLr7uURJVZ1aGknXNT

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

Заключительные слова

Хорошая работа! Если вы проделали эти шаги, вы успешно добавили пакет Lighthouse npm, чтобы получить строку JSON с результатами на консоль.

Вы также настроили автоматическую публикацию приложения, подождите две секунды и воспользуйтесь функцией Lighthouse в Headless Chrome, чтобы проверить свой счет в конвейере Travis CI.

Теперь вам больше не придется терять сон из-за вашего драгоценного приложения!

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

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