AMP と PWA の相互関係
プログレッシブウェブアプリ（PWA）と AMP ページは効果的に連携します。多くの場合、さまざまな点で補完し合います。以下の手法をご覧ください。
- AMP ページで PWA 機能を有効にする
- AMP から PWA への円滑で超高速なユーザーエクスペリエンスを実現する
- AMP の機能を活用して PWA を単純化する
詳しくは、Web Fundamentals のプログレッシブウェブアプリについての説明をご覧ください。
PWA の機能を取り入れた AMP ページ
AMP ページでは、AMP キャッシュとは対照的に自分のサイトのドメインから配信する限り、さまざまな PWA の機能を独力で使用することができます。つまり、Google や Bing などのプラットフォーム内にある AMP ページが消費される時点では PWA の機能は作動しませんが、それから先に進む場合やユーザーが AMP ページに直接アクセスすると、処理が行われます。
PWA へのエントリポイントとしての AMP
AMP の独自のセールスポイントは、ほば瞬時に配信という特性にあります。このために、AMP はサイトの最初のユーザーインタラクションとして最適なものとなっています。プログレッシブウェブアプリは、インタラクティブ性やエンゲージメントの可能性がより高い機能を実現します。最初の読み込みはやや遅くなりますが、サイトの Service Worker とつまりはそのアセットとアプリシェルによって、以降の読み込み時の配信は加速されます。
サイトへのエントリ ポイントとして AMP ページを使用し、背後で PWA を準備しておいて、進行中に PWA に切り替えるのが、効果的な戦略です。
amp-install-serviceworker を使って AMP を PWA に接続する方法についてご覧ください。 PWA のデータソースとしての AMP
AMP ページの基本的な特徴は、簡単で安全に埋め込みできるという点です。AMP ページを配信するプラットフォームの数がますます増えているのはそのためです。
プログレッシブウェブアプリを作成する場合は、AMP ページを PWA のデータソースとして再利用することで、AMP のメリットを享受しながら、バックエンドとクライアントの複雑さを大幅に緩和することができます。
-