この記事は、AMP to PWA を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の向き先も同様に変更します
- 下記、サイト内にある記事へのリンクもパス変更しておきます
- 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
サンプルコード
こちらににコードをあげてあります。