AMP to PWA for Gatsby
What’s AMP to PWA
It’s also known as Preload your Progressive Web App from your AMP pages.
A good strategy is to make the entry point into your site an AMP page, then warm up the PWA behind the scenes and switch to it for the onward journey:
For more detail plz check AMP official article.
Goal of this article
I’ll explain how to implement it for blog using Gatsby.
Table of Contents
- Prepare Blog
- Change article path
- Prepare AMP generation
- Add Service Worker installer in AMP for Non-AMP page
- Add AMP validation in Test (optional)
$ npm install -g gatsby-cli $ gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog $ cd my-blog-starter/
Change article path
By default, Blog articles locate in root (e.g.
We want to publish Non-AMP article and AMP article so let’s separate directories like this.
- Non-AMP :
- AMP :
At first, Change Non-AMP publish path.
- Change build destination of post at gatsby-node.js
- Change path in meta tags like
- Change link path at contents
- Change path in RSS at gatsby-config.js
Prepare AMP generation
To generate AMP page from HTML I use gatsby-plugin-html2amp.
This plugin allow you to generate AMP page using regular HTML so all you have to do is to install it and add configuration !
$ npm install --save gatsby-plugin-html2amp
and add configuration.
- Add plugin configuration at gatsby-config.js
amphtmlmeta tag at src/components/seo.js
- Add Google analytics settings for AMP at static/gaConfig.json
Add Service Worker installer in AMP for Non-AMP page
This is the most important key point of this strategy.
Once user access AMP page this site starts installing service worker to cache resources for Non-AMP page.
After installation and user clicks link which links to Non-AMP page, the page load instantly because most resources are cached.
amp-install-serviceworker is AMP component for that.
Fortunately, gatsby-plugin-html2amp already has integration for it so what you need is to add configuration only !!
- Make service worker installer page at static/amp-install-serviceworker.html (new file)
- Add gatsby-plugin-html2amp configuration at gatsby-config.js
Add AMP validation in Test
This is optional.
Let’s add test to check validation for AMP page.
$ npm install --save-dev amphtml-validator
- Add test command at pacakge.json
- Run test by following command
$ npm test
Note that gatsby-plugin-html2amp generate AMP in build process only so when you run
npm run develop you can not browse AMP page.
When you check Non-AMP and AMP page run following command.
$ npm run build $ npm run serve
I made Sample project here.