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.