WordPressでAMP + PWA（プログレッシブウェブアプリ）を実装する方法を模索しながら、今はこうやっています

ここ最近、PWA（プログレッシブウェブアプリ）という技術について見聞きする機会が増えてきて、AMP（Accelerated Mobile Pages）と組み合わせて実装する方法について、私の周囲では話題になっていました。

「PWAとかAMPってなんですか？」という方は、以下のページをご参考ください。

というわけで「WordPressでAMP + PWAを実装するにはどうすればいいのか」。ここ最近いろいろと試していましたが「この方法だとどうかな？」と思って試したことや、現在まで得た知識、感想などを以下にまとめました。

巷にはまだ事例が少ない気がする（WordPressに関しては全くといっていいほど情報が見つからない）ので、なかなか着手に踏み切れず様子見をしている方もいらっしゃると思います。

「そんな方のために！」というわけではないのですが「なんか、実装がんばってるやつがいるよ」という感じでご覧いただけますと嬉しいです。

まずはサイト構成を整理しよう

結局のところ「PWAを実装すると、具体的に何がどうなるの？」ということがイメージしづらかったので、実験として私の運営している「ほくラク（北楽）」のウェブサイトを元に、実装前のサイト構成を整理した上で、PWA実装後のサイト構成を以下にまとめました。

実装前のサイト構成

AMP対応ページは「/amp」でアクセスできる、という構成になっています。

PWA実装後のサイト構成

通常のトップページとは別に、アプリを起動したり、AMPページからトップへ移動する場合は「/app」に遷移させて、それぞれAMP対応ページへリンクさせる、という構成です。

PWAを実装することで得られるもの

主に以下のような項目が挙げられます。

「ホーム画面へアプリを追加」する機能を提供することができる
追加したアプリを起動してネイティブアプリっぽい操作感を体験することができる
オフラインや通信速度が遅い環境でもService Workerを利用してキャッシュさせたファイルを読み込んで、高速でページを表示することができる
プッシュ通知を実装できる

検索経由などでAMP対応ページを閲覧した方に対して、ウェブサイトへの再訪の機会を提供したり、ページの表示パフォーマンス向上の手助けにはなるんじゃないかとは思います。

私個人的には「オフラインや通信速度が遅い環境で、ページの閲覧が可能になったり高速で表示される」ってのはかなり魅力を感じますね。

というわけで、PWAについておおよその理解をしたので、次は実装方法について勉強しました。

AMP対応ページにPWAを実装する3つの方法

AMP対応ページにPWAを実装する方法は3つあるようです。「AMP から Progressive Web App へ」の記事中で触れられています。

があります。それぞれ英文ですが、がんばって読んで実装しましょう。

PWAの動作確認をしよう

がんばってPWAを実装する過程で、動作確認の作業を行う機会も多いと思います。いくつか方法をご紹介します。

Service Workerについて

PWAの実装に欠かせないのが「Service Worker（サービス・ワーカー）」の理解なのですが、まずはService Workerの仕組みや対応ブラウザなど、現状については「Service Worker の紹介」をご参考ください。

私個人的には・・・未対応のブラウザもあるけど、将来的な対応に前向きに見えるので、今のうちに少しずつでも勉強しておいてもいいんじゃないかな、という判断をしています。

Service Workerがインストールされているどうかを確認するには

ブラウザにGoogle Chromeを使っている方は、以下の2つの文字列をアドレスバーに貼り付けると確認することができます。

chrome://serviceworker-internals/
chrome://inspect/#service-workers

オフライン状態でページを表示してみよう

PWAを実装しているAMP対応ページを開いて、Google Chromeのデベロッパーツールで「Application」タブに切り替えて「offline」にチェックを入れてリロードすると、オフラインの状態を作ることができます。

2G、3Gなど通信速度を変えてページを表示してみよう

PWAを実装しているAMP対応ページを開いて、Google Chromeのデベロッパーツールで「Network」タブを選択して「No throttling」の隣にある矢印を選択します。

下の画像のように、通信速度を変更することができます。2G、3Gなど変更して、どれくらいの速度でページが表示されるのかを検証することもできます。

「ホーム画面に追加」機能を実装してアプリっぽい操作感を持たせよう

