徹底解説！なぜ今PWA（プログレッシブウェブアプリ）が注目されているのか？

（この記事は Bryan Ellis が 2017年9月14日に The Web Tub に投稿した Why Progressive Web Apps の翻訳です。）

プログレッシブウェブアプリ（以後「PWA」と呼びます）は、Alex RussellとFrances Berrimanの両氏によって名付けられたWebアプリに関する新しい概念です。アプリの安定性（ネットワーク障害時の処理など）、体感速度、ユーザーエンゲージメント（ユーザーの満足度・ユーザー体験など多岐の物事を要因とするアプリへの依存度）の点で最高のパフォーマンスをユーザーに提供することを目的としています。このようなパフォーマンスを実現するためには、Webブラウザ（モダンブラウザであること）から端末側の最新機能にアクセスする必要があります。

プログレッシブ（形容詞）：
１．進歩を提唱・擁護する、改善を行う、物事を前進させる

Webブラウザからアクセスできる端末側の機能は増加しており、Webアプリでも随時サポートしていく姿勢が必要です。Webアプリの進歩を止めてしまえば、Webアプリの存在自体が過去のものとなってしまうでしょう。

PWAは比較的新しい概念ですが、開発コミュニティでは以前から活発に議論されています。コミュニティの参加者は過去2年間で堅実に成長しており、今後も一定のペースで増え続けていくでしょう。

Googleトレンド — Progressive Web Apps

著名な企業もこの時流に乗りPWAを採用し始めています。たとえば、Twitter（3億2,800万人のユーザーを有するソーシャルネットワーク）とAliExpress（世界最大級のeコマースサイト）では、すでにPWAを実用化しています。実用化されているPWAを手に取って確認したい方は Twitter Lite をお試しください。

PWAのメリット

PWAには次のようなメリットがあります。これらは開発者・エンドユーザー双方にとって有益です。

アプリの安定性（主にネットワークが不安定なときの処理）

PWAではアプリの処理に関してきめ細かな制御ができ、その結果、アプリの動作も安定します。たとえば、ネットワークが不安定な場合には状態が改善するまでリクエストを保留することができます。

体感速度

各種コンテンツやリソースをキャッシュするためのメカニズムが用意されているため、アプリの起動までにかかる時間はネイティブアプリと比較しても遜色ありません。また、これによりオフラインの状態でもキャッシュされているコンテンツを利用してアプリを起動することができます。

ユーザーエンゲージメント（ユーザーの満足度・ユーザー体験など多岐の物事を要因とするアプリへの依存度）

モダンブラウザは端末側の多くの機能にアクセスできるため、ユーザーを魅了するアプリを開発することができます。なお、ユーザーエンゲージメント度やユーザーの定着率は、ユーザー側にちょっとした通知を送ることで向上させることができます。

ブラウザ側でサポートしている機能

モダンブラウザが提供する機能として、代表的なものにプッシュ通知やバッググラウンドにおける同期処理が挙げられますが、それ以外にも以下のような機能がサポートされています。多数の機能があるため、ここでは私が役に立つと思ったものだけに絞り込んでいます。

• オフラインモードでの実行
• ホーム画面上でのアイコンの表示（ホーム画面への追加・インストール）
• アプリ間通信のサポート
• Bluetoothのサポート
• NFC機器のサポート
• 近接度センサーのデータへのアクセス
• カメラ＆マイク機能へのアクセス
• 位置情報＆端末の方向性＆加速度センサーのデータへのアクセス

該当する機能を使用できるか否かはブラウザのバージョンおよび端末の種類により異なります。機能の詳細は What Web Can Do Today で確認できます。このサイトには機能の紹介以外にもAPIの使用方法などが掲載されています。

たとえば、次のような簡単なJavaScriptコードでバッテリーの状態を確認することができます。

navigator.getBattery().then(
  function(BatteryManager){
    console.log('Current Batter Level: ', BatteryManager.level);
  }
);

PWAの開発

まずは、PWAの構築に必要なマニフェストファイル（メタデータの定義）を作成します。なお、マニフェストファイルはWebアプリのindex.html内で読み込む必要があります。

それでは、ファイルの詳細を見ていきましょう。

マニフェストファイル

マニフェストファイルでは、アプリの基本的な設定をJSON形式で定義します。たとえば、アプリ名（name、short_name）、説明（description）、背景色（background_color）、アイコン（icons）、起動時の表示形式（display）、起動時の画面の向き（orientation）などが定義できます。

