PWA〈Progressive Web Apps〉

PWA〈Progressive Web Apps〉

PWA（Progressive Web Apps）とは、モバイル向けWebサイトをスマートフォンアプリのように使えるようにするための仕組みのことです。

PWAはそれ自体が何か特殊な一つの技術、というわけではありません。

レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。

PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせることができます。

これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。

PWAの機能

PWAはアプリ的な側面とWebサイト的な側面を併せ持っています。特徴的な機能は以下の通りです。

①ユーザーの手元の端末にインストール可能

モバイル端末のホーム画面にアイコンを設置できるため、ユーザーはアイコンをタッチするだけでWebサイトを閲覧することができます。

似た機能に「ウェブページのショートカットアイコンをモバイル端末のホーム画面に追加する」という既存機能があげられます。

しかし、PWAは単にショートカットをホーム画面に設置した場合と異なり、後に紹介するプッシュ通知やキャッシュの利用などの機能が備わっています。

また、PWAのアイコンから起動したWebサイトは、URLバーもなくフルスクリーンで表示できますし、起動時のスプラッシュスクリーンも設定できます。

ネイティブアプリのインストールではなくPWA対応したサイトをインストールできることは、サイト運営者にとってもサイトユーザーにとってもメリットがあります。

【サイト運営者側のメリット】

①アプリサイトを経由しないため、アプリサイトの審査不要

ネイティブアプリの場合、GooglePlayやApp Storeなどでアプリを登録する際には審査が必要なため、アプリが配信できるようになるには時間がかかります。

PWAはストアを経由しないため、PWAを実装したサイトをリリースすればすぐにアイコン設置が可能です。

②OSごとの個別対応が不要

ネイティブアプリの実装はOSに依存するため、インストールする端末がAndroidなのかiOSなのかによってアプリをそれぞれ用意する必要があります。

一方、PWA対応サイトはあくまでもWebサイトであり、OSには依存しません。Android、iOSそれぞれに個別対応する必要がないのです。

【サイトユーザー側のメリット】

・通信量、データ容量を食わない

通常のアプリに比べ、PWAではダウンロードするデータ量が少なく、通信量やデータ容量が少なくすみます。

②キャッシュの利用

PWAでService Workerの機能を利用すると、キャッシュの利用が可能になります。

これにより、以下のようなメリットが生まれます。

・ページ表示速度の高速化

キャッシュによってページを先んじて読み込めるため、ページの表示速度が早くなりユーザーがページを移動しやすくなります。

・オフライン対応

インターネットに接続していなくてもキャッシュを利用してページを表示するため、オフラインでもサイトを閲覧できます。

オフラインの間に入力されたデータをオンラインになったら送信するといったこともできます。

③プッシュ通知

Service Workerの機能により、従来のWebサイトではできなかったプッシュ通知が可能になります。

アプリ同様の積極的な通知・呼びかけがWebサイトからもできるようになります。

参考：Service Worker の紹介 | Web | Google Developer

④検索結果やURLから、通常のサイトと同じようにアクセスすることができる

アプリ的な機能が取り上げられがちですが、もともとはWebサイトなので、通常のWebサイトと同じようにアクセスすることができます。

知人とページをシェアするときはアプリとは違いURLを送ればページを共有できますし、検索エンジンからPWA対応のサイトを見つけることもできます。