Explicitly request AMP document when fetching inner app shell component

In the original app shell implementation proposed in ampproject/amp-wp#1519
the is_amp_endpoint() function was modified in order to return true if
an inner component was requested.

In order to achieve the same effect without altering the original is_amp_endpoint()
implementation, we're explicitly asking for an AMP document when requesting
the inner component. Simply, an AMP slug is appended to a URL when fetching
a new page.

Author: delawski

assets/src/js/amp-wp-app-shell.js

@@ -140,24 +140,23 @@ function isHeaderVisible() {
  * @return {Promise<Response>} Response promise.
  */
 function fetchShadowDocResponse( url ) {
-	const { componentQueryVar } = ampAppShell;
+	const { ampSlug, componentQueryVar } = ampAppShell;
 	const componentUrl = new URL( url );
 	componentUrl.searchParams.set( componentQueryVar, 'inner' );
+	componentUrl.searchParams.set( ampSlug, 1 );
 
 	/**
 	 * Filters the inner component URL.
 	 *
 	 * This filter is useful in case a format of the inner component URL has to
 	 * be changed.
 	 *
-	 * @param {string} componentUrl      Inner component URL.
-	 * @param {string} url               Document base URL.
+	 * @param {URL}    componentUrl      Inner component URL.
 	 * @param {string} componentQueryVar Component query parameter name.
 	 */
 	const ampUrl = ampAppShell.hooks.applyFilters(
 		'amp.appShell.innerComponentUrl',
 		componentUrl,
-		url,
 		componentQueryVar
 	);
 

includes/class-amp-app-shell.php

@@ -118,6 +118,7 @@ function() use ( $requested_app_shell_component ) {
 						'contentElementId'  => self::CONTENT_ELEMENT_ID,
 						'homeUrl'           => home_url( '/' ),
 						'adminUrl'          => admin_url( '/' ),
+						'ampSlug'           => amp_get_slug(),
 						'componentQueryVar' => self::COMPONENT_QUERY_VAR,
 						'isOuterAppShell'   => 'outer' === $requested_app_shell_component,
 					];