プログレッシブウェブアプリ（PWA）とは？仕組み・対応ブラウザ・インストール方法を徹底解説

スマートフォンの主役といえばアプリです。しかし長らく、アプリはデスクトップやブラウザの世界に同じような影響力を持っていませんでした。ところが近年、その状況は大きく変わりつつあります。プログレッシブウェブアプリ（PWA）が存在感を増し、私たちとあらゆるウェブサイトとの関わり方を変えようとしているのです。

では、プログレッシブウェブアプリとは一体何なのでしょうか？PWAは通常のウェブサイトにできないことを、どのように実現しているのでしょうか？この記事では、PWAについて知っておくべきポイントをわかりやすく解説します。

プログレッシブウェブアプリとは何か？

プログレッシブウェブアプリ（PWA）とは、通常のウェブサイトとしてユーザーに提供されながら、ネイティブモバイルアプリのように振る舞うウェブアプリケーションです。PWAはネイティブモバイルアプリの使い勝手を最新のブラウザ機能にもたらし、両分野の進歩を最大限に活用することを目指しています。

では、PWAを定義する要素にはどのようなものがあるのでしょうか？

• ユニバーサル：ブラウザの種類に関係なく、すべてのユーザーに対してほぼシームレスに動作すること。
• レスポンシブ：ノートパソコン、タブレット、スマートフォンなど、あらゆるデバイスで快適に動作すること。
• デザイン：ネイティブモバイルアプリのようなデザインであること。洗練されたメニュー構成と、高度な機能へのシンプルな操作性が求められます。
• セキュリティ：HTTPSを使用し、ユーザーデータの安全を確保すること。
• 発見可能性：ユーザーがPWAを見つけやすく、「サイト」ではなく「アプリケーション」として容易に識別できること。
• エンゲージメント：プッシュ通知などのネイティブエンゲージメント機能にアクセスできること。
• アップデート：常に最新バージョンのサービスやサイトを提供すること。
• インストール：アプリストアを経由せずに、ホーム画面へ簡単に「インストール」できること。
• 共有：URLひとつで共有でき、相手側でのインストール作業が不要なこと。

ご覧のとおり、PWAはネイティブアプリの洗練された機能とインターフェースデザインを備えた、完全なウェブ体験をユーザーに提供することを目指しています。

プログレッシブウェブアプリの仕組み

プログレッシブウェブアプリの鍵となるのが、ブラウザのサービスワーカー（Service Worker）です。

サービスワーカーとは、ブラウザのバックグラウンドで動作するスクリプトです。「ウェブページとは独立して動作するため、ウェブページやユーザーの操作を必要としない機能への扉を開きます」。現在でもプッシュ通知やバックグラウンド同期などでサービスワーカーが活用されていますが、今後のPWAではこれらのスクリプトがさらに大きな役割を担うことになります。

こうした理由から、サービスワーカーはPWA標準の基盤となっており、ウェブキャッシュを利用してほぼ瞬時の応答を実現しています。

サービスワーカー以前は、Application Cache（AppCache）が主流のブラウザキャッシュ技術でした。AppCacheは多くのオフラインファースト型サービスで採用されていましたが、エラーが発生しやすいという課題がありました。また、A List Apartが指摘するように、AppCacheにはいくつかのよく知られた制限事項がありました。

開発者にとって最大の問題は、AppCacheの内部動作に対して直接的なコントロールができない点でした。そのため、問題が発生しても正確に修正することが困難だったのです。結果として、完全なオフライン機能を持つウェブサイトやサービスは、リスクの高い選択肢とみなされていました。

一方、サービスワーカーは必要な処理が完了すれば終了します。PWAでは、ユーザーが何かをクリックしたり機能を使ったりすると、サービスワーカーが起動します。サービスワーカーはイベントを処理し、オフラインキャッシュでリクエストを完結できるかどうかを判断します。PWAには複数のオフラインキャッシュが用意されており、より幅広いオフライン機能を実現できるのです。

さらに、キャッシュはオフライン時の高速化だけに使われるわけではありません。たとえば、接続状況が非常に不安定な環境でPWAにアクセスした場合でも、サービスワーカーは以前のキャッシュを提供し、完全に機能する状態でユーザー体験を中断させません。

PWAのブラウザ対応状況

プログレッシブウェブアプリを利用するには、2つの条件があります。対応ブラウザと、PWA対応のサービスです。