マニフェストファイルを作ろう

マニフェストファイルは、例えばAndroidなら「ホーム画面に追加」するアプリのアイコンや、アプリを起動する際の「スプラッシュ画面」の設定をするために使います。

マニフェストファイルの具体的な作り方については「ウェブアプリマニフェスト」をご参考ください。

ちなみにですが、マニフェストファイル内に記述する「start_url」は、アプリを起動した際にはじめに表示されるURLを指定できますが、クエリパラメーターも組み合わせて指定できるので「ああ、アプリ経由でページが見られたんだな」という計測にも利用できますね。

「ホーム画面に追加」機能を試そう

マニフェストファイルがうまく機能しているかどうかを確認するには、Google Chromeのデベロッパーツールで「Application」のタブを選択して「Manifest」の項目を選択、「Add to homescreen」を選択します。

「ホーム画面に追加」機能を試すことができます。下の画面はMacで試したものです（シークレットウィンドウだと動かないので、通常のウィンドウで試しましょう）。

インストールバナーを表示しよう

「インストールバナーってなんだ？」という方も多いと思いますが、下の画像のような表示をいろんなウェブサイトを閲覧している中で、見かけた記憶はありませんか。

AMP対応ページを閲覧している方に対してインストールバナーを表示して「ホーム画面に追加」を促しています。

AMP対応ページのみではなく、通常のページを閲覧する方に対してもインストールバナーを表示することはできます。

インストールバナーの具体的な実装方法や表示される条件などは「ウェブアプリのインストールバナー」をご参考ください。

アプリを起動して「スプラッシュ画面」や表示されるページを見てみよう

「ホーム画面に追加」したアプリを起動すると、先ほど設定したマニフェストファイルの内容が反映されていることがわかります。

これが実装できると「アプリっぽい動きになっている！」って実感が多少は得られると思います。

アプリを作ろう

AMP対応ページにPWAを実装する方法の一つとして「AMP を埋め込み、データソースとして利用する方法」でサンプルとして紹介されているウェブサイト「https://choumx.github.io/amp-pwa/」では、SPA（Single Page Application）で実装していますね。ソースも配布されているので参考にして、WP REST APIで取得した投稿データを加工して、Shadow AMPとReactを組み合わせることで似たようなことができると思います。

ちなみにSPAにはなっていないのですが（なので、アプリと呼んでいいかどうか疑問ですが）「ほくラク（北楽）」では、ホーム画面のアプリを起動すると「/app」のページを表示する実装にしました（本記事公開時点での実装です）。

SPA対応は今後機会を作って試して、いい感じにできたら採用しようかなと思っています（すごく突貫で作ったのでAMP対応ページと若干見た目が違っていたり、会員制サイトなのに、会員ページや登録までの導線がないので実装しないとですね。やることがいっぱいだ・・・）。

サイト全体をAMP化する方法はありでしょうか

上記のようなアプリを作るのは手間だな・・・と感じているので、サイト全体を最初からAMP化してしまえば「/app」を作らなくても通常のトップページに遷移させればいいだけじゃないかな、とも考えています。どう実装するのがいいですかねぇ。

まとめ

この記事の序盤にも書きましたが、本記事を書いてる時点ではPWAそのものを実装しているウェブサイトがまだ少ない上に、実装方法がバラバラだったり、実装してあるウェブサイトを参考にしても現在進行形でエラーが出ていたり（オンライン状態でも）と、なかなか「これが正解だ！」という実装に出会えていません。

「Case Studies」にPWAの事例がいくつか掲載されているのですが「もしかして実装の仕方って、ウェブサイトの数だけ存在するパターン」なのかもしれないです。

もしPWAについて「こうやって実装したよ」とか「こう実装した方がいいよ」というご感想や助言などありましたら、ぜひともお寄せくださいますと嬉しいです。よりいい実装方法を模索して、改良を加えていこうという気持ちはあります！

・・・ということで、WordPressでAMP + PWAを実装してみましたが、感想としては「回線が遅い環境でもページの表示速度がかなり改善された」ことを実感していますし、PWAを実装して得られる最も大きいメリットだなと今のところ感じています。