Enqueue amp-shadow and amp-wp-app-shell script in non-inner requests

Author: westonruter

.eslintrc

@@ -16,7 +16,8 @@
 		"react"
 	],
 	"env": {
-		"browser": true
+		"browser": true,
+		"es6": true
 	},
 	"globals": {
 		"wp": true,

assets/js/amp-app-shell.js renamed to assets/js/amp-wp-app-shell.js

@@ -1,4 +1,4 @@
-/* global CONTENT_ELEMENT_ID, Promise */
+/* global ampWpAppShell */
 /* eslint-disable no-console */
 
 ( window.AMP = window.AMP || [] ).push( ( AMP ) => {
@@ -25,7 +25,7 @@
 
 	if ( parseInt( currentUrl.searchParams.get( 'amp_shadow_doc_populate' ) ) ) {
 		currentUrl.searchParams.set( 'amp_app_shell_component', 'inner' );
-		const container = document.getElementById( CONTENT_ELEMENT_ID );
+		const container = document.getElementById( ampWpAppShell.contentElementId );
 
 		fetchDocument( currentUrl ).then( ( doc ) => {
 			const shadowDoc = AMP.attachShadowDoc( container, doc, currentUrl );

includes/amp-helper-functions.php

@@ -358,6 +358,18 @@ function amp_register_default_scripts( $wp_scripts ) {
 		'async' => true,
 	) );
 
+	// App shell library.
+	$handle = 'amp-wp-app-shell';
+	$wp_scripts->add(
+		$handle,
+		amp_get_asset_url( 'js/amp-wp-app-shell.js' ),
+		array( 'amp-shadow' ),
+		null
+	);
+	$wp_scripts->add_data( $handle, 'amp_script_attributes', array(
+		'async' => true,
+	) );
+
 	// Get all AMP components as defined in the spec.
 	$extensions = array();
 	foreach ( AMP_Allowed_Tags_Generated::get_allowed_tag( 'script' ) as $script_spec ) {

includes/class-amp-theme-support.php

@@ -284,35 +284,30 @@ public static function init_app_shell() {
 
 		$requested_app_shell_component = self::get_requested_app_shell_component();
 
-		if ( ! is_amp_endpoint() ) {
-
-			if ( 'outer' === $requested_app_shell_component ) {
-				wp_enqueue_script( 'amp-shadow' );
-				// @todo Enqueue script which hooks uses AMP Shadow API (assets/js/amp-app-shell.js).
-				// @todo Prevent showing admin bar?
-				// @todo For non-outer
-			} elseif ( 'inner' === $requested_app_shell_component ) {
-				wp_die(
-					esc_html__( 'Inner app shell can only be requested of the AMP version (thus requires paired mode).', 'amp' ),
-					esc_html__( 'AMP Inner App Shell Problem', 'amp' ),
-					array( 'response' => 400 )
-				);
-			}
+		// @todo Prevent showing admin bar in outer app shell?
+		if ( ! is_amp_endpoint() && 'inner' === $requested_app_shell_component ) {
+			// @todo For non-outer
+			wp_die(
+				esc_html__( 'Inner app shell can only be requested of the AMP version (thus requires paired mode).', 'amp' ),
+				esc_html__( 'AMP Inner App Shell Problem', 'amp' ),
+				array( 'response' => 400 )
+			);
+		} elseif ( is_amp_endpoint() && 'outer' === $requested_app_shell_component ) {
+			wp_die(
+				esc_html__( 'Outer app shell can only be requested of the non-AMP version (thus requires paired mode).', 'amp' ),
+				esc_html__( 'AMP Outer App Shell Problem', 'amp' ),
+				array( 'response' => 400 )
+			);
+		}
 
-			// @todo Is this right? It should really be enqueued regardless. It's not about whether the current template has AMP available, but _other_ URLs.
-			$template_availability = self::get_template_availability();
-			if ( ! empty( $template_availability['supported'] ) ) {
-				wp_enqueue_script( 'amp-shadow' );
-				// @todo Enqueue other required scripts.
-			}
-		} else {
-			if ( 'outer' === $requested_app_shell_component ) {
-				wp_die(
-					esc_html__( 'Outer app shell can only be requested of the non-AMP version (thus requires paired mode).', 'amp' ),
-					esc_html__( 'AMP Outer App Shell Problem', 'amp' ),
-					array( 'response' => 400 )
-				);
-			}
+		// Enqueue scripts for (outer) app shell, including precached app shell and normal site navigation prior to service worker installation.
+		if ( 'inner' !== $requested_app_shell_component ) {
+			wp_enqueue_script( 'amp-shadow' );
+			wp_enqueue_script( 'amp-wp-app-shell' );
+			$exports = array(
+				'contentElementId' => self::APP_SHELL_CONTENT_ELEMENT_ID,
+			);
+			wp_add_inline_script( 'amp-wp-app-shell', sprintf( 'var ampWpAppShell = %s;', wp_json_encode( $exports ) ), 'before' );
 		}
 	}