まずブラウザについて見ていきましょう。PWAのブラウザ対応状況を確認する方法は2つあります。1つ目はJake Archibald氏の「Is Service Worker Ready?」というサイトで、主要ブラウザに加えてSamsung InternetのPWA対応状況を一覧できます。

より詳細な情報が必要な場合は、「Can I Use」をチェックしましょう。このサイトは各種ウェブ技術やブラウザ技術の実装状況をブラウザのバージョン別にまとめた専門サイトです。たとえば検索バーに「service workers」と入力すると、各ブラウザがどのバージョンからPWAのサービスワーカーに対応したかを示す表が表示されます。

Can I Useのサービスワーカー対応表によれば、主要ブラウザはすべてPWAに対応しています。また、いくつかの代替デスクトップブラウザやモバイルブラウザの対応状況も確認できます。

もう少し詳しく整理してみましょう。

• デスクトップブラウザ（完全対応）：Chrome、Firefox、Opera、Edge、Safari
• デスクトップブラウザ（部分対応／旧バージョン）：QQブラウザ、Baiduブラウザ
• モバイルブラウザ（完全対応）：Chrome、Firefox、Safari、UCブラウザ、Samsung Internet、Mintブラウザ、WeChat
• モバイルブラウザ（部分対応／旧バージョン）：QQブラウザ、Androidブラウザ、Opera Mobile

つまり、主要ブラウザはすべてPWAに対応しています。Microsoft EdgeとSafariは、比較的最近になって完全対応リストに加わったブラウザです。逆に、QQブラウザとBaiduブラウザは旧バージョンを使用しているため、第2グループに分類されています。

PWAの探し方とインストール方法

使用するブラウザが決まったら、次はPWAを探してインストールしてみましょう。ここでは例として、Google Chromeを使ったSamsung Galaxy S8での手順を紹介します。

プログレッシブウェブアプリはすでに身近な存在です。多くの企業が自社のサイトやサービスをPWA対応させています。多くの場合、サービスのホームページやモバイルサイトにアクセスした際に表示される「ホーム画面に追加」というダイアログで、初めてPWAと出会うことになります。

もちろん、数多くのサイトを訪れてはホーム画面追加のダイアログが表示されるのを待つやり方は非効率で、時間の無駄になりがちです。幸い、PWAを専門にカタログ化しているサイトがいくつかあるため、そんな手間をかける必要はありません。

まず試したいのは「outweb」です。かなり充実したPWAのリストを掲載しており、新しい選択肢も頻繁に追加されています。次におすすめなのが「pwa.rocks」です。こちらは掲載数こそ少ないものの、デバイスに追加しておきたい便利なPWAが厳選されています。

さらに、2019年1月にはAndroid向けChrome 72にTrusted Web Activity（TWA）が搭載されました。TWAによりChromeのタブをスタンドアロンモードで開けるようになり、PWAがGoogle Playストアに登場できるようになりました。最初にGoogle Playに登場したPWAはTwitter Lite、Instagram Lite、Google Maps Goなどで、今後もさらに増えていくことが期待されています。

PWAはネイティブアプリを置き換えるのか？

プログレッシブウェブアプリは、ブラウザとネイティブモバイルアプリの中間に位置する優れたハイブリッド形態です。では、PWAはネイティブアプリを完全に置き換えるのでしょうか？結論から言えば、それは難しいでしょう。PWAは軽量なソリューションとしては優れていますが、現状では既存のサイトやサービスの再現が中心であり、ネイティブアプリを置き換えるには至っていません。

少なくとも、当面の間は。

とはいえ、PWAは確かに効果を発揮しています。「PWA Stats」で公開されているデータもそれを裏付けています。PWAが一般的なウェブサイトとの関わり方をどう変えているのかを示す、興味深い数字をいくつか紹介しましょう。

• Trivago：PWAをホーム画面に追加したユーザーのエンゲージメントが150%増加しました。
• Forbes：PWAのホームページはわずか0.8秒で完全に読み込まれ、1回の訪問あたりのインプレッションが10%増加しました。セッション時間も2倍になりました。
• Twitter Lite：1セッションあたりのページビューが65%増加し、ツイート数は75%も増加しました。3G回線でも5秒以内にインタラクティブな状態になります。
• Alibaba：モバイルでのコンバージョンが76%増加しました。

PWAはまだ主流とは言えません。しかし、デバイスの容量節約をはじめとする多くのメリットを提供するPWAについては、今後ますます耳にする機会が増えることでしょう。