AMP と PWA の併用に関する動画をご覧ください。

プログレッシブ ウェブアプリ(PWA)と AMP ページは効果的に連携します。多くの場合、さまざまな点で補完し合います。以下の手法をご覧ください。

  1. AMP ページで PWA 機能を有効にする
  2. AMP から PWA への円滑で超高速なユーザー エクスペリエンスを実現する
  3. AMP の機能を活用して PWA を簡素化する

PWA の機能を取り入れた AMP ページ

AMP ページでは、AMP キャッシュとは対照的に自分のサイトのドメインから配信する限り、さまざまな PWA の機能を独力で使用することができます。つまり、Google や Bing などのプラットフォーム内にある AMP ページが消費される時点では PWA の機能は作動しませんが、ユーザーが AMP ページに直接アクセスすると、処理が行われます。

PWA へのエントリ ポイントとしての AMP

AMP の独自のセールス ポイントは、ほとんど瞬時の配信という特性にあります。このために、AMP はサイトの最初のユーザー インタラクションとして最適なものとなっています。プログレッシブ ウェブアプリは、インタラクティブ性やエンゲージメントの可能性がより高い機能を実現します。最初の読み込みはやや遅くなりますが、サイトの Service Worker(とそのアセットとアプリシェル)によって、以降の読み込み時の配信は加速されます。

サイトへのエントリ ポイントとして AMP ページを使用し、背後で PWA を準備しておいて、進行中に PWA に切り替えるのが、効果的な戦略です。

PWA のデータソースとしての AMP

AMP ページの基本的な特徴は、簡単で安全に埋め込みできるという点です。AMP ページを配信するプラットフォームの数がますます増えているのはそのためです。

プログレッシブ ウェブアプリを作成する場合は、AMP ページを PWA のデータソースとして再利用することで、AMP のメリットを享受しながら、バックエンドとクライアントの複雑さを大幅に緩和することができます。