{
  "name": "Vue.js",
  "short_name": "Vue",
  "description": "The Progressive JavaScript Framework",
  "lang": "en-US",
  "dir": "ltr",
  "scope": "./",
  "start_url": "./menu",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#ffffff",
  "theme_color": "#4fc08d",
  "icons": [{
    "src": "/images/icons/android-icon-48x48.png",
    "sizes": "96x96",
    "type": "image/png",
    "density": "1.0"
  }],
  "prefer_related_applications": true,
  "related_applications": [{
    "platform": "web"
  }]
}

アプリに関するすべての情報がマニフェストファイルに定義されており、その内容はアプリのライスサイクルの各ステージで使用されます。

最新のAndroid 8.0 （Android O）では、PWA対応のURLにアクセスした場合、インストールバナーがブラウザ下部に表示され、サイトをインストール（「ホーム画面に追加」）するか聞かれます。インストール先と表示名はユーザー側で指定できます。

PWAの使用例：Vue.jsのサイトとホーム画面への追加

Android 8.0では、PWAのアイコンは白い円形で表示され、右下にはChromeマークが表示されます。このChromeマークは「インターネット接続」を連想させることから、アプリを使用するためにはインターネットが必要という誤解をユーザー側に与えかねません。私としては、Android 7.0で使用されていたアイコンにデザインが戻ることを熱望しています。

ストックAndroid 7 （Nougat）の場合、インストールバナーはブラウザ下部に表示されないことがあります。その場合、ブラウザ右上に表示された設定メニューからアプリをホーム画面に追加できます。

次のスプラッシュ画面では、マニフェストファイルに定義されたアプリ名・背景色・アイコンが使用されています。

PWA の使用例：スプラッシュ画像

お気づきの方もおられるかと思いますが、上記のスクリーンショットにはアドレスバーが表示されていません。画面上のcanvas領域をどのように使用するかは display プロパティで設定できます。

各プロパティの詳細を説明しなくてもプロパティ名をざっと観察するだけで、マニフェストファイルでできることやその使い勝手が簡単に想像できるかと思います。

マニフェストファイル内の各プロパティの詳細に関しては、Google Developers：ウェブアプリマニフェストと Mozilla Developer Network（MDN）：Web App Manifest のドキュメントをご確認ください。

Service Worker

Service Workerは、Webアプリとネットワーク間でプロキシの役割を担ってくれます（Service Worker自体はJavaScriptで構築されています）。Service Workerの主な役割は、サーバーとアプリ間で発生するリクエストの制御です。

Service Workerの処理の流れ

開発者側でレスポンスを適宜制御できるので、アプリの安定性が向上し（ネットワークが不安定なときなど）、アプリライフサイクルの初期段階においても柔軟な処理を施すことができます。たとえば、アプリがコンテンツを利用する前にService Workerを使用してサーバー側からあらかじめコンテンツを取得しキャッシュ内に保存しておくことができます。同時に、最新のコンテンツをバックエンド側（または、RESTの原則に準拠したサービスレイヤーやサードパーティーから）から取得して、後から使用することもできます。このような仕組みがあると、インターネットへの接続時になんらかの障害が発生した場合でもアプリの動作は安定するのでユーザー側に影響が出にくくなります。キャッシュを使用したコンテンツの読み込みにより、ネットワークの障害時にもアプリを利用でき、アプリのダウンタイムをゼロにすることができます。

キャッシュされているコンテンツを使用することにより、ユーザーの体感速度も速くなります。ホーム画面からアプリを起動させるとき、アプリが即座に起動し、すぐに作業に取り掛かれることをユーザー側では期待しています。もしコンテンツのダウンロードが最初に必要となると、インターネットの接続状態にもよりますが読み込み時間だけで数秒かかってしまいます。キャッシュを経由することでユーザーの体感速度は各段に上がり、アプリの高評価にもつながります。魅力的なアプリと判断されれば、ユーザーエンゲージメントの向上にもつながります。

インターネット接続が回復した場合には、最新のコンテンツを取得しアプリ側に反映させることができます。アプリの安定性や体感速度の向上はユーザーにも好印象を与えます。

ここまでのお話でService Workerの素晴らしさはご理解していただけたかと思います。これからService Workerの使用方法に関して説明します。Service Workerを使用する場合には、最初に端末側に登録する必要があります。次に、正常に動作させるためには、HTTPS上でデプロイと実行を行う必要があります。これにより、コンテンツ自体の安全性と送受信時の安全性を担保できます。

Service Workerの特性を次に挙げます。

