i18n: move pwa audits to i18n system (#9105)

lighthouse-core/audits/apple-touch-icon.js

@@ -17,13 +17,13 @@ const UIStrings = {
   title: 'Provides a valid `apple-touch-icon`',
   /** Title of a Lighthouse audit that tells the user that their site contains a vaild touch icon. This descriptive title is shown when the page does not contain a valid iOS touch icon. "apple-touch-icon" is an HTML attribute value and should not be translated. */
   failureTitle: 'Does not provide a valid `apple-touch-icon`',
-  /** Description of a Lighthouse audit that tells the user what having a valid apple-touch-icon does. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. "apple-touch-icon" is an HTML attribute value and should not be translated. */
-  description: 'For ideal appearance on iOS when users add to the home screen, define an ' +
-  'apple-touch-icon. It must point to a non-transparent 192px (or 180px) square PNG. ' +
-  '[Learn More](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/).',
+  /** Description of a Lighthouse audit that tells the user that having an apple-touch-icon allows websites to include an app icon to their installed progressive web apps, similar to a native app. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. "apple-touch-icon" is an HTML attribute value and should not be translated. */
+  description: 'For ideal appearance on iOS when users add a progressive web app to the home ' +
+    'screen, define an `apple-touch-icon`. It must point to a non-transparent 192px (or 180px) ' +
+    'square PNG. [Learn More](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/).',
   /** Warning that HTML attribute `apple-touch-icon-precomposed` should not be used in favor of `apple-touch-icon`.  "apple-touch-icon-precomposed" and "apple-touch-icon" are HTML attribute values and should not be translated. */
   precomposedWarning: '`apple-touch-icon-precomposed` is out of date; ' +
-  '`apple-touch-icon` is preferred.',
+    '`apple-touch-icon` is preferred.',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);

lighthouse-core/audits/content-width.js

@@ -6,6 +6,27 @@
 'use strict';
 
 const Audit = require('./audit.js');
+const i18n = require('../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the content size of a web site compared to the viewport, which is the size of the screen the site is displayed on. This descriptive title is shown to users when the site's content is sized appropriately. */
+  title: 'Content is sized correctly for the viewport',
+  /** Title of a Lighthouse audit that provides detail on the content size of a web site compared to the viewport, which is the size of the screen the site is displayed on. This descriptive title is shown to users when the site's content is not sized appropriately. */
+  failureTitle: 'Content is not sized correctly for the viewport',
+  /** Description of a Lighthouse audit that tells the user why they should care that a site's content size should match its viewport size, which is the size of the screen the site is displayed on. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'If the width of your app\'s content doesn\'t match the width ' +
+    'of the viewport, your app might not be optimized for mobile screens. ' +
+    '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/content-sized-correctly-for-viewport).',
+  /**
+   * @description Explanatory message stating that the viewport size and window size differ.
+   * @example {100} innerWidth
+   * @example {101} outerWidth
+   * */
+  explanation: 'The viewport size of {innerWidth}px does not match the window ' +
+    'size of {outerWidth}px.',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class ContentWidth extends Audit {
   /**
@@ -14,11 +35,9 @@ class ContentWidth extends Audit {
   static get meta() {
     return {
       id: 'content-width',
-      title: 'Content is sized correctly for the viewport',
-      failureTitle: 'Content is not sized correctly for the viewport',
-      description: 'If the width of your app\'s content doesn\'t match the width ' +
-          'of the viewport, your app might not be optimized for mobile screens. ' +
-          '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/content-sized-correctly-for-viewport).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['ViewportDimensions', 'TestedAsMobileDevice'],
     };
   }
@@ -33,32 +52,26 @@ class ContentWidth extends Audit {
     const windowWidth = artifacts.ViewportDimensions.outerWidth;
     const widthsMatch = viewportWidth === windowWidth;
 
-    if (IsMobile) {
-      return {
-        score: Number(widthsMatch),
-        explanation: this.createExplanation(widthsMatch, artifacts.ViewportDimensions),
-      };
-    } else {
+    if (!IsMobile) {
       return {
         score: 1,
         notApplicable: true,
       };
     }
-  }
 
-  /**
-   * @param {boolean} match
-   * @param {LH.Artifacts.ViewportDimensions} artifact
-   * @return {string}
-   */
-  static createExplanation(match, artifact) {
-    if (match) {
-      return '';
+    let explanation = '';
+    if (!widthsMatch) {
+      explanation = str_(UIStrings.explanation,
+        {innerWidth: artifacts.ViewportDimensions.innerWidth,
+          outerWidth: artifacts.ViewportDimensions.outerWidth});
     }
 
-    return 'The viewport size is ' + artifact.innerWidth + 'px, ' +
-        'whereas the window size is ' + artifact.outerWidth + 'px.';
+    return {
+      score: Number(widthsMatch),
+      explanation,
+    };
   }
 }
 
 module.exports = ContentWidth;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/installable-manifest.js

@@ -7,6 +7,20 @@
 
 const MultiCheckAudit = require('./multi-check-audit.js');
 const ManifestValues = require('../computed/manifest-values.js');
+const i18n = require('../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on if a website is installable as an application. This descriptive title is shown to users when a webapp is installable. */
+  title: 'Web app manifest meets the installability requirements',
+  /** Title of a Lighthouse audit that provides detail on if a website is installable as an application. This descriptive title is shown to users when a webapp is not installable. */
+  failureTitle: 'Web app manifest does not meet the installability requirements',
+  /** Description of a Lighthouse audit that tells the user why installability is important for webapps. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Browsers can proactively prompt users to add your app to their homescreen, ' +
+    'which can lead to higher engagement. ' +
+    '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/install-prompt).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 /**
  * @fileoverview
@@ -29,11 +43,9 @@ class InstallableManifest extends MultiCheckAudit {
   static get meta() {
     return {
       id: 'installable-manifest',
-      title: 'Web app manifest meets the installability requirements',
-      failureTitle: 'Web app manifest does not meet the installability requirements',
-      description: 'Browsers can proactively prompt users to add your app to their homescreen, ' +
-          'which can lead to higher engagement. ' +
-          '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/install-prompt).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['URL', 'WebAppManifest'],
     };
   }
@@ -92,3 +104,4 @@ class InstallableManifest extends MultiCheckAudit {
 }
 
 module.exports = InstallableManifest;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/load-fast-enough-for-pwa.js

@@ -33,6 +33,10 @@ const UIStrings = {
   /** Label for the audit identifying the time it took for the page to become interactive on a mobile network. */
   displayValueTextWithOverride: 'Interactive on simulated mobile network at ' +
   '{timeInMs, number, seconds}\xa0s',
+  /** Explanatory message displayed when a web page loads too slowly to be considered quickly interactive. This references another Lighthouse auditing category, "Performance", that can give additional details on performance debugging.  */
+  explanationLoadSlow: 'Your page loads too slowly and is not interactive within 10 seconds. ' +
+    'Look at the opportunities and diagnostics in the "Performance" section to learn how to ' +
+    'improve.',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -86,9 +90,7 @@ class LoadFastEnough4Pwa extends Audit {
     let explanation;
     if (!score) {
       displayValue = str_(displayValueTemplate, {timeInMs: tti.timing});
-      explanation = 'Your page loads too slowly and is not interactive within 10 seconds. ' +
-        'Look at the opportunities and diagnostics in the "Performance" section to learn how to ' +
-        'improve.';
+      explanation = str_(UIStrings.explanationLoadSlow);
     }
 
     return {

lighthouse-core/audits/manual/pwa-cross-browser.js

@@ -7,6 +7,17 @@
 'use strict';
 
 const ManualAudit = require('./manual-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that prompts the user to manually check that their site works across different web browsers. */
+  title: 'Site works cross-browser',
+  /** Description of a Lighthouse audit that tells the user why they should make sites work across different browsers. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'To reach the most number of users, sites should work across ' +
+  'every major browser. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist#site-works-cross-browser).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 /**
  * @fileoverview Manual PWA audit for cross browser support.
@@ -19,11 +30,12 @@ class PWACrossBrowser extends ManualAudit {
   static get meta() {
     return Object.assign({
       id: 'pwa-cross-browser',
-      description: 'To reach the most number of users, sites should work across ' +
-      'every major browser. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist#site-works-cross-browser).',
-      title: 'Site works cross-browser',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
     }, super.partialMeta);
   }
 }
 
 module.exports = PWACrossBrowser;
+module.exports.UIStrings = UIStrings;
+

lighthouse-core/audits/manual/pwa-each-page-has-url.js

@@ -6,6 +6,17 @@
 'use strict';
 
 const ManualAudit = require('./manual-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that prompts the user to manually check that each page on their website uses a unique URL. */
+  title: 'Each page has a URL',
+  /** Description of a Lighthouse audit that tells the user why they should use unique URLs for each web page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Ensure individual pages are deep linkable via URL and that URLs are ' +
+      'unique for the purpose of shareability on social media. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist#each-page-has-a-url).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 /**
  * @fileoverview Manual PWA audit to ensure every page has a deep link.
@@ -18,11 +29,11 @@ class PWAEachPageHasURL extends ManualAudit {
   static get meta() {
     return Object.assign({
       id: 'pwa-each-page-has-url',
-      description: 'Ensure individual pages are deep linkable via the URLs and that URLs are ' +
-          'unique for the purpose of shareability on social media. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist#each-page-has-a-url).',
-      title: 'Each page has a URL',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
     }, super.partialMeta);
   }
 }
 
 module.exports = PWAEachPageHasURL;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/manual/pwa-page-transitions.js

@@ -6,6 +6,17 @@
 'use strict';
 
 const ManualAudit = require('./manual-audit.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that prompts the user to manually check that page transitions (navigating to other pages on a website) shouldn't feel like they are waiting for the network to load. */
+  title: 'Page transitions don\'t feel like they block on the network',
+  /** Description of a Lighthouse audit that tells the user why they should make transitions in their web app feel fast. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Transitions should feel snappy as you tap around, even on a slow network, a ' +
+      'key to perceived performance. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist#page-transitions-dont-feel-like-they-block-on-the-network).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 /**
  * @fileoverview Manual PWA audit for janky-free page transitions.
@@ -18,11 +29,11 @@ class PWAPageTransitions extends ManualAudit {
   static get meta() {
     return Object.assign({
       id: 'pwa-page-transitions',
-      description: 'Transitions should feel snappy as you tap around, even on a slow network, a ' +
-          'key to perceived performance. [Learn more](https://developers.google.com/web/progressive-web-apps/checklist#page-transitions-dont-feel-like-they-block-on-the-network).',
-      title: 'Page transitions don\'t feel like they block on the network',
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
     }, super.partialMeta);
   }
 }
 
 module.exports = PWAPageTransitions;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/multi-check-audit.js

@@ -53,6 +53,7 @@ class MultiCheckAudit extends Audit {
     if (result.failures.length > 0) {
       return {
         score: 0,
+        // TODO(#7238): make this i18n-able.
         explanation: `Failures: ${result.failures.join(',\n')}.`,
         details,
       };

lighthouse-core/audits/offline-start-url.js

@@ -6,6 +6,25 @@
 'use strict';
 
 const Audit = require('./audit.js');
+const i18n = require('../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the a website's offline capabilities. "200" refers to the HTTP status code when a site responds successfully. This descriptive title is shown to users when the test page responds successfully while offline. */
+  title: '`start_url` responds with a 200 when offline',
+  /** Title of a Lighthouse audit that provides detail on the a website's offline capabilities. "200" refers to the HTTP status code when a site responds successfully. This descriptive title is shown to users when the test page does not respond successfully while offline. */
+  failureTitle: '`start_url` does not respond with a 200 when offline',
+  /** Description of a Lighthouse audit that tells the user why a website should respond to requests when offline. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'A service worker enables your web app to be reliable in unpredictable ' +
+    'network conditions. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http-200-when-offline).',
+  /**
+   * @description Warning that the audit couldn't find the start_url and used the page's URL instead.
+   * @example {No Manifest Fetched.} manifestWarning
+   * */
+  warningCantStart: 'Lighthouse couldn\'t read the `start_url` from the manifest. As a result, ' +
+  'the `start_url` was assumed to be the document\'s URL. Error message: \'{manifestWarning}\'.',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class OfflineStartUrl extends Audit {
   /**
@@ -14,9 +33,9 @@ class OfflineStartUrl extends Audit {
   static get meta() {
     return {
       id: 'offline-start-url',
-      title: 'start_url responds with a 200 when offline',
-      failureTitle: 'start_url does not respond with a 200 when offline',
-      description: 'A service worker enables your web app to be reliable in unpredictable network conditions. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http-200-when-offline).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['WebAppManifest', 'StartUrl'],
     };
   }
@@ -32,8 +51,7 @@ class OfflineStartUrl extends Audit {
     const manifest = artifacts.WebAppManifest;
     if (manifest && manifest.value && manifest.value.start_url.warning) {
       const manifestWarning = manifest.value.start_url.warning;
-      warnings.push('We couldn\'t read the start_url from the manifest. As a result, the ' +
-          `start_url was assumed to be the document's URL. Error message: '${manifestWarning}'.`);
+      warnings.push(str_(UIStrings.warningCantStart, {manifestWarning}));
     }
 
     const hasOfflineStartUrl = artifacts.StartUrl.statusCode === 200;
@@ -47,3 +65,4 @@ class OfflineStartUrl extends Audit {
 }
 
 module.exports = OfflineStartUrl;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/redirects-http.js

@@ -6,6 +6,19 @@
 'use strict';
 
 const Audit = require('./audit.js');
+const i18n = require('../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on HTTP to HTTPS redirects. This descriptive title is shown to users when HTTP traffic is redirected to HTTPS. */
+  title: 'Redirects HTTP traffic to HTTPS',
+  /** Title of a Lighthouse audit that provides detail on HTTP to HTTPS redirects. This descriptive title is shown to users when HTTP traffic is not redirected to HTTPS. */
+  failureTitle: 'Does not redirect HTTP traffic to HTTPS',
+  /** Description of a Lighthouse audit that tells the user why they should direct HTTP traffic to HTTPS. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'If you\'ve already set up HTTPS, make sure that you redirect all HTTP ' +
+    'traffic to HTTPS in order to enable secure web features for all your users. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http-redirects-to-https).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class RedirectsHTTP extends Audit {
   /**
@@ -14,10 +27,9 @@ class RedirectsHTTP extends Audit {
   static get meta() {
     return {
       id: 'redirects-http',
-      title: 'Redirects HTTP traffic to HTTPS',
-      failureTitle: 'Does not redirect HTTP traffic to HTTPS',
-      description: 'If you\'ve already set up HTTPS, make sure that you redirect all HTTP ' +
-         'traffic to HTTPS. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http-redirects-to-https).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['HTTPRedirect'],
     };
   }
@@ -34,3 +46,4 @@ class RedirectsHTTP extends Audit {
 }
 
 module.exports = RedirectsHTTP;
+module.exports.UIStrings = UIStrings;