AMP to PWA をGatsbyで実装する

[t-jindai]

---

title: AMP to PWA をGatsbyで実装する
slug: amp-to-pwa-for-gatsby
lang: ja-JP
tags:

• amp
• gatsby
• pwa
  date: 2019-02-17
  summary: AMP-to-PWAはPWAMPというAMPとPWAの合わせ技のアーキテクチャの1つです。今回はそれをGatsbyを使って実装する方法を説明します。

---

AMP to PWAとは

AMPからPWAをプリロードする方法としてAMPの公式ブログでは紹介されていて、AMPにアクセスしたタイミングでオリジナルコンテンツのリソースをService Workerで事前にキャッシュさせることで、AMPからPWAに遷移した際のロードを大幅に削減することができます。

AMPの公式ブログでの説明はこちら。

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:

詳細は、AMPの公式ブログを参照ください！

この記事のゴール

Gatsbyを使って、ブログサイトを作るケースを例として、AMP to PWAを実装する方法を説明したいと思います。

目次

• ブログの準備
• ブログ記事のパスを変える
• AMP版の記事を生成させる
• AMPでservice workerをインストールさせる
• AMPのバリデーションをテストに追加
• ビルド

ブログの準備

Gatsbyには、サイトの雛形を共有し、他の人が使えるほうにする機能があります。
今回は、ブログサイト用の雛形である、gatsbyjs/gatsby-starter-blogを利用したいと思います。

$ npm install -g gatsby-cli
$ gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
$ cd my-blog-starter/

ブログ記事のパスを変える

gatsbyjs/gatsby-starter-blogは初期設定では、サイトのルートディレクトリに記事が配信されていきます。(例：/hello-world, /hi-folks)
今回は、AMP版の記事も同時に配信するので、下記のようにパスを分けます。

• Non-AMP : /posts
• AMP : /amp/posts

それでは、まずNon-AMPのページのパス変更から。

• gatsby-node.jsにある記事の生成先のパスを変えます
• src/components/seo.jsにあるmetaタグのcanonicalの向き先も同様に変更します
• 下記、サイト内にある記事へのリンクもパス変更しておきます
  • src/pages/index.js
  • src/templates/blog-post.js
• gatsby-config.jsにあるRSS配信している記事のパスも変えます

AMP版の記事を生成させる

AMP記事の生成には、gatsby-plugin-html2ampを利用します。
HTMLを変換してAMPを生成するため、別でAMPページを作る必要はなく、少しの設定で利用が可能です。

$ npm install --save gatsby-plugin-html2amp

下記設定を追加します。

• gatsby-config.jsにプラグインの設定を追加します
• src/components/seo.jsにamphtmlのmetaを追加します
• static/gaConfig.jsonにファイルを新規作成して、Google Analyticsの設定を追加します

AMPでservice workerをインストールさせる

ここがこのアーキテクチャのポイントです。
AMPにアクセスした際に、PWAのリソースをService workerを利用して事前にキャッシュします。

そのためのAMPのコンポーネントがamp-install-serviceworkerです。
gatsby-plugin-html2ampは該当コンポーネントをサポートしているので、gatsby-plugin-html2ampに設定に追加すれば、amp-install-serviceworkerが追加されます。

• Service workerインストール用のstatic/amp-install-serviceworker.htmlを新規作成します
• gatsby-plugin-html2ampの設定をgatsby-config.jsに追加します

AMPのバリデーションをテストに追加

これまでの作業で、すでにAMP to PWAの設定は完了してますが、せっかくなので、AMPのバリデーションも追加しておきます。

$ npm install --save-dev amphtml-validator

• バリデーションコマンドをpacakge.jsonに追加します
• 下記でバリデーションが通ることを確認できるようになります（ビルドしたあとに実施してください）

$ npm test

ビルド

注意事項として、gatsby-plugin-html2ampはHTMLからAMPを生成するプラグインなので、gatsby buildのプロセスの中でAMPを生成します。
npm run developして開発している際には、/amp/posts/の記事にアクセスしても記事は存在しないので、注意してください。

Non-AMPとAMPを生成して確認するコマンドは下記です。

$ npm run build
$ npm run serve

サンプルコード

こちらににコードをあげてあります。