Add ability to prime URL metrics

.github/workflows/js-lint.yml

@@ -45,7 +45,9 @@ jobs:
           node-version-file: '.nvmrc'
           cache: npm
       - name: npm install
-        run: npm ci
+        run: |
+          npm ci
+          npm ci --prefix plugins/optimization-detective/priming-cli
       - name: JS Lint
         run: npm run lint-js
       - name: TypeScript compile

plugins/optimization-detective/detect.js

@@ -65,6 +65,14 @@ const storageLockTimeSessionKey = 'odStorageLockTime';
  */
 const compressionDebounceWaitDuration = 1000;
 
+/**
+ * Verification token for skipping the storage lock check while priming URL Metrics.
+ *
+ * @see {detect}
+ * @type {?string}
+ */
+let odPrimeUrlMetricsVerificationToken = null;
+
 /**
  * Checks whether storage is locked.
  *
@@ -73,6 +81,10 @@ const compressionDebounceWaitDuration = 1000;
  * @return {boolean} Whether storage is locked.
  */
 function isStorageLocked( currentTime, storageLockTTL ) {
+	if ( odPrimeUrlMetricsVerificationToken ) {
+		return false;
+	}
+
 	if ( storageLockTTL === 0 ) {
 		return false;
 	}
@@ -503,6 +515,38 @@ function debounceCompressUrlMetric() {
 	}, compressionDebounceWaitDuration );
 }
 
+/**
+ * Notifies about the URL Metric request status.
+ *
+ * @param {Object}  status                  - The status details.
+ * @param {boolean} status.success          - Indicates if the request succeeded.
+ * @param {string}  [status.error]          - An error message if the request failed.
+ * @param {Object}  [options]               - Options for where to dispatch the message.
+ * @param {boolean} [options.toParent=true] - Whether to send the message to the parent window.
+ * @param {boolean} [options.toLocal=true]  - Whether to dispatch a custom event locally.
+ */
+function notifyStatus( status, options = { toParent: true, toLocal: true } ) {
+	const message = {
+		type: 'OD_PRIME_URL_METRICS_REQUEST_STATUS',
+		success: status.success,
+		...( status.error && { error: status.error } ),
+	};
+
+	// This will be used when URL metrics are primed using a IFRAME.
+	if ( options.toParent && window.parent && window.parent !== window ) {
+		window.parent.postMessage( message, '*' );
+	}
+
+	// This will be used when URL metrics are primed using Puppeteer script.
+	if ( options.toLocal ) {
+		document.dispatchEvent(
+			new CustomEvent( message.type, {
+				detail: { ...status },
+			} )
+		);
+	}
+}
+
 /**
  * @typedef {{timestamp: number, creationDate: Date}} UrlMetricDebugData
  * @typedef {{groups: Array<{url_metrics: Array<UrlMetricDebugData>}>}} CollectionDebugData
@@ -595,6 +639,34 @@ export default async function detect( {
 		return;
 	}
 
+	try {
+		if (
+			win.parent &&
+			win.location.origin === win.parent.location.origin
+		) {
+			/** @type {HTMLIFrameElement|null} */
+			const urlPrimeIframeElement = win.parent.document.querySelector(
+				'iframe#od-prime-url-metrics-iframe'
+			);
+			if (
+				urlPrimeIframeElement &&
+				urlPrimeIframeElement.dataset.odPrimeUrlMetricsVerificationToken
+			) {
+				odPrimeUrlMetricsVerificationToken =
+					urlPrimeIframeElement.dataset
+						.odPrimeUrlMetricsVerificationToken;
+			}
+		}
+	} catch ( e ) {
+		// Ignoring error caused possibly due to cross-origin iframe access.
+	}
+
+	// Only available when page is loaded by Puppeteer script.
+	if ( win.__odPrimeUrlMetricsVerificationToken ) {
+		odPrimeUrlMetricsVerificationToken =
+			win.__odPrimeUrlMetricsVerificationToken;
+	}
+
 	// Abort if the client already submitted a URL Metric for this URL and viewport group.
 	const alreadySubmittedSessionStorageKey =
 		await getAlreadySubmittedSessionStorageKey(
@@ -604,6 +676,7 @@ export default async function detect( {
 			logger
 		);
 	if (
+		! odPrimeUrlMetricsVerificationToken &&
 		null !== alreadySubmittedSessionStorageKey &&
 		alreadySubmittedSessionStorageKey in sessionStorage
 	) {
@@ -922,6 +995,10 @@ export default async function detect( {
 
 	// Wait for the page to be hidden.
 	await new Promise( ( resolve ) => {
+		if ( odPrimeUrlMetricsVerificationToken ) {
+			resolve();
+		}
+
 		win.addEventListener( 'pagehide', resolve, { once: true } );
 		win.addEventListener( 'pageswap', resolve, { once: true } );
 		doc.addEventListener(
@@ -1092,6 +1169,12 @@ export default async function detect( {
 		);
 	}
 	url.searchParams.set( 'hmac', urlMetricHMAC );
+	if ( odPrimeUrlMetricsVerificationToken ) {
+		url.searchParams.set(
+			'prime_url_metrics_verification_token',
+			odPrimeUrlMetricsVerificationToken
+		);
+	}
 
 	const headers = {
 		'Content-Type': 'application/json',
@@ -1104,7 +1187,22 @@ export default async function detect( {
 		method: 'POST',
 		body: payloadBlob,
 		headers,
-		keepalive: true, // This makes fetch() behave the same as navigator.sendBeacon().
+		keepalive: odPrimeUrlMetricsVerificationToken ? false : true, // Setting keepalive to true makes fetch() behave the same as navigator.sendBeacon().
 	} );
-	await fetch( request );
+
+	if ( ! odPrimeUrlMetricsVerificationToken ) {
+		await fetch( request );
+	} else {
+		try {
+			const response = await fetch( request );
+			if ( ! response.ok ) {
+				throw new Error(
+					`Failed to send URL Metric. Status: ${ response.status }`
+				);
+			}
+			notifyStatus( { success: true } );
+		} catch ( err ) {
+			notifyStatus( { success: false, error: err.message } );
+		}
+	}
 }

plugins/optimization-detective/detection.php

@@ -236,6 +236,31 @@ function_exists( 'gzdecode' ) &&
 	return $result;
 }
 
+/**
+ * Registers the REST API endpoint for priming URL Metrics.
+ *
+ * @since n.e.x.t
+ * @access private
+ */
+function od_register_rest_url_metric_priming_endpoint(): void {
+	$endpoint_controller = new OD_REST_URL_Metrics_Priming_Endpoint();
+	register_rest_route(
+		OD_REST_URL_Metrics_Store_Endpoint::ROUTE_NAMESPACE,
+		$endpoint_controller::PRIME_URLS_ROUTE,
+		$endpoint_controller->get_registration_args_prime_urls()
+	);
+	register_rest_route(
+		OD_REST_URL_Metrics_Store_Endpoint::ROUTE_NAMESPACE,
+		$endpoint_controller::PRIME_URLS_BREAKPOINTS_ROUTE,
+		$endpoint_controller->get_registration_args_prime_urls_breakpoints()
+	);
+	register_rest_route(
+		OD_REST_URL_Metrics_Store_Endpoint::ROUTE_NAMESPACE,
+		$endpoint_controller::PRIME_URLS_VERIFICATION_TOKEN_ROUTE,
+		$endpoint_controller->get_registration_args_prime_urls_verification_token()
+	);
+}
+
 /**
  * Triggers post update actions for page caches to invalidate their caches related to the supplied cache purge post ID.
  *