【 Cocoon 】AMP で SuperPWA で実装した PWA を事前に読み込み

CocoonでAMP to PWAを実装するカスタマイズ

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

Google が推進しているのが、 AMP と PWA 。

AMP は、 Web サイトを高速で表示する仕組みです。

PWA は、 Web サイトをアプリにする仕組みです。

この 2 つをどちらとも使えば、高速で起動するアプリを実現できます。

WordPress テーマ「 Cocoon 」をお使いになれば、 AMP に簡単に対応できます。

「 Super Progressive Web Apps 」( SuperPWA )を使えば、 PWA を簡単に実装できます。

Cocoon の AMP と SuperPWA で実装した PWA を結びつける、カスタマイズをご紹介します。

高速の AMP を入り口とし、それ以降のページでは PWA で快適な体験ができます。

AMP to PWA

今回ご紹介するカスタマイズにより、 AMP ページで PWA を事前に読み込めます。

これは AMP to PWA と呼ばれる手法です。

仕組みはこのような感じです。

  1. PWA をインストールしているユーザーが、モバイル検索から AMP ページを訪問
  2. AMP の仕組みにより、ページは高速で表示される
  3. ユーザーが AMP ページを閲覧している裏で、 Service Worker を有効にし PWA の起動準備
  4. ユーザーがサイト内の別ページに移動すると、高速で PWA が起動
  5. ユーザーは、 PWA 内でアプリのような体験

AMP to PWA の実際の動作は、こんな感じです(モバイル検索 → AMP ページ → ホームボタンをタップ → PWA 起動)。

検索で訪れた AMP ページは高速で表示、そしてアプリまで高速で立ち上がる。

これが AMP to PWA です。

これを Cocoon で実現できます。

しかも、ものすごく簡単に。

AMP to PWA の詳細な説明は、「 AMP ページからプログレッシブ ウェブアプリを事前に読み込む」をご覧ください。

AMP を有効化

今回のカスタマイズで最初に行うことが、 Cocoon の設定より AMP を有効にすることです。

有効化は、たった 1 つのチェックボックスをクリックするだけで終わります。

CocoonのAMPの有効化

Cocoon の AMP 対応の詳細は、「テーマをAMP対応する方法」でご確認ください。

見た目は通常ページと変わらない上に、 HTTPS サイトは AMP でも検索フォームを設置できます。

また、 Cocoon 1.1.0 にて、 AMP のキャッシュ機能も追加されています。

Super Progressive Web Apps の設定

次に行うことは、 PWA の実装です。

プラグインの Super Progressive Web Apps を使えば、簡単に実装できます。

PWAを簡単に実装できるプラグインSuper Progressive Web Apps

PWA に必要なアイコンさえ作ってしまえば、インストールから設定まで 3 分もあれば終わります。

そのアイコンも、「 WordPress 管理画面 → 外観 → カスタマイズ → サイト基本情報」の「サイトアイコン」に設定したアイコンをリサイズするだけ。

Super Progressive Web Apps のインストールや設定方法は、「 WordPress を数分で PWA 化するプラグイン Super Progressive Web Apps 」にてご説明しています。

このプラグインは質が高い上に、作成者さんの対応が丁寧かつ迅速。

非常におすすめです。

amp-install-serviceworker スクリプトの読み込み

次は、 amp-install-serviceworker スクリプトを読み込みます。

Cocoon 子テーマの tmp-user/amp-head-insert.php に、下記のスクリプトを追加します。

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

amp-install-serviceworker タグの設置

最後に行うことは、 PWA の中核をなす Service Worker への登録です。

Cocoon 子テーマの tmp-user/amp-footer-insert.php に、 amp-install-serviceworker タグを追加します。

<amp-install-serviceworker
  src="<?php echo superpwa_sw( 'src' ); ?>"
  layout="nodisplay">
</amp-install-serviceworker>

これで終わりです。

あとは、高速な Web アプリ体験をお楽しみください。