i18n: pwa

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 site compared to its viewport. 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 site compared to its viewport. 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. 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 the desktop installability of a website. 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 the desktop installability of a website. 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/is-on-https.js

@@ -31,7 +31,6 @@ const UIStrings = {
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
-
 const SECURE_SCHEMES = ['data', 'https', 'wss', 'blob', 'chrome', 'chrome-extension', 'about'];
 const SECURE_DOMAINS = ['localhost', '127.0.0.1'];
 

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 stating that there was a failure in an audit caused by the page loading too slowly to be considered interactive quickly. 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 suggests to the user that a site should work across different 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 suggests a site's pages should all have distinct URLs. */
+  title: 'Each page has a URL',
+  /** Description of a Lighthouse audit that tells the user why they should use distinct URLs for each 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 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).',
+};
+
+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 suggests a page's transitions should not block network requests. */
+  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 the transitions smooth. 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(exterkamp): 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 start_url's offline capabilities. This descriptive title is shown to users when the manifest's start_url responds successfully while offline. */
+  title: 'start_url responds with a 200 when offline',
+  /** Title of a Lighthouse audit that provides detail on the start_url's offline capabilities. This descriptive title is shown to users when the manifest's start_url 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 site should respond when requested 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 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;