先進のWebフロントエンド技術を導入する事例が増えている。この動きに乗り遅れてはまずい。本特集では、ITリーダーやITエンジニアが知っておくべきWebフロントエンド技術のAtoZを取り上げる。 今回から「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に記述する主な項目
キー値の概要
background_color起動した際のスプラッシュスクリーンの背景色を指定する。スプラッシュスクリーンでは、アイコンに指定した画像も表示できる
display起動方法を指定する。「standalone」では、スマホアプリのように単独で起動する。他にステータスバーも表示しないフルスクリーンモードの「fullscreen」、ブラウザーを使った表示の「browser」も指定できる
iconsホーム画面に配置するアイコンを指定する。画像名やサイズ、画像の種類などを指定する
nameアプリの名前を指定する
short_nameアプリの短い名前を指定する。表示領域が狭い時に利用する
start_url起動時に読み込むURLを指定する
theme_colorツールバーの色を指定する。色によりブランドを統一し、よりスマホアプリのような雰囲気になる

 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が使われる。

利用できる4つのキャッシュ
キャッシュ名容量メインスレッド動作ワーカースレッド動作利用法
Cookie約4Kバイト~5Kバイト×同期文字列
localStorage約2Mバイト~10Mバイト×同期文字列
Cache API50Mバイト~×非同期HTTPレスポンス
IndexedDB5Mバイト~非同期文字列/数値/真偽値/配列/オブジェクトなど

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

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

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

この先は有料会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら