This post was originally published at 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)
- Build
Prepare Blog
$ 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. /hello-world
, /hi-folks
). We want to publish Non-AMP article and AMP article so let’s separate directories like this.
- Non-AMP :
/posts
- AMP :
/amp/posts
At first, Change Non-AMP publish path.
- Change build destination of post at gatsby-node.js
- Change path in meta tags like canonical
at src/components/seo.js
Change link path at contents
- src/pages/index.js
-
src/templates/blog-post.js
- 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
- Add
amphtml
meta 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
Build both
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
Sample
I made Sample project here.
Top comments (0)