全2335文字

 最新のWebフロントエンド開発を牽引するのがPWA(Progressive Web Apps)だ。ブラウザーの対応が進み、PWA対応のアプリが急増する可能性が高い。PWAとは、特定の技術やフレームワークを指すものではない。Web標準技術を使って、これまでのWebアプリでは実現できなかったユーザー体験を提供するというコンセプトや、それを実現するための技術群を指す。

 まず、PWAのWebアプリの特徴を挙げる。PWAのWebアプリは、スマホのネイティブアプリのような操作性を可能にする。インターネットに接続していないオフライン環境でも使える、ホーム画面にアプリのアイコンを追加できる、プッシュ通知が可能、といった特徴がある。App StoreやGoogle Playストアを使わずに、アプリを配布できるのもPWAのメリットだ。

 具体的にどのような仕組みで動くのかを説明する。PWAのWebアプリを実装するには、JSON形式で記述されたマニフェストファイルと、Service WorkerというJavaScriptプログラムが必要になる(図1)。

図1●PWAを実現する2つの要素
図1●PWAを実現する2つの要素
[画像のクリックで拡大表示]

 マニフェストファイルには、ユーザー端末のホーム画面にWebアプリを追加する際に必要な基本情報を記述する。定義するのはアプリの動作ではなく、主にその外観がメインと考えてほしい。例えば、アプリ名やアプリのアイコン、アプリの背景色、アプリの概要、縦や横といった起動時の画面の向き、などがこれに当たる。

 Service Workerは、WebアプリとWebサーバーのネットワークを仲介して、リクエストを制御する。プロキシーのような役割と考えてほしい。Webアプリのオフライン対応やバックグラウンドでの同期処理、プッシュ通知などを提供する基盤になる。ブラウザーがバックグラウンドでService Workerを実行し、ブラウザーのウインドウが閉じられても動作し続ける。

 ただし、Service Workerを使うにはSSL接続が必須だ。つまり、HTTPSを使った通信しか利用できない。Service Workerには、Webアプリとサーバーの間の通信に割り込む機能が備わっている。この機能を悪用されて攻撃を受けると、ユーザーが想定しないサーバーと通信し、悪意のあるプログラムを実行する、といった危険性があるからだ。