PWAでシステム開発、基本作法と注目技術

　今回は最新Webフロントエンド技術の目玉であるPWA（Progressive Web Apps）の構成要素について解説する。そもそもPWAは、大きく4つの技術要素から成る。すなわち、見栄えに関する設定ファイルの「App Manifest（アップマニュフェスト）」、オフラインを実現するキャッシュ技術の「Service Worker（サービスワーカー）」、サイズに合わせてレイアウトを変更する「レスポンシブWebデザイン」、通信の安全性を確保する「SSL/TLS」――である。特に注目してほしいのは、1つめのApp Manifestと2つめのService Workerだ。

　App Manifestとは、PWA対応アプリのアイコン名やアイコン画像、起動時の背景色などを決める設定ファイルだ。その実体は、JSON（JavaScript Object Notation）という形式で記述されたテキストファイルで、JavaScriptプログラムから扱いやすいのが特徴である。PWA対応アプリを作成する際は、App Manifestに設定項目を記載し、それをWebサーバー上に配置する。このファイルをWebブラウザーがHTMLファイルなどと一緒に読み込むことで、PWAアプリの設定が可能になる。App Manifestは、manifest.jsonというファイル名にすることが多い。

　主な設定項目を下の表に示した。PWA対応アプリでは、表にある設定項目を読み込んでホーム画面上に表示するアイコンなどを設定している。

　App Manifestの中身を簡単に見てみよう。App Manifestには、ホーム画面に表示する際のアプリ名やアクセス先のURL、テーマカラー、アイコンのファイル名などを記載する。例えば、下記のような具合だ。JSON形式では「キー：値」といった記法でデータ構造を指定する。

{
  "short_name": "短いアプリ名",
  "name": "長いアプリ名",
  "icons": [
    {
      "src": "アイコン.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Service Workerがキャッシュの要

　続いて、Service Workerを説明しよう。Service Workerは、Webアプリをオフライン対応させたり、プッシュ通知を可能にしたりする処理を記述したプログラムだ。プログラミング言語のJavaScriptで記載されており、App Manifestと同様にWebサーバーに配置する。PWAに対応したブラウザーは、App ManifestやService Workerを読み込み、Service WorkerのJavaScriptプログラムがあればPWA対応アプリとして動かす。

　Service Workerは、PWAの要と言っても過言ではない。コンテンツのキャッシュはService Workerによって実現するからだ。ここでいうコンテンツとは、HTML/CSS/JavaScript/画像ファイル、Web APIのレスポンス内容などである。これらをアクセス時にキャッシュしておき、2回目以降のアクセス時やオフライン時にはキャッシュからデータを返す。これにより、パフォーマンスの向上やオフライン時の利用が可能になる。

　データの保存には、Webブラウザーに内蔵されている4つのキャッシュのいずれかを利用する。それぞれの特徴を下記に示す。Service Workerでは、主にCache APIやIndexedDBが使われる。

　現時点では、Android 5以降やiOS 11.3以降でService Workerを利用できる。ただし、iOSでは機能に制限があり、ホーム画面にアイコンを配置することができない。

　Service Workerの特徴の1つはバックグラウンドの処理を担う「ワーカースレッド」で動くことだ。現在のWebブラウザーでは、メインスレッドとワーカースレッドを生成できる。メインスレッドは、ユーザー入力の受け付けや画面の更新処理などを一手に担うスレッドだ。一方のワーカースレッドはバックグラウンドの処理を担当するスレッドになる。このようにマルチスレッド化することで、バックグラウンドで処理しながらユーザーからの入力を受け付けられるプログラムを開発できる。

　Service Workerはワーカースレッドで動くので、ユーザーは視認することはない。また、画面デザインやレイアウトを動的に変更できるDOM（Document Object Model）は使えない。バックグラウンドの処理を担当するため、Webサイトの見た目に直結するDOMへのアクセスを禁止しているためだ。