• イベント駆動です。
• DOMの操作は直接行えません。
• アプリとは別のスレッドを使用します。これにより、アプリ本体が終了してもバックグラウンドで継続して処理ができます。

これらの特性により、バックグラウンドでの同期処理、プッシュ通知・メッセージ、イベントの発火を任意のタイミングで行うことができます。

Service Workerの設定方法に関しては Google Developer：Service Worker の紹介と Mozilla Developer Network（MDN）：ServiceWorker API をご確認ください。

PWA以外の選択肢

PWAの技術的な側面に関して説明してきましたが、ここでは「なぜPWAをお勧めするのか」をお話ししたいと思います。

まずは、PWA以外の選択肢を見ていきましょう。それぞれの選択肢には長所と短所があります。

ネイティブアプリ

端末側の多くの機能にアクセスできます。体感速度の点において最も優れています。アプリストアにも提出できるので、ユーザーの目に留まる機会も増えます。ただし、プラットフォーム専用のプログラム言語でアプリを構築する必要があります。また、重要性や種類にもよりますが、更新情報があればダウンロードが都度必要となります。

Webアプリ

インターネット接続が必要となる、端末にインストールができない、端末搭載の機能が使用できない（プッシュ通知、NFCなど）、ユーザーへのアピール度（ユーザーエンゲージメント度）が低いという点で他の選択肢より劣ります。利点としては、JavaScript、HTML、CSSなどのWebで利用されている言語が使用できる点です。これにより、すべてのプラットフォーム上でアプリを実行できます。

ハイブリッドアプリ（Cordova／PhoneGap）

ハイブリッドアプリは、ネイティブアプリとWebアプリの中間に位置し、両アプリの長所を受け継いでいます。ハイブリッドアプリはWeb開発の言語を使用するため対象のプラットフォームを選びません。また、プラグインを使用すれば端末側のネイティブ機能にもアクセスできます。また、ハイブリッドアプリとPWAはどちらもWebView上で実行されるため、パフォーマンスに関しては大きな差はありません。短所としては、端末側の機能にアクセスするときにはプラグインを使用するため、若干ですがWebアプリの開発よりも手間がかかります。多種多様なプラグインが存在しますが、必要なプラグインが見つからない場合やメンテナンスがされていない場合もあります。プラグインは、ネイティブ言語を使用して開発するため専門の知識が必要となります。

結論

アプリの生き残りと成長に最も必要とされるものは、アプリがユーザーに与える満足感と魅力の高さです（総じて「ユーザーエンゲージメント」と呼ばれています）。ユーザーエンゲージメントが高ければ、アンインストール、低評価またはおすすめしないアプリにされることもありません。

ブラウザの機能が追加・強化され、端末側のより多くの機能にアクセスできるようになるにつれ、ブラウザの魅力ひいてはユーザーエンゲージメントも向上していくことでしょう。たとえば、バッググラウンドにおける同期処理を行えるようになったため、ユーザーが別のアプリを使用しているときでも、キャッシュ内のコンテンツを更新し、元のアプリに戻ってきたときに使用可能な状態にしておくことができます。また、プッシュ通知も行えるようになったため、アプリ更新のお知らせやアプリへ誘導するような情報をユーザーに適宜送信できるようになりました。特に、端末側のステータスバー（通知領域）上でプッシュ通知を表示できることはすばらしいことです。モダンブラウザがサポートしているこれらの機能を使用すれば、より満足度の高い体験をユーザーに提供できるでしょう。

ハイブリッドアプリのコミュニティーでは著名なBrian LeRoux （xnoɹǝʃ uɐıɹq）氏が2012年に「PhoneGap（ハイブリッドアプリ）の目的は、ブラウザの機能が充実するまでの一時的な橋渡し役となることです。最終的にはその役割を終え消滅していくことでしょう。」と発言しています。私としては、この過渡期の役割をPWAが担い、次のステージへさらに前進させてくれることを願っています。

本記事では、使用するファイルやサポートしている機能などいくつか重要事項を交えてPWAに関する基本を説明しました。このブログの続編では実際のPWA（Vueを使用）を開発するための工程を解説する予定です。

翻訳者紹介

渡部正和/Masakazu Watabe
フリーランスの翻訳家。インターネット・通信業界で10年ほど翻訳を経験したあと、2013年からフリーランスに。直訳ではない、わかりやすい翻訳を心がけています。校正など翻訳全般に関するご相談がありましたら watabe08@gmail.com（渡部）まで。