You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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 !
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 !!
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.
title: AMP to PWA for Gatsby
slug: amp-to-pwa-for-gatsby
lang: en-US
tags:
date: 2019-02-17
summary: AMP-to-PWA is one of PWAMP architecture for collaboration AMP and PWA. I would explain how to implement it using Gatsby.
What's AMP to PWA
It's also known as Preload your Progressive Web App from your AMP pages.
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
$ 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.
/posts
/amp/posts
At first, Change Non-AMP publish path.
canonical
at src/components/seo.jsPrepare 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 !
and add configuration.
amphtml
meta tag at src/components/seo.jsAdd 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 !!
Add AMP validation in Test
This is optional.
Let's add test to check validation for AMP page.
$ 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.
Sample
I made Sample project here.
The text was updated successfully, but these errors were encountered: