de Ondrej Chrastina

Cum să vă asigurați că aplicația dvs. Progressive Web își păstrează scorul de audit Lighthouse

Cum sa va asigurati ca aplicatia dvs Progressive Web isi

Pun pariu că majoritatea dintre voi ați implementat o aplicație web înainte. Este posibil ca unii dintre voi să fi creat chiar și un Aplicație web progresivă (PWA) care poate acționa ca o aplicație nativă instalată pe un dispozitiv. Poate că ai urmat sfaturile mele pentru ca aplicația dvs. să fie pe deplin conformă cu regulile și convențiile PWA prescrise prin intermediul instrumentului de audit Lighthouse.

Acum, nu ar fi frumos să derulați auditul de fiecare dată când unii dintre colegii dvs. actualizează baza de coduri? Se întâmplă accidente și chiar dacă tu și colegii tăi te străduiești să obții un PWA 100% compatibil, este întotdeauna minunat să primești avertismente timpurii, imediat după fiecare construcție.

În articolul următor, voi descrie cum se verifică automat conformitatea prin încorporarea fișierului Far Audit PWA în conducta dvs. de integrare continuă.

Voi începe exact de unde am rămas articolul meu anterior (adică lucrul cu eșantionul aplicației de călătorie care listează locuri interesante de vizitat). Aplicația își stochează datele în CMS fără cap Kentico Cloud și îndeplinește toate Cerințe PWA. După fiecare pas de implementare, voi furniza un link GitHub către starea codului pentru a vă permite să încercați modificările pas cu pas, fără a fi nevoie să scrieți codul pe cont propriu.

1611329045 285 Cum sa va asigurati ca aplicatia dvs Progressive Web isi
Stare initiala
1611329045 603 Cum sa va asigurati ca aplicatia dvs Progressive Web isi
Exemplu de aplicație

Voi folosi Pachet Lighthouse npm. Deși Lighthouse ar putea fi utilizat direct din linia de comandă, forma sa programatică este mai bună deoarece raportează în mod corespunzător succesul, eșecul și scorul auditului.

Voi face practic două lucruri. În primul rând, vă voi arăta cum să utilizați pachetul de la linia de comandă pentru a emite un șir JSON cu rezultatele auditului în fereastra consolei mele. Apoi voi arăta cum să utilizați pachetul npm într-o conductă de integrare continuă.

Cum se utilizează pachetul Lighthouse din linia de comandă

Să începem prin a instala Lighthouse ca o dependență de dezvoltare față de proiect.

npm install --save-dev lighthouse

Pentru implementare, îl folosesc Surge serviciu. Trebuie doar să vă înregistrați pe site-ul său și să instalați instrumentele CLI (în exemplul următor la nivel global). Apoi, puteți implementa folderul într-un sub-domeniu * .surge.sh.

npm install -g surge
  • surge /dist your-own-subdomain.surge.sh de exemplu, implementați folderul „dist” pe adresa URL specificată. Acest lucru vă cere să vă conectați sau setați variabilele de mediu de supratensiune cu logarea și simbolul.

În dumneavoastră package.json fișier, definiți o adresă URL publică unde va fi implementată aplicația dvs., astfel:

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

Farul va fi configurat pentru a efectua auditul față de această adresă URL. Dar, pentru a face acest lucru, trebuie să aștepte câteva secunde înainte ca aplicația (sau o nouă versiune a acesteia) să devină accesibilă publicului.

Surge își ia uneori timpul când publică aplicația. Prin urmare, ar trebui să utilizați npm-întârziere pachet (sau ceva similar) să aștepte două secunde înainte de a efectua auditul. Să trecem prin asta. Instalați pachetul în dependențele de dezvoltare.

npm install --save-dev npm-delay

După ce ați terminat instalarea, definiți comanda de script pentru implementare utilizând Surge la adresa URL. Apoi, definiți comanda de script „far” care va construi aplicația în modul de producție în dist folder, utilizați comanda „deploy”, așteptați două secunde (pentru a vă asigura că ultima versiune a aplicației este accesibilă publicului), apoi executați auditul PWA pe adresa URL a aplicației.

{..."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%",    ...  }...}

Bine, să executăm comanda:

npm run lighthouse

În consolă, veți vedea un șir JSON imens cu rezultatul auditului. Ceea ce doriți să inspectați este reportingCategories proprietate, partea sa internă (raport) numită „Progresivă aplicație web” cu proprietatea sa numită score.

{... „reportCategories”: [    ....    {      "name": "Progressive Web App",      ...      "id": "pwa",      "score": 100    }  ...  }
1611329046 53 Cum sa va asigurati ca aplicatia dvs Progressive Web isi
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);    });

Să definim noul script în package.json fişier.

{...    "scripts": {    ...    "check-pwa-score": "node checkLighthouse.js"    ...    }...}

În cele din urmă declanșează construcția Travis și publicați un PWA 100% compatibil!

Folosesc un fișier yaml pentru configurația Travis. Practic, trebuie doar să vă conectați la acest serviciu prin contul dvs. GitHub, activați CI pentru depozitare în interfața de utilizare Travis și apoi doar comiteți fișierul .travis.yml la rădăcina depozitului dvs.

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

După cum puteți vedea în partea de jos, există o acțiune după implementare care verifică scorul de audit PWA.

1611329046 966 Cum sa va asigurati ca aplicatia dvs Progressive Web isi
Adăugați audit PWA la conducta CI

Voila! Conducta dvs. de construire verifică acum automat scorul de audit PWA.

1611329046 80 Cum sa va asigurati ca aplicatia dvs Progressive Web isi

De acum înainte, dacă vreunul dintre colegii tăi afectează conformitatea aplicației tale PWA, Travis va fi avertizat imediat.

Cuvinte finale

Bună treabă! Dacă ați urmat pașii, ați adăugat cu succes pachetul Lighthouse npm pentru a obține șirul JSON cu rezultatele în consolă.

De asemenea, ați configurat lucrurile pentru a vă publica automat aplicația, așteptați două secunde și utilizați funcționalitatea Lighthouse din Headless Chrome pentru a vă verifica scorul într-o conductă Travis CI.

Acum, nu mai trebuie să-ți pierzi somnul față de prețioasa ta aplicație!