{"id":20406762,"url":"https://github.com/xwp/amp-app-shell","last_synced_at":"2025-10-09T12:13:06.301Z","repository":{"id":55885364,"uuid":"285264155","full_name":"xwp/amp-app-shell","owner":"xwp","description":"Support for app shell navigation via AMP Shadow DOM.","archived":false,"fork":false,"pushed_at":"2020-12-09T14:36:37.000Z","size":1068,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":7,"default_branch":"develop","last_synced_at":"2025-01-15T12:16:50.032Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xwp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-05T11:08:48.000Z","updated_at":"2021-03-21T13:39:25.000Z","dependencies_parsed_at":"2022-08-15T08:40:14.971Z","dependency_job_id":null,"html_url":"https://github.com/xwp/amp-app-shell","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwp%2Famp-app-shell","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwp%2Famp-app-shell/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwp%2Famp-app-shell/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xwp%2Famp-app-shell/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xwp","download_url":"https://codeload.github.com/xwp/amp-app-shell/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241950933,"owners_count":20047725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T05:19:10.339Z","updated_at":"2025-10-09T12:13:01.256Z","avatar_url":"https://github.com/xwp.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AMP App Shell for WordPress\n\nAdd support for app shell navigation via AMP Shadow DOM.\n\nThis is a WordPress plugin which you can activate to see the app shell navigation\nin action. It extends the functionality of the [AMP plugin](https://wordpress.org/plugins/amp/).\n\nTha app shell navigation based on AMP Shadow DOM is an experimental feature initially\nproposed in [ampproject/amp-wp#1519](https://github.com/ampproject/amp-wp/pull/1519).\n\nIn order for the plugin to work, you will have to install the\n[AMP](https://wordpress.org/plugins/amp/) and [PWA](https://wordpress.org/plugins/pwa/) plugins.\n\nNote that you will also have to run `composer install \u0026\u0026 npm install \u0026\u0026 npm run build`\nprior to activating the plugin.\n\n## How To Use\n\nFor a theme to support app shell via the AMP plugin, the bare minimum that needs to be done is:\n\n1. Activate on [AMP](https://wordpress.org/plugins/amp/) and [PWA](https://wordpress.org/plugins/pwa/) plugins.\n2. Ensure your theme (and plugins) work entirely in the AMP plugin's [Transitional mode](https://amp-wp.org/documentation/how-the-plugin-works/amp-plugin-serving-strategies/). 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.\n3. 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:\n```php\n\u003c?php amp_start_app_shell_content(); ?\u003e\n    \u003c?php get_template_part( 'content' ); ?\u003e\n\u003c?php amp_end_app_shell_content(); ?\u003e\n```\n4. Opt-in to AMP theme support for app shell by adding the following to your `functions.php`:\n```php\nadd_theme_support( 'amp_app_shell' );\n```\n5. Ensure the theme uses the Transitional mode, i.e.:\n```php\nadd_theme_support( 'amp', array(\n    'paired' =\u003e true,\n) );\n```\n6. You should define an `offline.php` template in your theme.\n\nFor 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](https://gist.github.com/westonruter/b9d7952c0879ea3cda9e0081e387846d). 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](https://github.com/xwp/twentyseventeen-westonson/blob/03934b7328f9b18dd979ae97458ad38feb6f0e1a/functions.php#L241-L283) to the app shell. See also plugin to [enable stale-while-revalidate caching strategy for navigation requests](https://gist.github.com/westonruter/f848013108672568be6dcde153f9ca37).\n\nThis was presented at CDS 2018; see [related portion of talk](https://youtu.be/s1WrBaAyzAI?t=940).\n\nSee also this short screen cast: https://youtu.be/oAiIbhHdoXM\n\nFor some more background on this, see [GoogleChromeLabs/pwa-wp#12 (comment)](https://github.com/GoogleChromeLabs/pwa-wp/issues/12#issuecomment-401843173)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxwp%2Famp-app-shell","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxwp%2Famp-app-shell","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxwp%2Famp-app-shell/lists"}