diff --git a/lighthouse-core/audits/apple-touch-icon.js b/lighthouse-core/audits/apple-touch-icon.js index 46313a29e1e6..eb5ad8486b3d 100644 --- a/lighthouse-core/audits/apple-touch-icon.js +++ b/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); diff --git a/lighthouse-core/audits/content-width.js b/lighthouse-core/audits/content-width.js index 710a269f93e8..308fa393ae15 100644 --- a/lighthouse-core/audits/content-width.js +++ b/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; diff --git a/lighthouse-core/audits/installable-manifest.js b/lighthouse-core/audits/installable-manifest.js index 280f05d24094..952ab065619c 100644 --- a/lighthouse-core/audits/installable-manifest.js +++ b/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; diff --git a/lighthouse-core/audits/load-fast-enough-for-pwa.js b/lighthouse-core/audits/load-fast-enough-for-pwa.js index 052cedcc2d23..68f500eb9c55 100644 --- a/lighthouse-core/audits/load-fast-enough-for-pwa.js +++ b/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 { diff --git a/lighthouse-core/audits/manual/pwa-cross-browser.js b/lighthouse-core/audits/manual/pwa-cross-browser.js index b28bf97a5e1f..57d073a58d81 100644 --- a/lighthouse-core/audits/manual/pwa-cross-browser.js +++ b/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; + diff --git a/lighthouse-core/audits/manual/pwa-each-page-has-url.js b/lighthouse-core/audits/manual/pwa-each-page-has-url.js index 835cd8d06f19..6b6eec477cde 100644 --- a/lighthouse-core/audits/manual/pwa-each-page-has-url.js +++ b/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; diff --git a/lighthouse-core/audits/manual/pwa-page-transitions.js b/lighthouse-core/audits/manual/pwa-page-transitions.js index 10cbe7bdb099..5de70a73f8ea 100644 --- a/lighthouse-core/audits/manual/pwa-page-transitions.js +++ b/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; diff --git a/lighthouse-core/audits/multi-check-audit.js b/lighthouse-core/audits/multi-check-audit.js index afb099ffbd7a..22a4def70cc9 100644 --- a/lighthouse-core/audits/multi-check-audit.js +++ b/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, }; diff --git a/lighthouse-core/audits/offline-start-url.js b/lighthouse-core/audits/offline-start-url.js index 72d4c2282c2c..88b78d248a63 100644 --- a/lighthouse-core/audits/offline-start-url.js +++ b/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; diff --git a/lighthouse-core/audits/redirects-http.js b/lighthouse-core/audits/redirects-http.js index 9162a18b0ce1..ecca81a097f6 100644 --- a/lighthouse-core/audits/redirects-http.js +++ b/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; diff --git a/lighthouse-core/audits/service-worker.js b/lighthouse-core/audits/service-worker.js index f5518c93740c..ad2e21490b9d 100644 --- a/lighthouse-core/audits/service-worker.js +++ b/lighthouse-core/audits/service-worker.js @@ -7,6 +7,39 @@ const URL = require('../lib/url-shim.js'); const Audit = require('./audit.js'); +const i18n = require('../lib/i18n/i18n.js'); + +const UIStrings = { + /** Title of a Lighthouse audit that provides detail on a page's service worker. This descriptive title is shown to users when a service worker is registered and valid. */ + title: 'Registers a service worker that controls page and `start_url`', + /** Title of a Lighthouse audit that provides detail on a page's service worker. This descriptive title is shown to users when a service worker is not present or invalid. */ + failureTitle: 'Does not register a service worker that controls page and `start_url`', + /** Description of a Lighthouse audit that tells the user why they should use a service worker. 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: 'The service worker is the technology that enables your app to use many ' + + 'Progressive Web App features, such as offline, add to homescreen, and push ' + + 'notifications. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/registered-service-worker).', + /** + * @description Message explaining that the website may have service workers, but none are in scope to control the tested web page. + * @example {https://example.com/} pageUrl + * */ + explanationOutOfScope: 'This origin has one or more service workers, however the page ' + + '({pageUrl}) is not in scope.', + /** Message explaining that the page has no manifest file so can't specify a starting url. */ + explanationNoManifest: 'This page is controlled by a service worker, however ' + + 'no `start_url` was found because no manifest was fetched.', + /** Message explaining that the page had an invalid manifest file so can't specify a starting url. */ + explanationBadManifest: 'This page is controlled by a service worker, however ' + + 'no `start_url` was found because manifest failed to parse as valid JSON', + /** + * @description Message explaining that the website has a service worker, but none are in scope to control the tested starting url. + * @example {https://example.com/} startUrl + * @example {https://othersite.com/} scopeUrl + * */ + explanationBadStartUrl: 'This page is controlled by a service worker, however ' + + 'the `start_url` ({startUrl}) is not in the service worker\'s scope ({scopeUrl})', +}; + +const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings); class ServiceWorker extends Audit { /** @@ -15,11 +48,9 @@ class ServiceWorker extends Audit { static get meta() { return { id: 'service-worker', - title: 'Registers a service worker that controls page and start_url', - failureTitle: 'Does not register a service worker that controls page and start_url', - description: 'The service worker is the technology that enables your app to use many ' + - 'Progressive Web App features, such as offline, add to homescreen, and push ' + - 'notifications. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/registered-service-worker).', + title: str_(UIStrings.title), + failureTitle: str_(UIStrings.failureTitle), + description: str_(UIStrings.description), requiredArtifacts: ['URL', 'ServiceWorker', 'WebAppManifest'], }; } @@ -70,15 +101,15 @@ class ServiceWorker extends Audit { */ static checkStartUrl(manifest, scopeUrl) { if (!manifest) { - return 'no start_url was found because no manifest was fetched'; + return str_(UIStrings.explanationNoManifest); } if (!manifest.value) { - return 'no start_url was found because manifest failed to parse as valid JSON'; + return str_(UIStrings.explanationBadManifest); } const startUrl = manifest.value.start_url.value; if (!startUrl.startsWith(scopeUrl)) { - return `the start_url ("${startUrl}") is not in the service worker's scope ("${scopeUrl}")`; + return str_(UIStrings.explanationBadStartUrl, {startUrl, scopeUrl}); } } @@ -103,7 +134,7 @@ class ServiceWorker extends Audit { if (!controllingScopeUrl) { return { score: 0, - explanation: `This origin has one or more service workers, however the page ("${pageUrl.href}") is not in scope.`, // eslint-disable-line max-len + explanation: str_(UIStrings.explanationOutOfScope, {pageUrl: pageUrl.href}), }; } @@ -112,7 +143,7 @@ class ServiceWorker extends Audit { if (startUrlFailure) { return { score: 0, - explanation: `This page is controlled by a service worker, however ${startUrlFailure}.`, + explanation: startUrlFailure, }; } @@ -124,3 +155,4 @@ class ServiceWorker extends Audit { } module.exports = ServiceWorker; +module.exports.UIStrings = UIStrings; diff --git a/lighthouse-core/audits/splash-screen.js b/lighthouse-core/audits/splash-screen.js index 7a4cc0af5020..69f83a3eaa64 100644 --- a/lighthouse-core/audits/splash-screen.js +++ b/lighthouse-core/audits/splash-screen.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 splash screens. This descriptive title is shown to users when the site has a custom splash screen. */ + title: 'Configured for a custom splash screen', + /** Title of a Lighthouse audit that provides detail on splash screens. This descriptive title is shown to users when the site does not have a custom splash screen. */ + failureTitle: 'Is not configured for a custom splash screen', + /** Description of a Lighthouse audit that tells the user why they should configure a custom splash screen. 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 themed splash screen ensures a high-quality experience when ' + + 'users launch your app from their homescreens. [Learn ' + + 'more](https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen).', +}; + +const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings); /** * @fileoverview @@ -28,11 +42,9 @@ class SplashScreen extends MultiCheckAudit { static get meta() { return { id: 'splash-screen', - title: 'Configured for a custom splash screen', - failureTitle: 'Is not configured for a custom splash screen', - description: 'A themed splash screen ensures a high-quality experience when ' + - 'users launch your app from their homescreens. [Learn ' + - 'more](https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen).', + title: str_(UIStrings.title), + failureTitle: str_(UIStrings.failureTitle), + description: str_(UIStrings.description), requiredArtifacts: ['WebAppManifest'], }; } @@ -83,3 +95,4 @@ class SplashScreen extends MultiCheckAudit { } module.exports = SplashScreen; +module.exports.UIStrings = UIStrings; diff --git a/lighthouse-core/audits/themed-omnibox.js b/lighthouse-core/audits/themed-omnibox.js index 6d2deca8f084..2295a98ff8e1 100644 --- a/lighthouse-core/audits/themed-omnibox.js +++ b/lighthouse-core/audits/themed-omnibox.js @@ -8,6 +8,19 @@ const MultiCheckAudit = require('./multi-check-audit.js'); const ManifestValues = require('../computed/manifest-values.js'); const cssParsers = require('cssstyle/lib/parsers'); +const i18n = require('../lib/i18n/i18n.js'); + +const UIStrings = { + /** Title of a Lighthouse audit that provides detail on the theme color the web page has set for the browser's address bar. This descriptive title is shown to users when an address-bar theme color has been set. */ + title: 'Sets a theme color for the address bar.', + /** Title of a Lighthouse audit that provides detail on the theme color the web page has set for the browser's address bar. This descriptive title is shown to users when an address-bar theme color has not been set. */ + failureTitle: 'Does not set a theme color for the address bar.', + /** Description of a Lighthouse audit that tells the user why they should set a theme color for the browser's address bar. 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: 'The browser address bar can be themed to match your site. ' + + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/address-bar).', +}; + +const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings); /** * @fileoverview @@ -26,10 +39,9 @@ class ThemedOmnibox extends MultiCheckAudit { static get meta() { return { id: 'themed-omnibox', - title: 'Sets an address-bar theme color', - failureTitle: 'Does not set an address-bar theme color', - description: 'The browser address bar can be themed to match your site. ' + - '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/address-bar).', + title: str_(UIStrings.title), + failureTitle: str_(UIStrings.failureTitle), + description: str_(UIStrings.description), requiredArtifacts: ['WebAppManifest', 'MetaElements'], }; } @@ -48,6 +60,7 @@ class ThemedOmnibox extends MultiCheckAudit { */ static assessMetaThemecolor(themeColorMeta, failures) { if (!themeColorMeta) { + // TODO(#7238): i18n failures.push('No `` tag found'); } else if (!ThemedOmnibox.isValidColor(themeColorMeta.content || '')) { failures.push('The theme-color meta tag did not contain a valid CSS color'); @@ -93,3 +106,4 @@ class ThemedOmnibox extends MultiCheckAudit { } module.exports = ThemedOmnibox; +module.exports.UIStrings = UIStrings; diff --git a/lighthouse-core/audits/viewport.js b/lighthouse-core/audits/viewport.js index 000e53eca32c..6f67a0de1978 100644 --- a/lighthouse-core/audits/viewport.js +++ b/lighthouse-core/audits/viewport.js @@ -7,6 +7,22 @@ const Audit = require('./audit.js'); const ComputedViewportMeta = require('../computed/viewport-meta.js'); +const i18n = require('../lib/i18n/i18n.js'); + +const UIStrings = { + /** Title of a Lighthouse audit that provides detail on the viewport meta tag in a web page's html. This descriptive title is shown to users when a viewport tag is set and configured. */ + title: 'Has a `` tag with `width` or `initial-scale`', + /** Title of a Lighthouse audit that provides detail on the viewport meta tag in a web page's html. This descriptive title is shown to users when a viewport tag is not set or configured. */ + failureTitle: 'Does not have a `` tag with `width` ' + + 'or `initial-scale`', + /** Description of a Lighthouse audit that tells the user why they should have a viewport meta tag in their html. 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: 'Add a `` tag to optimize your app for mobile screens. ' + + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/has-viewport-meta-tag).', + /** Explanatory message stating that no viewport meta tag exists on the page. */ + explanationNoTag: 'No `` tag found', +}; + +const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings); class Viewport extends Audit { /** @@ -15,11 +31,9 @@ class Viewport extends Audit { static get meta() { return { id: 'viewport', - title: 'Has a `` tag with `width` or `initial-scale`', - failureTitle: 'Does not have a `` tag with `width` ' + - 'or `initial-scale`', - description: 'Add a viewport meta tag to optimize your app for mobile screens. ' + - '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/has-viewport-meta-tag).', + title: str_(UIStrings.title), + failureTitle: str_(UIStrings.failureTitle), + description: str_(UIStrings.description), requiredArtifacts: ['MetaElements'], }; } @@ -35,7 +49,7 @@ class Viewport extends Audit { if (!viewportMeta.hasViewportTag) { return { score: 0, - explanation: 'No viewport meta tag found', + explanation: str_(UIStrings.explanationNoTag), }; } @@ -47,3 +61,5 @@ class Viewport extends Audit { } module.exports = Viewport; +module.exports.UIStrings = UIStrings; + diff --git a/lighthouse-core/audits/without-javascript.js b/lighthouse-core/audits/without-javascript.js index acbcb51699de..7f93e95fa204 100644 --- a/lighthouse-core/audits/without-javascript.js +++ b/lighthouse-core/audits/without-javascript.js @@ -6,6 +6,22 @@ '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 web page's ability to return content with Javascript disabled in the browser. This descriptive title is shown to users when at least some content is shown when Javascript is not available. */ + title: 'Contains some content when JavaScript is not available', + /** Title of a Lighthouse audit that provides detail on the web page's ability to return content with Javascript disabled in the browser. This descriptive title is shown to users when no content is shown when Javascript is not available. */ + failureTitle: 'Does not provide fallback content when JavaScript is not available', + /** Description of a Lighthouse audit that tells the user why they should return content even if Javascript is unavailable in a browser. 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: 'Your app should display some content when JavaScript is disabled, even if ' + + 'it\'s just a warning to the user that JavaScript is required to use the app. ' + + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/no-js).', + /** Message explaining that a website's body should render some (any) content even if the page's JavaScript cannot be loaded. */ + explanation: 'The page body should render some content if its scripts are not available.', +}; + +const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings); class WithoutJavaScript extends Audit { /** @@ -14,11 +30,9 @@ class WithoutJavaScript extends Audit { static get meta() { return { id: 'without-javascript', - title: 'Contains some content when JavaScript is not available', - failureTitle: 'Does not provide fallback content when JavaScript is not available', - description: 'Your app should display some content when JavaScript is disabled, even if ' + - 'it\'s just a warning to the user that JavaScript is required to use the app. ' + - '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/no-js).', + title: str_(UIStrings.title), + failureTitle: str_(UIStrings.failureTitle), + description: str_(UIStrings.description), requiredArtifacts: ['HTMLWithoutJavaScript'], }; } @@ -34,7 +48,7 @@ class WithoutJavaScript extends Audit { if (artifact.bodyText.trim() === '' && !artifact.hasNoScript) { return { score: 0, - explanation: 'The page body should render some content if its scripts are not available.', + explanation: str_(UIStrings.explanation), }; } @@ -45,3 +59,4 @@ class WithoutJavaScript extends Audit { } module.exports = WithoutJavaScript; +module.exports.UIStrings = UIStrings; diff --git a/lighthouse-core/audits/works-offline.js b/lighthouse-core/audits/works-offline.js index 6d0f4446cff5..187b3486b49d 100644 --- a/lighthouse-core/audits/works-offline.js +++ b/lighthouse-core/audits/works-offline.js @@ -7,6 +7,28 @@ const URL = require('../lib/url-shim.js'); const Audit = require('./audit.js'); +const i18n = require('../lib/i18n/i18n.js'); + +const UIStrings = { + /** Title of a Lighthouse audit that provides detail on the offline responsiveness of a website. "200" refers to the HTTP status code when a site responds successfully. This descriptive title is shown to users when the site responds successfully even when offline. */ + title: 'Current page responds with a 200 when offline', + /** Title of a Lighthouse audit that provides detail on the offline responsiveness of a website. "200" refers to the HTTP status code when a site responds successfully. This descriptive title is shown to users when the site does not respond successfully when offline. */ + failureTitle: 'Current page 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: 'If you\'re building a Progressive Web App, consider using a service worker ' + + 'so that your app can work offline. ' + + '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/http-200-when-offline).', + /** + * @description Warning that the web page redirected during testing and that may have affected the offline load test. + * @example {https://example.com/requested/page} requested + * @example {https://example.com/final/resolved/page} final + * */ + warningNoLoad: 'The page may not be loading offline because your test URL ' + + `({requested}) was redirected to "{final}". ` + + 'Try testing the second URL directly.', +}; + +const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings); class WorksOffline extends Audit { /** @@ -15,11 +37,9 @@ class WorksOffline extends Audit { static get meta() { return { id: 'works-offline', - title: 'Current page responds with a 200 when offline', - failureTitle: 'Current page does not respond with a 200 when offline', - description: 'If you\'re building a Progressive Web App, consider using a service worker ' + - 'so that your app can work offline. ' + - '[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: ['Offline', 'URL'], }; } @@ -33,9 +53,8 @@ class WorksOffline extends Audit { const passed = artifacts.Offline === 200; if (!passed && !URL.equalWithExcludedFragments(artifacts.URL.requestedUrl, artifacts.URL.finalUrl)) { - warnings.push('You may be not loading offline because your test URL ' + - `(${artifacts.URL.requestedUrl}) was redirected to "${artifacts.URL.finalUrl}". ` + - 'Try testing the second URL directly.'); + warnings.push(str_(UIStrings.warningNoLoad, + {requested: artifacts.URL.requestedUrl, final: artifacts.URL.finalUrl})); } return { @@ -46,3 +65,4 @@ class WorksOffline extends Audit { } module.exports = WorksOffline; +module.exports.UIStrings = UIStrings; diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js index e772519784b4..2b761450d842 100644 --- a/lighthouse-core/config/default-config.js +++ b/lighthouse-core/config/default-config.js @@ -94,6 +94,15 @@ const UIStrings = { seoCrawlingGroupTitle: 'Crawling and Indexing', /* Description of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight ways to make a website accessible to search engine crawlers. */ seoCrawlingGroupDescription: 'To appear in search results, crawlers need access to your app.', + /** Title of the Progressive Web Application (PWA) category of audits. This is displayed at the top of a list of audits focused on topics related to whether or not a site is a progressive web app, e.g. responds offline, uses a service worker, is on https, etc. Also used as a label of a score gauge. */ + pwaCategoryTitle: 'Progressive Web App', + /** Description of the Progressive Web Application (PWA) category. This is displayed at the top of a list of audits focused on topics related to whether or not a site is a progressive web app, e.g. responds offline, uses a service worker, is on https, etc. No character length limits. 'Learn More' becomes link text to additional documentation. */ + pwaCategoryDescription: 'These checks validate the aspects of a Progressive Web App. ' + + '[Learn more](https://developers.google.com/web/progressive-web-apps/checklist).', + /** Description of the Progressive Web Application (PWA) manual checks category, containing a list of additional validators must be run by hand in order to check all PWA best practices. This is displayed at the top of a list of manually run audits focused on topics related to whether or not a site is a progressive web app, e.g. responds offline, uses a service worker, is on https, etc.. No character length limits. */ + pwaCategoryManualDescription: '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 of the Best Practices category of audits. This is displayed at the top of a list of audits focused on topics related to following web development best practices and accepted guidelines. Also used as a label of a score gauge; try to limit to 20 characters. */ bestPracticesCategoryTitle: 'Best Practices', /** 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. */ @@ -507,11 +516,9 @@ const defaultConfig = { ], }, 'pwa': { - title: 'Progressive Web App', - 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: str_(UIStrings.pwaCategoryTitle), + description: str_(UIStrings.pwaCategoryDescription), + manualDescription: str_(UIStrings.pwaCategoryManualDescription), auditRefs: [ // Fast and Reliable {id: 'load-fast-enough-for-pwa', weight: 7, group: 'pwa-fast-reliable'}, diff --git a/lighthouse-core/lib/i18n/locales/en-US.json b/lighthouse-core/lib/i18n/locales/en-US.json index cd8d17f1a0fc..3d1500ab690f 100644 --- a/lighthouse-core/lib/i18n/locales/en-US.json +++ b/lighthouse-core/lib/i18n/locales/en-US.json @@ -318,7 +318,7 @@ "message": "`