core: warning banner for PWA category deprecation

core/test/fixtures/user-flows/reports/sample-flow-result.json

@@ -7117,6 +7117,7 @@
             "opportunityResourceColumnLabel": "Opportunity",
             "opportunitySavingsColumnLabel": "Estimated Savings",
             "passedAuditsGroupTitle": "Passed audits",
+            "pwaRemovalMessage": "Alongside [Chrome’s updated Installability Criteria](https://developer.chrome.com/blog/update-install-criteria), Lighthouse will be deprecating the PWA category in Lighthouse version 12.0. For recommended PWA testing, refer to the following [documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/).",
             "runtimeAnalysisWindow": "Initial page load",
             "runtimeAnalysisWindowSnapshot": "Point-in-time snapshot",
             "runtimeAnalysisWindowTimespan": "User interactions timespan",
@@ -12197,6 +12198,7 @@
             "opportunityResourceColumnLabel": "Opportunity",
             "opportunitySavingsColumnLabel": "Estimated Savings",
             "passedAuditsGroupTitle": "Passed audits",
+            "pwaRemovalMessage": "Alongside [Chrome’s updated Installability Criteria](https://developer.chrome.com/blog/update-install-criteria), Lighthouse will be deprecating the PWA category in Lighthouse version 12.0. For recommended PWA testing, refer to the following [documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/).",
             "runtimeAnalysisWindow": "Initial page load",
             "runtimeAnalysisWindowSnapshot": "Point-in-time snapshot",
             "runtimeAnalysisWindowTimespan": "User interactions timespan",
@@ -17256,6 +17258,7 @@
             "opportunityResourceColumnLabel": "Opportunity",
             "opportunitySavingsColumnLabel": "Estimated Savings",
             "passedAuditsGroupTitle": "Passed audits",
+            "pwaRemovalMessage": "Alongside [Chrome’s updated Installability Criteria](https://developer.chrome.com/blog/update-install-criteria), Lighthouse will be deprecating the PWA category in Lighthouse version 12.0. For recommended PWA testing, refer to the following [documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/).",
             "runtimeAnalysisWindow": "Initial page load",
             "runtimeAnalysisWindowSnapshot": "Point-in-time snapshot",
             "runtimeAnalysisWindowTimespan": "User interactions timespan",
@@ -25208,6 +25211,7 @@
             "opportunityResourceColumnLabel": "Opportunity",
             "opportunitySavingsColumnLabel": "Estimated Savings",
             "passedAuditsGroupTitle": "Passed audits",
+            "pwaRemovalMessage": "Alongside [Chrome’s updated Installability Criteria](https://developer.chrome.com/blog/update-install-criteria), Lighthouse will be deprecating the PWA category in Lighthouse version 12.0. For recommended PWA testing, refer to the following [documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/).",
             "runtimeAnalysisWindow": "Initial page load",
             "runtimeAnalysisWindowSnapshot": "Point-in-time snapshot",
             "runtimeAnalysisWindowTimespan": "User interactions timespan",

core/test/results/sample_v2.json

@@ -9467,6 +9467,7 @@
       "opportunityResourceColumnLabel": "Opportunity",
       "opportunitySavingsColumnLabel": "Estimated Savings",
       "passedAuditsGroupTitle": "Passed audits",
+      "pwaRemovalMessage": "Alongside [Chrome’s updated Installability Criteria](https://developer.chrome.com/blog/update-install-criteria), Lighthouse will be deprecating the PWA category in Lighthouse version 12.0. For recommended PWA testing, refer to the following [documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/).",
       "runtimeAnalysisWindow": "Initial page load",
       "runtimeAnalysisWindowSnapshot": "Point-in-time snapshot",
       "runtimeAnalysisWindowTimespan": "User interactions timespan",

proto/lighthouse-result.proto

@@ -668,6 +668,9 @@ message I18n {
 
     // Descriptive label that this analysis considers a snapshot of the page at a single point in time
     string runtime_analysis_window_snapshot = 66;
+
+    // Message for PWA deprecation.
+    string pwa_removal_message = 67;
   }
 
   // The message holding all formatted strings used in the renderer.

report/renderer/pwa-category-renderer.js

@@ -17,6 +17,12 @@ export class PwaCategoryRenderer extends CategoryRenderer {
   render(category, groupDefinitions = {}) {
     const categoryElem = this.dom.createElement('div', 'lh-category');
     categoryElem.id = category.id;
+    // Deprecation warning banner.
+    const pwaMessageContainer = this.dom.createComponent('warningsToplevel');
+    const pwaMessageEl = this.dom.find('.lh-warnings__msg', pwaMessageContainer);
+    pwaMessageEl.append(this.dom.convertMarkdownLinkSnippets(Globals.strings.pwaRemovalMessage));
+
+    categoryElem.append(pwaMessageContainer);
     categoryElem.append(this.renderCategoryHeader(category, groupDefinitions));
 
     const auditRefs = category.auditRefs;

report/renderer/report-renderer.js

@@ -284,6 +284,7 @@ export class ReportRenderer {
 
     const reportContainer = this._dom.createElement('div', 'lh-container');
     const reportSection = this._dom.createElement('div', 'lh-report');
+
     reportSection.append(this._renderReportWarnings(report));
 
     let scoreHeader;

report/renderer/report-utils.js

@@ -476,6 +476,9 @@ const UIStrings = {
   openInANewTabTooltip: 'Open in a new tab',
   /** Generic category name for all resources that could not be attributed to a 1st or 3rd party entity. */
   unattributable: 'Unattributable',
+
+  /** Message communicating the removal of the PWA category. */
+  pwaRemovalMessage: 'Alongside [Chrome’s updated Installability Criteria](https://developer.chrome.com/blog/update-install-criteria), Lighthouse will be deprecating the PWA category in Lighthouse version 12.0. For recommended PWA testing, refer to the following [documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/).',
 };
 
 export {

report/test/renderer/report-renderer-test.js

@@ -188,7 +188,10 @@ describe('ReportRenderer', () => {
       const warningResults = Object.assign({}, sampleResults, {runWarnings: []});
       const container = renderer._dom.document().body;
       const output = renderer.renderReport(warningResults, container);
-      assert.strictEqual(output.querySelector('.lh-warnings--toplevel'), null);
+      const warningEls = output.querySelectorAll('.lh-warnings--toplevel');
+      // PWA deprecation warning.
+      expect(warningEls).toHaveLength(1);
+      expect(warningEls[0].textContent).toContain('deprecating the PWA category');
     });
 
     it('renders a warning section', () => {