PWAMP(プワンプ)って何？流行りのPWAとAMPを組み合わせた最新技術について ｜ SiTest (サイテスト) ブログ

SEOトレンド2017年予測にもあげられているPWA(プログレッシブウェブアプリ)とAMP(アンプ)という技術をご存知でしょうか？

PWAは、開発者カンファレンス「Google I/O」でクローズアップされた注目のアプリケーションです。
AMPは、Googleが昨年2015年に発表したスマートフォンでページを高速表示させるためのフォーマットです。

そのPWAとAMPの技術を組み合わせいいとこどりした技術が「PWAMP(プワンプ)」です。
PWAやAMPも含め、順をおって説明していきます。

ざっくり説明すると、ネイティブアプリとウェブサイトをいいとこどりしたWEBアプリケーションです。

ネイティブアプリのプッシュ通知やアプリ感覚性をWEBアプリにとりいれることにより、インストール不要なブラウザで動くネイティブアプリ(のようなWEBアプリ)が実現できます。

心地よいネイティブアプリのUIを、インストールせずさわれるとなるとメリットですよね。
(しかも気に入れば、インストールすることもできます。)

もう一つ、大きなメリットがPWA(プログレッシブ ウェブアプリ)にはあります。

ネットワーク接続に依存しません。
キャッシュをとることにより、オフラインやネット環境が良くない場所でも高速で動作させることができます。

SEOとしても期待されており、
グーグルのサーチクオリティチームで以前に働いていたペドロ・ディアス氏が、
「SEOに取り組む身として、PWA(プログレッシブ ウェブアプリ)に関して何も意識していないのならば、それは絶好の機会を失っていることになる。」
とツイートを投稿するほどです。

作り方など、詳しくはこちらの記事に書いておりますので、参考に開発してください。

超高速！流行りのPWA(プログレッシブ ウェブアプリ)を開発してみよう。

AMPとは、「Accelerated Mobile Pages」の略で、
その名のとおり、モバイルユーザーのユーザー体験向上を目的として、WEBページの表示速度高速化が図られている
スマートフォンでページを高速表示させるための仕組みです。

つまり、検索結果などでAMP表示があるウェブページだと、リンクタップからページ表示までにかかる時間が非常に短くなり、通信速度が遅くても瞬時に目的のページを開けるようになるということです。

SEOとしても、話題になっており、GoogleのRichard Gingras（リチャード・ギングラズ）氏のコメントでは、
「AMP化のパフォーマンス向上によりエンゲージメントが増え、検索エンジンの評価が上がっていくことがおおいに考えられる」と言及するほど、期待のある技術です。

AMP対応をするにはある程度決まり事が存在します。

必須な条件は下記の2つです。
* AMP HTMLの書式に沿ってHTMLを記述すること
* そのHTMLにschema.orgで構造化マークアップをすること

詳しくは下記の記事を参考にしてみてください。

AMP (Accelerated Mobile Pages) HTML 導入前に確認しておくこと

それでは、本題に入ります。
上記からPWAもAMPもSEOとしても技術としても今後期待されていることがわかったと思います。
その両方を組み合わせていいとこどりしようと考えられたのがPWAMP(プワンプ)です。

組み合わせのパターンは３つあります。

1. AMP as PWA

AMPページで単純にPWAを動かす形態です。
メリット: AMPページ上であり高速
デメリット: AMPページ上であるため制約が多い、PWAのリッチな体験を存分にあたえられない

2. AMP to PWA

AMPを最初にユーザーに提供し、そこから、PWAに繋げる形態です。
メリット: 最初にAMPの高速な体験をあたえ、PWAにつなげた後はリッチな体験を存分に与えられる
デメリット: 最初はリッチな体験を、PWAにつなげた後は高速な体験を存分にあたえられない

3. AMP in PWA

PWAのコンテンツとしてAMPを利用する形態です。
メリット: PWA内にAMPが存在しているため高速化の妨げにならない
デメリット: 部分的にAMPが入るため、リッチな体験を存分にあたえられない可能性がある

詳しくは、Paul Bakaus氏が説明している記事がありますので、
そちらをご確認下さい。

Progressive Web AMPs

PWAMPを利用するには、AMPページでService Worker をインストールする必要があるのですが、
通常のインストール方法では対応できません。

専用のコンポーネントが提供されているので、そちらをお使いください。

amp-install-serviceworker

Service Worker インストール後はお好きな組み合わせパターンで開発してみてください。

いかがでしたでしょうか？

懸念点としては、PWAはモダンブラウザの中でSafariが未対応となっておりますので、まだ扱っている技術者も少ないようです。

ただ、今後はPWA, AMP, PWAMPの露出もますます増えてくると思います。
試しに、開発に使用してみてはいかがでしょうか？