by Ondrej Chrastina

通過Ondrej Chrastina

如何確保您的Progressive Web App保持其Lighthouse審核分數 (How to make sure your Progressive Web App keeps its Lighthouse audit score)

I bet most of you have implemented a web application before. Some of you may even have created a Progressive Web App (PWA) that can act as a native app installed in a device. You’ve maybe followed my tips to make your app fully compliant with prescribed PWA rules and conventions via the Lighthouse audit tool.

我敢打賭，你們大多數人以前已經實現了Web應用程序。 你們中的某些人甚至可能已經創建了一個漸進式Web應用程序 (PWA)，可以用作安裝在設備中的本機應用程序。 您可能已經遵循了我的提示 ，可以通過Lighthouse審核工具使您的應用完全符合規定的PWA規則和約定。

Now, wouldn’t it be nice to run the audit every time some of your colleagues updates the code-base? Accidents happen, and even if you and your colleagues strive for a 100% compliant PWA, it is always great to get early warnings, immediately after each build.

現在，每次您的一些同事更新代碼庫時進行審核不是很好嗎？ 有時會發生事故，即使您和您的同事努力實現100％符合PWA的要求，每次構建后立即獲得預警也總是很棒的。

In the following article, I’ll describe how to check the compliance automatically by embedding the Lighthouse PWA audit into your continuous integration pipeline.

在下面的文章中，我將介紹如何通過將Lighthouse PWA審核嵌入到您的持續集成管道中來自動檢查合規性。

I’ll start exactly where I left off in my previous article (that is, working with the sample travel application that lists interesting places to visit). The app stores its data in the Kentico Cloud headless CMS and it meets all the PWA requirements. Following each implementation step, I will provide a GitHub link to the code state to allow you to try the changes step by step, without the need to write the code on your own.

我將從上一篇文章中剛停下來的地方開始(也就是使用示例旅行應用程序，其中列出了有趣的景點)。 該應用程序將其數據存儲在Kentico Cloud無頭CMS中 ，并且滿足所有PWA要求 。 在每個實現步驟之后，我將提供一個指向代碼狀態的GitHub鏈接，使您可以逐步嘗試所做的更改，而無需自己編寫代碼。

I will use the Lighthouse npm package. Although Lighthouse could be used directly from the command line, its programmatic form is better as it properly reports success, failure, and the audit score.

我將使用Lighthouse npm軟件包 。 雖然Lighthouse可以直接從命令行使用，但是它的程序形式更好，因為它可以正確報告成功，失敗和審核分數。

I’ll do basically two things. First, I’ll show how to use the package the from command line to emit a JSON string with the audit results into my console window. Then I will show how to use the npm package in a continuous integration pipeline.

我基本上會做兩件事。 首先，我將展示如何使用from命令行軟件包在控制臺窗口中發出帶有審計結果的JSON字符串。 然后，我將展示如何在連續集成管道中使用npm軟件包。

如何從命令行使用Lighthouse軟件包 (How to use the Lighthouse package from the command line)

Let’s start by installing Lighthouse as a development dependency to the project.

讓我們首先安裝Lighthouse作為項目的開發依賴項。

npm install --save-dev lighthouse

For deployment, I am using Surge service. You just have to register on its site and install the CLI tools (in the following example globally). Then, you’re able to deploy the folder into a *.surge.sh sub-domain.

對于部署，我正在使用Surge服務。 您只需要在其站點上注冊并安裝CLI工具(在以下示例中為全局)。 然后，您可以將文件夾部署到* .surge.sh子域中。

npm install -g surge

• surge /dist your-own-subdomain.surge.sh for example deploy the “dist” folder to the specified URL. This requires you to either log in or set the surge environment variables with the login and token.

  例如，將surge /dist your-own-subdomain.surge.sh部署到指定的URL。 這要求您登錄或使用登錄名和令牌設置喘振環境變量 。

In your package.json file, define a public URL where your app will be deployed, like so:

在package.json文件中，定義將在其中部署應用程序的公共URL，如下所示：

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

Lighthouse will be configured to perform the audit against this URL. But, in order to do that, it needs to wait a few seconds before the app (or a new version of it) becomes publicly accessible.

Lighthouse將配置為針對此URL執行審核。 但是，為此，它需要等待幾秒鐘，然后該應用程序(或其新版本)才能公開訪問。

