Add support for app shell navigation via AMP Shadow DOM

Gruntfile.js

@@ -47,7 +47,13 @@ module.exports = function( grunt ) {
 		// Clean up the build.
 		clean: {
 			compiled: {
-				src: [ 'assets/js/*.js', '!assets/js/amp-service-worker-runtime-precaching.js', 'assets/js/*.asset.php' ],
+				src: [
+					'assets/js/*.js',
+					'!assets/js/amp-service-worker-runtime-precaching.js',
+					'!assets/js/amp-service-worker-offline-commenting.js',
+					'!assets/js/amp-wp-app-shell.js',
+					'assets/js/*.asset.php',
+				],
 			},
 			build: {
 				src: [ 'build' ],

amp.php

@@ -359,7 +359,12 @@ function amp_init() {
 	 */
 	do_action( 'amp_init' );
 
+	global $amp_service_worker;
+	$amp_service_worker = new AMP_Service_Worker();
+	$amp_service_worker->init();
+
 	add_filter( 'allowed_redirect_hosts', array( 'AMP_HTTP', 'filter_allowed_redirect_hosts' ) );
+	add_filter( 'wp_redirect', array( 'AMP_HTTP', 'add_purged_query_vars' ) );
 	AMP_HTTP::purge_amp_query_vars();
 	AMP_HTTP::send_cors_headers();
 	AMP_HTTP::handle_xhr_request();
@@ -562,6 +567,7 @@ function _amp_bootstrap_customizer() {
  * Redirects the old AMP URL to the new AMP URL.
  *
  * If post slug is updated the amp page with old post slug will be redirected to the updated url.
+ * Also includes all original query vars.
  *
  * @since 0.5
  *

assets/js/amp-service-worker-offline-commenting.js

@@ -0,0 +1,47 @@
+/* global ERROR_MESSAGES, SITE_URL */
+{
+	const queue = new wp.serviceWorker.backgroundSync.Queue( 'amp-wpPendingComments' );
+	const errorMessages = ERROR_MESSAGES;
+
+	const commentHandler = ( { event } ) => {
+		const clonedRequest = event.request.clone();
+		return fetch( event.request ).catch( () => {
+			return clonedRequest.blob().then( ( body ) => {
+				const queuedRequest = new Request( event.request.url, {
+					method: event.request.method,
+					headers: event.request.headers,
+					mode: event.request.mode,
+					credentials: event.request.credentials,
+					referrer: event.request.referrer,
+					redirect: 'follow',
+					body: body
+				} );
+
+				// Add request to queue.
+				queue.pushRequest( {
+					request: queuedRequest
+				} );
+
+				const jsonBody = JSON.stringify( { message: errorMessages.comment } );
+				return new Response( jsonBody, {
+					status: 202,
+					statusText: 'Accepted',
+					headers: {
+						'Access-Control-Allow-Origin': SITE_URL,
+						'Access-Control-Allow-Credentials': 'true',
+						'Content-Type': 'application/json; charset=UTF-8',
+						'Access-Control-Expose-Headers': 'AMP-Access-Control-Allow-Source-Origin',
+						'AMP-Access-Control-Allow-Source-Origin': SITE_URL,
+						'Cache-Control': 'no-cache, must-revalidate, max-age=0'
+					}
+				} );
+			} );
+		} );
+	};
+
+	wp.serviceWorker.routing.registerRoute(
+		/\/wp-comments-post\.php\?.*_wp_amp_action_xhr_converted.*/,
+		commentHandler,
+		'POST'
+	);
+}

assets/js/amp-service-worker-runtime-precaching.js

@@ -1,9 +1,10 @@
-/* global self, caches, URLS */
+/* global URLS, self, caches */
 // See AMP_Service_Workers::add_amp_runtime_caching() and <https://github.com/ampproject/amp-by-example/blob/a4d798cac6a534e0c46e78944a2718a8dab3c057/boilerplate-generator/templates/files/serviceworkerJs.js#L9-L22>.
 {
 	self.addEventListener( 'install', ( event ) => {
 		event.waitUntil(
-			caches.open( wp.serviceWorker.core.cacheNames.runtime ).then( ( cache ) => cache.addAll( URLS ) ),
+			caches.open( wp.serviceWorker.core.cacheNames.runtime )
+				.then( ( cache ) => cache.addAll( URLS ) ),
 		);
 	} );
 }