Add support for app shell navigation via AMP Shadow DOM.

This is a WordPress plugin which you can activate to see the app shell navigation in action. It extends the functionality of the AMP plugin.

Tha app shell navigation based on AMP Shadow DOM is an experimental feature initially proposed in ampproject/amp-wp#1519.

In order for the plugin to work, you will have to install the AMP and PWA plugins.

Note that you will also have to run composer install && npm install && npm run build prior to activating the plugin.

For a theme to support app shell via the AMP plugin, the bare minimum that needs to be done is:

1. Activate on AMP and PWA plugins.
2. Ensure your theme (and plugins) work entirely in the AMP plugin's Transitional mode. You must use Transitional mode as opposed to Standard mode for now. Make sure that you have “Serve all templates as AMP regardless of what is being queried” enabled.
3. Identify the element that contains the markup that changes as you navigate from page to page and wrap it with two function calls to indicate where the app shell container is:

<?php amp_start_app_shell_content(); ?>
    <?php get_template_part( 'content' ); ?>
<?php amp_end_app_shell_content(); ?>

4. Opt-in to AMP theme support for app shell by adding the following to your functions.php:

add_theme_support( 'amp_app_shell' );

5. Ensure the theme uses the Transitional mode, i.e.:

add_theme_support( 'amp', array(
    'paired' => true,
) );

6. You should define an offline.php template in your theme.

For theme which adds support for AMP app shell see https://github.com/xwp/twentyseventeen-westonson. Note that this theme copies some code from the Twenty Seventeen parent theme in order to add make the necessary modifications. For example, the js/global.js file modified as per this diff. The theme has app shell behind a theme mod flag, so make sure you do wp theme mod set service_worker_navigation amp_app_shell via WP-CLI. See also how it adds skeleton content to the app shell. See also plugin to enable stale-while-revalidate caching strategy for navigation requests.

This was presented at CDS 2018; see related portion of talk.

See also this short screen cast: https://youtu.be/oAiIbhHdoXM

For some more background on this, see GoogleChromeLabs/pwa-wp#12 (comment)