AMP to PWA をGatsbyで実装する

ampgatsbypwa
tomoyukikashiro
tomoyukikashiro

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のページのパス変更から。

AMP版の記事を生成させる

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

$ npm install --save gatsby-plugin-html2amp

下記設定を追加します。

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

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

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

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

サンプルコード

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

Leave a comment