Gatsby製の当サイトがAMPとPWAに対応しました

2018/06/04

　モバイルWebに対応しました。ウェブ屋さん的に言うと、PWAやAMPと呼ばれる最先端のモバイル最適化技術を導入しました。

　AndroidかiPhone(iOS 11.3以降)でこのサイトにアクセスしていただくと、PWAの機能を体験できます。

　また、こちらが自動生成されたトップページのAMP版となります。

　パフォーマンスの最適化も行いました。Lighthouseによるこのサイトのスコアが以下となります。

Lighthouse result

PWAやAMPとは

　PWAはブラウザでネイティブアプリに近い体験を実現するための仕組みです。ServiceWorkerをインストールすることでオフラインで動作したり、ウェブアプリマニフェストを設定してあたかもネイティブアプリのように振舞います。

　ユーザーにとっての印象はあまり大きくないかもしれませんが、今後新しく登場するウェブサービスではネイティブアプリとウェブアプリが統合されるかもしれないということは、頭の隅にでも留めておいてください。ちなみに、昨年度の滋大祭で展示した時計もPWAを使っていました。

　AMPはウェブサイトを高速で表示するためのHTML/CSS/JavaScriptの作法です。ここ半年の間に、スマホの検索結果に⚡マークの付いたサイトが続々と増えてきていたのにお気づきでしょうか。⚡はAMPに対応したサイトに付けられるマークです。快適にページを閲覧できるかどうかの一つの指標にもなるので覚えておいて損はないと思います。

　で、ウチもパソコン研究会を名乗っている以上、それらを実装することにしました。

GatsbyJSにAMPを導入する

　AMPはクライアントで動作するHTML/CSS/JavaScriptに制約を加えたものです。このサイトは何の捻りもないUIなので、AMPの範疇でしょう。一点だけ、CSSで背景画像を読み込むことはできないので、背景だけスタイルシートを分離しておきます。

　さて、GatsbyにAMP対応ページを生成してもらうための大まかな方針を説明します。GatsbyJSはまだ公式にAMPのサポートをしていないので、自力で実装することになります。

　gatsby buildすると、GatsbyはReactを走らせて生のHTMLを書きだします。これがいわゆるSSR（サーバーサイドレンダリング）です。要はこのときに/public/に吐き出された静的ファイルを、/public/amp/にコピーしてAMPに対応させればよい訳です。

　gatsby-ssr.jsを弄ってレンダリング時にAMPを書き出すものを作っている人もいるそうですが、コードが見当たらなかったので、公式が推している方法で実装しました。リンク先で support this through plugins and starter kits と書かれているのですが、そのスターターキットというのがたぶんこれです。この中に入っているampify.jsを借用します。

　yarn install ampifyしたら、このampify.jsをコピーしてルートディレクトリに投げ込み、サイトに合わせて適当に修正します。

　次に、ビルド時にampify.jsを走らせるための設定をします。package.jsonに

"scripts": {
    "build": "gatsby build && cp -r public amp && rm amp/*.js amp/*.map amp/*.css amp/*.xml amp/*.json amp/*.txt amp/*.webmanifest && mv amp public/amp && node ampify.js",
  },

　を追記します。これも自分のサイトに合わせて改良してください。以上でAMP化は完了です。デプロイする前に、Netlifyのビルドの設定をnpm run buildに書き換えておきましょう。

　最後に、/amp/*がAMPに対応しているか、Googleが提供しているテストツール等で確認してください。imgタグにはインラインサイズを指定する必要があるため注意してください。

GatsbyにPWAを実装する

　GatsbyJSを使っているなら、PWAは比較的簡単に実装することができます。

　ServiceWorkerをインストールしたい場合は、gatsby-plugin-offlineを導入するだけです。ただし、ServiceWorkerをインストールするとNetlifyCMSが404エラーになるので、シークレットモードでアクセスする必要があります。

　ウェブアプリマニフェストはgatsby-plugin-manifestを入れると自動的に生成されます。gatsby-config.jsでお好みに設定してください。ただし、ServiceWorkerと併用する場合、gatsby-config.js内で宣言するときにgatsby-plugin-offlineがgatsby-plugin-manifestより下にくるようにしましょう。

ampify.jsで生成したAMPページにPWAを実装する

　Gatsby製のサイトなら、AMPのページ内でPWAを動かす形態で十分でしょう。AMPページからServiceWorkerをインストールするにはamp-install-serviceworkerを別途使用する必要があります。

　gatsby-plugin-offlineは/sw.jsを生成しているので、同じ場所にServiceWorkerをインストールさせます。先ほどのampify.jsに

$('head').prepend(`<script async custom-element="amp-install-serviceworker"
  src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>`);

$('body').prepend(`<amp-install-serviceworker
      src="/sw.js" data-iframe-src="https://www.shigapc.com/sw.html"
      layout="nodisplay">
</amp-install-serviceworker>`);

　を付け足しておきましょう。これでAMPページにもServiceWorkerを導入できました。

まとめ

　GatsbyJSなら、AMPやPWAも比較的容易に実装できることがわかりました。また、PWAとAMPを組み合わせたPWAMP化にも成功しました。これによって、スマート端末による閲覧が快適になりました。