Surge sometimes takes its time when publishing your app. Therefore, you should use the npm-delay package (or something similar) to wait for two seconds before performing the audit. Let’s get through it. Install the package to the development dependencies.

發布應用程序時，Surge有時會花費一些時間。 因此，在執行審核之前，應使用npm-delay程序包(或類似的程序)等待兩秒鐘。 讓我們來解決它。 將軟件包安裝到開發依賴項。

npm install --save-dev npm-delay

Once you’re done with installing, define the script command for deployment using Surge to your URL. Then, define the “lighthouse” script command that will build the app in production mode into the dist folder, use the “deploy” command, wait for two seconds (to make sure that last version of app is publicly accessible), and then run the PWA audit against the application’s URL.

安裝完成后，請使用Surge到URL定義用于部署的腳本命令。 然后，定義“燈塔”腳本命令，將生產模式下的應用程序構建到dist文件夾中，使用“部署”命令，等待兩秒鐘(以確保可以公開訪問該應用程序的最新版本)，然后運行針對應用程序的URL進行PWA審核。

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

Alright, let’s run the command:

好吧，讓我們運行命令：

npm run lighthouse

In the console, you’ll see a huge JSON string with the audit result. What you want to inspect is the reportingCategories property, its inner part (report) named “Progressive Web App” with its property called score.

在控制臺中，您將看到一個巨大的JSON字符串以及審核結果。 您要檢查的是reportingCategories屬性，其內部(報告)名為“ Progressive Web App”，其屬性稱為score 。

{ ... "reportCategories": [ .... { "name": "Progressive Web App", ... "id": "pwa", "score": 100 } ... }

將Lighthouse檢查添加到持續集成管道中 (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.

要將PWA審核插入CI管道，我們可以使用使用Lighthouse的編程方法 。 首先，您需要定義JavaScript腳本，該腳本將檢查您的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.

該腳本使用package.json文件中定義的URL。 在該腳本中，有一個函數用于運行Headless Chrome并對其執行Lighthouse審核。 審核完成后，腳本將等待兩秒鐘，以確保您的應用程序已部署且可訪問。 最后，腳本從審計結果JSON字符串中選擇值，并檢查其是否滿足定義的分數級別(在這種情況下為100)。 否則，它將返回退出代碼1，這又將導致Travis 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); });

Let’s define the new script in the package.json file.

讓我們在package.json文件中定義新腳本。

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

Finally trigger Travis build and publish out a 100% compliant PWA!

最終觸發Travis構建并發布100％兼容的PWA ！

I am using a yaml file for Travis configuration. Basically, you just sign in to this service by your GitHub account, turn on the CI to repository in the Travis UI, and then you just commit the file .travis.yml to the root of your repository.

我正在使用Yaml文件進行Travis配置。 基本上，您只需使用GitHub帳戶登錄此服務 ，在Travis UI中打開配置項的CI，然后將.travis.yml文件.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

As you can see at the bottom, there is an after-deploy action that checks the PWA audit score.

如您在底部看到的，有一個部署后操作，用于檢查PWA審核分數。

Voila! Your build pipeline now automatically checks the PWA audit score.

瞧！ 現在，您的構建管道會自動檢查PWA審核分數。

From now on, should any of your colleagues hurt the compliance of your PWA app, they will immediately be warned by Travis.

從現在開始，如果您的任何同事損害了您的PWA應用程序的合規性，Travis將立即警告他們。

最后的話 (Final words)

Good job! If you’ve followed the steps, you’ve successfully added the Lighthouse npm package to get the JSON string with the results to the console.

做得好！ 如果執行了這些步驟，那么您已經成功添加了Lighthouse npm包，以將帶有結果的JSON字符串添加到控制臺。

You’ve also set things up to automatically publish your app, wait two seconds, and use the Lighthouse functionality in the Headless Chrome to check for your score in a Travis CI pipeline.

您還設置了自動發布應用程序的功能，等待兩秒鐘，然后使用Headless Chrome中的Lighthouse功能檢查Travis CI管道中的分數。

Now, you no longer have to lose sleep over your precious app!

現在，您不再需要為珍貴的應用程序而沉迷！

翻譯自: https://www.freecodecamp.org/news/how-to-make-sure-your-progressive-web-app-keeps-its-lighthouse-audit-score-4c11cf514e1a/

總結

以上是生活随笔為你收集整理的如何确保您的Progressive Web App保持其Lighthouse审核分数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。