Support 'discarded' as a navigationType

README.md

@@ -697,10 +697,13 @@ interface Metric {
    * The type of navigation
    *
    * Navigation Timing API (or `undefined` if the browser doesn't
-   * support that API). For pages that are restored from the bfcache, this
-   * value will be 'back-forward-cache'.
+   * support that API).
+   * For pages that are restored from the bfcache, this value will
+   * be 'back-forward-cache'.
+   * For pages that are restored after being discarded, this value will
+   * be 'discarded'.
    */
-  navigationType:  'navigate' | 'reload' | 'back-forward' | 'back-forward-cache' | 'prerender';
+  navigationType:  'navigate' | 'reload' | 'back-forward' | 'back-forward-cache' | 'prerender' | 'discarded';
 }
 ```
 

src/lib/initMetric.ts

@@ -30,6 +30,8 @@ export const initMetric = (name: Metric['name'], value?: number): Metric => {
   } else if (navEntry) {
     if (document.prerendering || getActivationStart() > 0) {
       navigationType = 'prerender';
+    } else if (document.wasDiscarded) {
+      navigationType = 'discarded';
     } else {
       navigationType =
           navEntry.type.replace(/_/g, '-') as Metric['navigationType'];

src/types/base.ts

@@ -65,7 +65,7 @@ export interface Metric {
    * support that API). For pages that are restored from the bfcache, this
    * value will be 'back-forward-cache'.
    */
-  navigationType:  'navigate' | 'reload' | 'back-forward' | 'back-forward-cache' | 'prerender';
+  navigationType:  'navigate' | 'reload' | 'back-forward' | 'back-forward-cache' | 'prerender' | 'discarded';
 }
 
 /**
@@ -105,3 +105,12 @@ export interface ReportOpts {
  *   loading. This is equivalent to the corresponding `readyState` value.
  */
 export type LoadState = 'loading' | 'dom-interactive' | 'dom-content-loaded' | 'complete';
+
+/**
+ * Extend the document with the new wasDiscarded boolean which is not supported
+ * in typescript yet
+ * https://github.com/WICG/page-lifecycle/blob/main/README.md
+ */ 
+declare global {
+  interface Document { wasDiscarded?: boolean; }
+}

test/e2e/onCLS-test.js

@@ -632,6 +632,27 @@ describe('onCLS()', async function() {
     assert.strictEqual(cls.navigationType, 'back-forward-cache');
   });
 
+  it('reports discarded as nav type for wasDiscarded', async function() {
+    if (!browserSupportsCLS) this.skip();
+
+    await browser.url('/test/cls?wasDiscarded=1');
+
+    // Wait until all images are loaded and rendered, then change to hidden.
+    await imagesPainted();
+    await stubVisibilityChange('hidden');
+
+    await beaconCountIs(1);
+    const [cls] = await getBeacons();
+
+    assert(cls.value >= 0);
+    assert(cls.id.match(/^v3-\d+-\d+$/));
+    assert.strictEqual(cls.name, 'CLS');
+    assert.strictEqual(cls.value, cls.delta);
+    assert.strictEqual(cls.rating, 'good');
+    assert.strictEqual(cls.entries.length, 2);
+    assert.strictEqual(cls.navigationType, 'discarded');
+  });
+
   describe('attribution', function() {
     it('includes attribution data on the metric object', async function() {
       if (!browserSupportsCLS) this.skip();

test/e2e/onFCP-test.js

@@ -235,6 +235,23 @@ describe('onFCP()', async function() {
     assert.strictEqual(fcp2.navigationType, 'back-forward-cache');
   });
 
+  it('reports discarded as nav type for wasDiscarded', async function() {
+    if (!browserSupportsFCP) this.skip();
+
+    await browser.url('/test/fcp?wasDiscarded=1');
+
+    await beaconCountIs(1);
+
+    const [fcp] = await getBeacons();
+    assert(fcp.value >= 0);
+    assert(fcp.id.match(/^v3-\d+-\d+$/));
+    assert.strictEqual(fcp.name, 'FCP');
+    assert.strictEqual(fcp.value, fcp.delta);
+    assert.strictEqual(fcp.rating, 'good');
+    assert.strictEqual(fcp.entries.length, 1);
+    assert.strictEqual(fcp.navigationType, 'discarded');
+  });
+
   describe('attribution', function() {
     it('includes attribution data on the metric object', async function() {
       if (!browserSupportsFCP) this.skip();

test/e2e/onFID-test.js

@@ -194,6 +194,28 @@ describe('onFID()', async function() {
     assert.match(fid2.entries[0].name, /(mouse|pointer)down/);
   });
 
+  it('reports discarded as nav type for wasDiscarded', async function() {
+    if (!browserSupportsFID) this.skip();
+
+    await browser.url('/test/fid?wasDiscarded=1');
+
+    // Click on the <h1>.
+    const h1 = await $('h1');
+    await h1.click();
+
+    await beaconCountIs(1);
+
+    const [fid] = await getBeacons();
+    assert(fid.value >= 0);
+    assert(fid.id.match(/^v3-\d+-\d+$/));
+    assert.strictEqual(fid.name, 'FID');
+    assert.strictEqual(fid.value, fid.delta);
+    assert.strictEqual(fid.rating, 'good');
+    assert.strictEqual(fid.navigationType, 'discarded');
+    assert.match(fid.entries[0].name, /(mouse|pointer)down/);
+  });
+
+
   describe('attribution', function() {
     it('includes attribution data on the metric object', async function() {
       if (!browserSupportsFID) this.skip();

test/e2e/onINP-test.js

@@ -316,6 +316,30 @@ describe('onINP()', async function() {
     assert.strictEqual(beacons.length, 0);
   });
 
+  it('reports discarded as nav type for wasDiscarded', async function() {
+    if (!browserSupportsINP) this.skip();
+
+    await browser.url('/test/inp?click=100&wasDiscarded=1');
+
+    const h1 = await $('h1');
+    await h1.click();
+
+    await stubVisibilityChange('hidden');
+
+    await beaconCountIs(1);
+
+    const [inp] = await getBeacons();
+    assert(inp.value >= 0);
+    assert(inp.id.match(/^v3-\d+-\d+$/));
+    assert.strictEqual(inp.name, 'INP');
+    assert.strictEqual(inp.value, inp.delta);
+    assert.strictEqual(inp.rating, 'good');
+    assert(containsEntry(inp.entries, 'click', 'h1'));
+    assert(interactionIDsMatch(inp.entries));
+    assert(inp.entries[0].interactionId > 0);
+    assert.strictEqual(inp.navigationType, 'discarded');
+  });
+
   describe('attribution', function() {
     it('includes attribution data on the metric object', async function() {
       if (!browserSupportsINP) this.skip();

test/e2e/onLCP-test.js

@@ -373,6 +373,30 @@ describe('onLCP()', async function() {
     assert.strictEqual(lcp2.navigationType, 'back-forward-cache');
   });
 
+  it('reports discarded as nav type for wasDiscarded', async function() {
+    if (!browserSupportsLCP) this.skip();
+
+    await browser.url('/test/lcp?wasDiscarded=1');
+
+    // Wait until all images are loaded and fully rendered.
+    await imagesPainted();
+
+    // Load a new page to trigger the hidden state.
+    await browser.url('about:blank');
+
+    await beaconCountIs(1);
+
+    const [lcp] = await getBeacons();
+
+    assert(lcp.value > 0); // Greater than the image load delay.
+    assert(lcp.id.match(/^v3-\d+-\d+$/));
+    assert.strictEqual(lcp.name, 'LCP');
+    assert.strictEqual(lcp.value, lcp.delta);
+    assert.strictEqual(lcp.rating, 'good');
+    assert.strictEqual(lcp.entries.length, 1);
+    assert.strictEqual(lcp.navigationType, 'discarded');
+  });
+
   describe('attribution', function() {
     it('includes attribution data on the metric object', async function() {
       if (!browserSupportsLCP) this.skip();

test/e2e/onTTFB-test.js

@@ -209,6 +209,24 @@ describe('onTTFB()', async function() {
     }
   });
 
+  it('reports discarded as nav type for wasDiscarded', async function() {
+    await browser.url('/test/ttfb?wasDiscarded=1');
+
+    const ttfb = await getTTFBBeacon();
+
+    assert(ttfb.value >= 0);
+    assert(ttfb.value >= ttfb.entries[0].requestStart);
+    assert(ttfb.value <= ttfb.entries[0].loadEventEnd);
+    assert(ttfb.id.match(/^v3-\d+-\d+$/));
+    assert.strictEqual(ttfb.name, 'TTFB');
+    assert.strictEqual(ttfb.value, ttfb.delta);
+    assert.strictEqual(ttfb.rating, 'good');
+    assert.strictEqual(ttfb.navigationType, 'discarded');
+    assert.strictEqual(ttfb.entries.length, 1);
+
+    assertValidEntry(ttfb.entries[0]);
+  });
+
   describe('attribution', function() {
     it('includes attribution data on the metric object', async function() {
       await browser.url('/test/ttfb?attribution=1');

test/views/layout.njk

@@ -100,6 +100,22 @@
         });
       }
 
+      /**
+       * @return {Promise<void>}
+       */
+      self.__stubWasDiscarded = () => {
+        return new Promise((resolve) => {
+          const navEntry = performance.getEntriesByType('navigation')[0];
+          // Only stub if the page isn't actually discarded.
+          if (!document.wasDiscarded) {
+            Object.defineProperty(document, 'wasDiscarded', {
+              value: true,
+              configurable: true,
+            });
+          }
+        });
+      }
+
       // Uncomment to stub running in a browser that doesn't support performance APIs
       // (e.g. some version of Opera support this).
       // delete self.performance;
@@ -131,6 +147,10 @@
       if (params.has('prerender')) {
         self.__stubPrerender();
       }
+
+      if (params.has('wasDiscarded')) {
+        self.__stubWasDiscarded();
+      }
     }());
   </script>
   {% if polyfill %}