core: warning banner for PWA category deprecation (#15741)

Co-authored-by: Adam Raine <6752989+adamraine@users.noreply.github.com>

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 a future release. Please refer to the [updated PWA documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/) for future PWA testing.",
             "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 a future release. Please refer to the [updated PWA documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/) for future PWA testing.",
             "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 a future release. Please refer to the [updated PWA documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/) for future PWA testing.",
             "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 a future release. Please refer to the [updated PWA documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/) for future PWA testing.",
             "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 a future release. Please refer to the [updated PWA documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/) for future PWA testing.",
       "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-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 a future release. Please refer to the [updated PWA documentation](https://developer.chrome.com/docs/devtools/progressive-web-apps/) for future PWA testing.',
 };
 
 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', () => {