core(config): add new PWA category groups (#6396)

GoogleChrome · Oct 26, 2018 · 7114406 · 7114406
1 parent ff3ccde
commit 7114406
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 255 deletions.
diff --git 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
diff --git 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
@@ -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
diff --git 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);