diff --git a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap index 716e9943a9e3..2c64d0662fa0 100644 --- a/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap +++ b/lighthouse-cli/test/cli/__snapshots__/index-test.js.snap @@ -72,9 +72,6 @@ Object { Object { "path": "themed-omnibox", }, - Object { - "path": "manifest-short-name-length", - }, Object { "path": "content-width", }, @@ -814,52 +811,59 @@ Object { "pwa": Object { "auditRefs": Array [ Object { + "group": "pwa-fast-reliable", "id": "load-fast-enough-for-pwa", "weight": 7, }, Object { + "group": "pwa-fast-reliable", "id": "works-offline", "weight": 5, }, Object { - "id": "webapp-install-banner", - "weight": 3, - }, - Object { + "group": "pwa-installable", "id": "is-on-https", "weight": 2, }, Object { - "id": "redirects-http", - "weight": 2, - }, - Object { - "id": "viewport", - "weight": 2, - }, - Object { + "group": "pwa-installable", "id": "service-worker", "weight": 1, }, Object { - "id": "without-javascript", - "weight": 1, + "group": "pwa-installable", + "id": "webapp-install-banner", + "weight": 3, }, Object { + "group": "pwa-engaging", + "id": "redirects-http", + "weight": 2, + }, + Object { + "group": "pwa-engaging", "id": "splash-screen", "weight": 1, }, Object { + "group": "pwa-engaging", "id": "themed-omnibox", "weight": 1, }, Object { + "group": "pwa-engaging", "id": "content-width", "weight": 1, }, Object { - "id": "manifest-short-name-length", - "weight": 0, + "group": "pwa-engaging", + "id": "viewport", + "weight": 2, + }, + Object { + "group": "pwa-engaging", + "id": "without-javascript", + "weight": 1, }, Object { "id": "pwa-cross-browser", @@ -874,7 +878,7 @@ Object { "weight": 0, }, ], - "description": "These checks validate the aspects of a Progressive Web App, as specified by the baseline [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist).", + "description": "These checks validate the aspects of a Progressive Web App. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist).", "manualDescription": "These checks are required by the baseline [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist) but are not automatically checked by Lighthouse. They do not affect your score but it's important that you verify them manually.", "title": "Progressive Web App", }, @@ -993,6 +997,15 @@ Object { "metrics": Object { "title": "Metrics", }, + "pwa-engaging": Object { + "title": "Engaging", + }, + "pwa-fast-reliable": Object { + "title": "Fast and reliable", + }, + "pwa-installable": Object { + "title": "Installable", + }, "seo-content": Object { "description": "Format your HTML in a way that enables crawlers to better understand your app’s content.", "title": "Content Best Practices", @@ -1245,6 +1258,15 @@ Object { "metrics": Object { "title": "Metrics", }, + "pwa-engaging": Object { + "title": "Engaging", + }, + "pwa-fast-reliable": Object { + "title": "Fast and reliable", + }, + "pwa-installable": Object { + "title": "Installable", + }, "seo-content": Object { "description": "Format your HTML in a way that enables crawlers to better understand your app’s content.", "title": "Content Best Practices", diff --git a/lighthouse-core/audits/manifest-short-name-length.js b/lighthouse-core/audits/manifest-short-name-length.js deleted file mode 100644 index 7a0041d20861..000000000000 --- a/lighthouse-core/audits/manifest-short-name-length.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * @license Copyright 2016 Google Inc. All Rights Reserved. - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. - */ -'use strict'; - -const Audit = require('./audit'); -const ManifestValues = require('../gather/computed/manifest-values'); - -class ManifestShortNameLength extends Audit { - /** - * @return {LH.Audit.Meta} - */ - static get meta() { - return { - id: 'manifest-short-name-length', - title: 'The `short_name` won\'t be truncated on the homescreen', - failureTitle: 'The `short_name` will be truncated on the homescreen', - description: 'Make your app\'s `short_name` fewer than 12 characters to ' + - 'ensure that it\'s not truncated on homescreens. [Learn ' + - 'more](https://developers.google.com/web/tools/lighthouse/audits/manifest-short_name-is-not-truncated).', - requiredArtifacts: ['Manifest'], - }; - } - - /** - * @param {LH.Artifacts} artifacts - * @param {LH.Audit.Context} context - * @return {Promise} - */ - static async audit(artifacts, context) { - const manifestValues = await ManifestValues.request(artifacts.Manifest, context); - // If there's no valid manifest, this audit is not applicable - if (manifestValues.isParseFailure) { - return { - rawValue: true, - notApplicable: true, - }; - } - - const shortNameCheck = manifestValues.allChecks.find(i => i.id === 'hasShortName'); - const shortNameLengthCheck = manifestValues.allChecks.find(i => i.id === 'shortNameLength'); - - // If there's no short_name present, this audit is not applicable - if (shortNameCheck && !shortNameCheck.passing) { - return { - rawValue: true, - notApplicable: true, - }; - } - // Shortname is present, but it's too long - if (shortNameLengthCheck && !shortNameLengthCheck.passing) { - return { - rawValue: false, - explanation: `Failure: ${shortNameLengthCheck.failureText}.`, - }; - } - // Has a shortname that's under the threshold - return { - rawValue: true, - }; - } -} - -module.exports = ManifestShortNameLength; diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js index 547a1296ba05..d26faa2f7a18 100644 --- a/lighthouse-core/config/default-config.js +++ b/lighthouse-core/config/default-config.js @@ -31,6 +31,12 @@ const UIStrings = { diagnosticsGroupTitle: 'Diagnostics', /** Description of the diagnostics section of the Performance category. Within this section are audits with non-imperative titles that provide more detail on the page's page load performance characteristics. Whereas the 'Opportunities' suggest an action along with expected time savings, diagnostics do not. Within this section, the user may read the details and deduce additional actions they could take. */ diagnosticsGroupDescription: 'More information about the performance of your application.', + /** Title of the Fast and Reliable section of the web app category. Within this section are audits that check if the web site loaded quickly and can reliably load even if the internet connection is very slow or goes offline. */ + pwaFastReliableGroupTitle: 'Fast and reliable', + /** Title of the Installable section of the web app category. Within this section are audits that check if Chrome supports installing the web site as an app on their device. */ + pwaInstallableGroupTitle: 'Installable', + /** Title of the Engaging section of the web app category. Within this section are audits that check if the developer has taken advantage of features to make their web page more enjoyable and engaging for the user. */ + pwaEngagingGroupTitle: 'Engaging', }; const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings); @@ -116,7 +122,6 @@ const defaultConfig = { 'webapp-install-banner', 'splash-screen', 'themed-omnibox', - 'manifest-short-name-length', 'content-width', 'image-aspect-ratio', 'deprecations', @@ -225,6 +230,15 @@ const defaultConfig = { title: str_(UIStrings.diagnosticsGroupTitle), description: str_(UIStrings.diagnosticsGroupDescription), }, + 'pwa-fast-reliable': { + title: str_(UIStrings.pwaFastReliableGroupTitle), + }, + 'pwa-installable': { + title: str_(UIStrings.pwaInstallableGroupTitle), + }, + 'pwa-engaging': { + title: str_(UIStrings.pwaEngagingGroupTitle), + }, 'a11y-color-contrast': { title: 'Color Contrast Is Satisfactory', description: 'These are opportunities to improve the legibility of your content.', @@ -312,27 +326,25 @@ const defaultConfig = { }, 'pwa': { title: 'Progressive Web App', - description: 'These checks validate the aspects of a Progressive Web App, as specified by the baseline [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist).', + description: 'These checks validate the aspects of a Progressive Web App. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist).', manualDescription: 'These checks are required by the baseline ' + '[PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist) but are ' + 'not automatically checked by Lighthouse. They do not affect your score but it\'s important that you verify them manually.', auditRefs: [ - // Most difficult and critical for good UX - {id: 'load-fast-enough-for-pwa', weight: 7}, // can't be green in the category without being fast - {id: 'works-offline', weight: 5}, - // Encompasses most of the other checks - {id: 'webapp-install-banner', weight: 3}, - // Important but not too difficult - {id: 'is-on-https', weight: 2}, - {id: 'redirects-http', weight: 2}, - {id: 'viewport', weight: 2}, - // Relatively easy checkboxes to tick with minimal value on their own - {id: 'service-worker', weight: 1}, - {id: 'without-javascript', weight: 1}, - {id: 'splash-screen', weight: 1}, - {id: 'themed-omnibox', weight: 1}, - {id: 'content-width', weight: 1}, - {id: 'manifest-short-name-length', weight: 0}, + // Fast and Reliable + {id: 'load-fast-enough-for-pwa', weight: 7, group: 'pwa-fast-reliable'}, + {id: 'works-offline', weight: 5, group: 'pwa-fast-reliable'}, + // Installable + {id: 'is-on-https', weight: 2, group: 'pwa-installable'}, + {id: 'service-worker', weight: 1, group: 'pwa-installable'}, + {id: 'webapp-install-banner', weight: 3, group: 'pwa-installable'}, + // Engaging + {id: 'redirects-http', weight: 2, group: 'pwa-engaging'}, + {id: 'splash-screen', weight: 1, group: 'pwa-engaging'}, + {id: 'themed-omnibox', weight: 1, group: 'pwa-engaging'}, + {id: 'content-width', weight: 1, group: 'pwa-engaging'}, + {id: 'viewport', weight: 2, group: 'pwa-engaging'}, + {id: 'without-javascript', weight: 1, group: 'pwa-engaging'}, // Manual audits {id: 'pwa-cross-browser', weight: 0}, {id: 'pwa-page-transitions', weight: 0}, diff --git a/lighthouse-core/lib/i18n/en-US.json b/lighthouse-core/lib/i18n/en-US.json index 6b3f5e728665..cb2b606f7ef9 100644 --- a/lighthouse-core/lib/i18n/en-US.json +++ b/lighthouse-core/lib/i18n/en-US.json @@ -383,6 +383,18 @@ "message": "Performance", "description": "Title of the Performance category of audits. Equivalent to 'Web performance', this term is inclusive of all web page speed and loading optimization topics. Also used as a label of a score gauge; try to limit to 20 characters." }, + "lighthouse-core/config/default-config.js | pwaEngagingGroupTitle": { + "message": "Engaging", + "description": "Title of the Engaging section of the web app category. Within this section are audits that check if the developer has taken advantage of features to make their web page more enjoyable and engaging for the user." + }, + "lighthouse-core/config/default-config.js | pwaFastReliableGroupTitle": { + "message": "Fast and reliable", + "description": "Title of the Fast and Reliable section of the web app category. Within this section are audits that check if the web site loaded quickly and can reliably load even if the internet connection is very slow or goes offline." + }, + "lighthouse-core/config/default-config.js | pwaInstallableGroupTitle": { + "message": "Installable", + "description": "Title of the Installable section of the web app category. Within this section are audits that check if Chrome supports installing the web site as an app on their device." + }, "lighthouse-core/lib/i18n/i18n.js | columnCacheTTL": { "message": "Cache TTL", "description": "Label for the TTL column in data tables, entries will be the time to live value of the cache header on a web resource" diff --git a/lighthouse-core/test/audits/manifest-short-name-length-test.js b/lighthouse-core/test/audits/manifest-short-name-length-test.js deleted file mode 100644 index 705e5b3349ec..000000000000 --- a/lighthouse-core/test/audits/manifest-short-name-length-test.js +++ /dev/null @@ -1,94 +0,0 @@ -/** - * @license Copyright 2016 Google Inc. All Rights Reserved. - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. - */ -'use strict'; - -const ManifestShortNameLengthAudit = require('../../audits/manifest-short-name-length.js'); -const assert = require('assert'); -const manifestParser = require('../../lib/manifest-parser'); - -const EXAMPLE_MANIFEST_URL = 'https://example.com/manifest.json'; -const EXAMPLE_DOC_URL = 'https://example.com/index.html'; - -function generateMockArtifacts() { - return { - Manifest: null, - }; -} -function generateMockAuditContext() { - return { - computedCache: new Map(), - }; -} - -/* eslint-env jest */ - -describe('Manifest: short_name_length audit', () => { - it('marked as notApplicable if page had no manifest', () => { - const artifacts = generateMockArtifacts(); - artifacts.Manifest = null; - const context = generateMockAuditContext(); - - return ManifestShortNameLengthAudit.audit(artifacts, context).then(result => { - assert.strictEqual(result.rawValue, true); - assert.strictEqual(result.notApplicable, true); - }); - }); - - it('marked as notApplicable if manifest is present but empty', () => { - const artifacts = generateMockArtifacts(); - artifacts.Manifest = manifestParser('{}', EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL); - const context = generateMockAuditContext(); - return ManifestShortNameLengthAudit.audit(artifacts, context).then(result => { - assert.strictEqual(result.rawValue, true); - assert.strictEqual(result.notApplicable, true); - }); - }); - - it('marked as notApplicable when a manifest contains no short_name', () => { - const artifacts = generateMockArtifacts(); - const manifestSrc = JSON.stringify({ - name: 'i\'m much longer than the recommended size', - }); - artifacts.Manifest = manifestParser(manifestSrc, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL); - const context = generateMockAuditContext(); - return ManifestShortNameLengthAudit.audit(artifacts, context).then(result => { - assert.strictEqual(result.rawValue, true); - assert.strictEqual(result.notApplicable, true); - assert.equal(result.explanation, undefined); - }); - }); - - // Need to disable camelcase check for dealing with short_name. - /* eslint-disable camelcase */ - it('fails when a manifest contains a too long short_name', () => { - const artifacts = generateMockArtifacts(); - const manifestSrc = JSON.stringify({ - short_name: 'i\'m much longer than the recommended size', - }); - artifacts.Manifest = manifestParser(manifestSrc, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL); - const context = generateMockAuditContext(); - return ManifestShortNameLengthAudit.audit(artifacts, context).then(result => { - assert.equal(result.rawValue, false); - assert.ok(result.explanation.includes('without truncation'), result.explanation); - assert.equal(result.notApplicable, undefined); - }); - }); - - it('passes when a manifest contains a short_name', () => { - const artifacts = generateMockArtifacts(); - const manifestSrc = JSON.stringify({ - short_name: 'Lighthouse', - }); - artifacts.Manifest = manifestParser(manifestSrc, EXAMPLE_MANIFEST_URL, EXAMPLE_DOC_URL); - const context = generateMockAuditContext(); - return ManifestShortNameLengthAudit.audit(artifacts, context).then(result => { - assert.equal(result.rawValue, true); - assert.equal(result.explanation, undefined); - assert.equal(result.notApplicable, undefined); - }); - }); - /* eslint-enable camelcase */ -}); diff --git a/lighthouse-core/test/report/html/renderer/category-renderer-test.js b/lighthouse-core/test/report/html/renderer/category-renderer-test.js index 77e890be0125..0d4cb0751e2a 100644 --- a/lighthouse-core/test/report/html/renderer/category-renderer-test.js +++ b/lighthouse-core/test/report/html/renderer/category-renderer-test.js @@ -238,8 +238,8 @@ describe('CategoryRenderer', () => { const category = JSON.parse(JSON.stringify(origCategory)); category.auditRefs.forEach(audit => audit.result.score = 0); const elem = renderer.render(category, sampleResults.categoryGroups); - const passedAudits = elem.querySelectorAll('.lh-passed-audits > .lh-audit'); - const failedAudits = elem.querySelectorAll('.lh-failed-audits > .lh-audit'); + const passedAudits = elem.querySelectorAll('.lh-passed-audits .lh-audit'); + const failedAudits = elem.querySelectorAll('.lh-failed-audits .lh-audit'); assert.equal(passedAudits.length, 0); assert.equal(failedAudits.length, 11); diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index fa7f08eb1b08..2442879ba057 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -523,14 +523,6 @@ ] } }, - "manifest-short-name-length": { - "id": "manifest-short-name-length", - "title": "The `short_name` won't be truncated on the homescreen", - "description": "Make your app's `short_name` fewer than 12 characters to ensure that it's not truncated on homescreens. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/manifest-short_name-is-not-truncated).", - "score": null, - "scoreDisplayMode": "not-applicable", - "rawValue": true - }, "content-width": { "id": "content-width", "title": "Content is sized correctly for the viewport", @@ -2922,56 +2914,63 @@ }, "pwa": { "title": "Progressive Web App", - "description": "These checks validate the aspects of a Progressive Web App, as specified by the baseline [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist).", + "description": "These checks validate the aspects of a Progressive Web App. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist).", "manualDescription": "These checks are required by the baseline [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist) but are not automatically checked by Lighthouse. They do not affect your score but it's important that you verify them manually.", "auditRefs": [ { "id": "load-fast-enough-for-pwa", - "weight": 7 + "weight": 7, + "group": "pwa-fast-reliable" }, { "id": "works-offline", - "weight": 5 - }, - { - "id": "webapp-install-banner", - "weight": 3 + "weight": 5, + "group": "pwa-fast-reliable" }, { "id": "is-on-https", - "weight": 2 - }, - { - "id": "redirects-http", - "weight": 2 + "weight": 2, + "group": "pwa-installable" }, { - "id": "viewport", - "weight": 2 + "id": "service-worker", + "weight": 1, + "group": "pwa-installable" }, { - "id": "service-worker", - "weight": 1 + "id": "webapp-install-banner", + "weight": 3, + "group": "pwa-installable" }, { - "id": "without-javascript", - "weight": 1 + "id": "redirects-http", + "weight": 2, + "group": "pwa-engaging" }, { "id": "splash-screen", - "weight": 1 + "weight": 1, + "group": "pwa-engaging" }, { "id": "themed-omnibox", - "weight": 1 + "weight": 1, + "group": "pwa-engaging" }, { "id": "content-width", - "weight": 1 + "weight": 1, + "group": "pwa-engaging" }, { - "id": "manifest-short-name-length", - "weight": 0 + "id": "viewport", + "weight": 2, + "group": "pwa-engaging" + }, + { + "id": "without-javascript", + "weight": 1, + "group": "pwa-engaging" }, { "id": "pwa-cross-browser", @@ -3369,6 +3368,15 @@ "title": "Diagnostics", "description": "More information about the performance of your application." }, + "pwa-fast-reliable": { + "title": "Fast and reliable" + }, + "pwa-installable": { + "title": "Installable" + }, + "pwa-engaging": { + "title": "Engaging" + }, "a11y-color-contrast": { "title": "Color Contrast Is Satisfactory", "description": "These are opportunities to improve the legibility of your content." @@ -3800,6 +3808,15 @@ ], "lighthouse-core/config/default-config.js | diagnosticsGroupDescription": [ "categoryGroups.diagnostics.description" + ], + "lighthouse-core/config/default-config.js | pwaFastReliableGroupTitle": [ + "categoryGroups[pwa-fast-reliable].title" + ], + "lighthouse-core/config/default-config.js | pwaInstallableGroupTitle": [ + "categoryGroups[pwa-installable].title" + ], + "lighthouse-core/config/default-config.js | pwaEngagingGroupTitle": [ + "categoryGroups[pwa-engaging].title" ] } } diff --git a/proto/sample_v2_round_trip.json b/proto/sample_v2_round_trip.json index b451788703e7..f6c43f781f17 100644 --- a/proto/sample_v2_round_trip.json +++ b/proto/sample_v2_round_trip.json @@ -1227,13 +1227,6 @@ "scoreDisplayMode": "manual", "title": "The user's focus is directed to new content added to the page" }, - "manifest-short-name-length": { - "description": "Make your app's `short_name` fewer than 12 characters to ensure that it's not truncated on homescreens. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/manifest-short_name-is-not-truncated).", - "id": "manifest-short-name-length", - "score": null, - "scoreDisplayMode": "not_applicable", - "title": "The `short_name` won't be truncated on the homescreen" - }, "meta-description": { "description": "Meta descriptions may be included in search results to concisely summarize page content. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/description).", "id": "meta-description", @@ -3039,52 +3032,59 @@ "pwa": { "auditRefs": [ { + "group": "pwa-fast-reliable", "id": "load-fast-enough-for-pwa", "weight": 7.0 }, { + "group": "pwa-fast-reliable", "id": "works-offline", "weight": 5.0 }, { - "id": "webapp-install-banner", - "weight": 3.0 - }, - { + "group": "pwa-installable", "id": "is-on-https", "weight": 2.0 }, { - "id": "redirects-http", - "weight": 2.0 - }, - { - "id": "viewport", - "weight": 2.0 - }, - { + "group": "pwa-installable", "id": "service-worker", "weight": 1.0 }, { - "id": "without-javascript", - "weight": 1.0 + "group": "pwa-installable", + "id": "webapp-install-banner", + "weight": 3.0 + }, + { + "group": "pwa-engaging", + "id": "redirects-http", + "weight": 2.0 }, { + "group": "pwa-engaging", "id": "splash-screen", "weight": 1.0 }, { + "group": "pwa-engaging", "id": "themed-omnibox", "weight": 1.0 }, { + "group": "pwa-engaging", "id": "content-width", "weight": 1.0 }, { - "id": "manifest-short-name-length", - "weight": 0.0 + "group": "pwa-engaging", + "id": "viewport", + "weight": 2.0 + }, + { + "group": "pwa-engaging", + "id": "without-javascript", + "weight": 1.0 }, { "id": "pwa-cross-browser", @@ -3099,7 +3099,7 @@ "weight": 0.0 } ], - "description": "These checks validate the aspects of a Progressive Web App, as specified by the baseline [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist).", + "description": "These checks validate the aspects of a Progressive Web App. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist).", "id": "pwa", "manualDescription": "These checks are required by the baseline [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist) but are not automatically checked by Lighthouse. They do not affect your score but it's important that you verify them manually.", "score": 0.42, @@ -3222,6 +3222,15 @@ "metrics": { "title": "Metrics" }, + "pwa-engaging": { + "title": "Engaging" + }, + "pwa-fast-reliable": { + "title": "Fast and reliable" + }, + "pwa-installable": { + "title": "Installable" + }, "seo-content": { "description": "Format your HTML in a way that enables crawlers to better understand your app\u2019s content.", "title": "Content Best Practices"