【 PWA 】 ServiceWorker と Manifest

Engineering/PWA//1

前回の投稿からだいぶ時間が空いちゃいましたが、PWAの続きを書きます。

ちなみに時間が空いちゃったのは PWA のプラグインを作ってたから。
WordPress の PWA プラグイン、ようやく公式ディレクトリへの申請にこぎつけました。
「かゆいところに手が届く」プラグイン “PWA for WordPress” がお披露目できる日を楽しみにしています。

プラグインのお披露目は、WordCamp Tokyo 2018 。
https://2018.tokyo.wordcamp.org/

講演に向けての準備も着々と進めてますのでご期待ください。
僕の講演の予告も記事にしていただいています。
https://2018.tokyo.wordcamp.org/2018/08/01/session-info-02/

「ServiceWorker」と「Manifest」

さて、本題に入ります。
今回は PWA を構成する二つのファイル、「ServiceWorker」と「Manifest」についてふれていきます。

その前に、PWA がどんな動きをしているのか、というところから入っていきます。
前回の記事 に書きましたが、今話題になっているいわゆる PWA を平たく言うと、Web サイトをアプリ化する、という表現でしっくりくるのではないかと思います。
このへんの説明は 前回の記事「Let’s get ready for PWA」 を読んでみていただけたらと思います。

PWA で表示されるコンテンツは、オンラインで取得された Web サイト、またはキャッシュされた Web サイトです。
ユーザーからのリクエストに対して画面に Web コンテンツを表示するのに、通常のブラウザではオンラインで Web サーバーに接続してコンテンツを取得するのに対し、PWA では ServiceWorker がリクエストを仲立ちし、オンラインでコンテンツを取得するかサーバーに接続しないでキャッシュされたコンテンツを表示するのかを制御します。
簡単に言うと、プログラム制御可能なブラウザ内蔵プロキシサーバー、といったところでしょうか。
そしてその「プログラム制御可能」の部分を javascript で記述します。
この制御を記述した javascript ファイルこそが ServiceWorker と呼ばれるものです。

ServiceWorker のプログラムのサンプルコードは別の回に細かく解説したいと思いますが、一般的に以下のような構成になります。

  1. インストール時の挙動
    インストールが完了したタイミングで何をするか。
    オフライン時に表示するページや、最初にキャッシュしておきたいコンテンツを取得する動作を記述しておくのはこのタイミングがおすすめです。
  2. アクティベート時の挙動
    ServiceWorker が有効になったタイミングでの挙動です。
    古いキャッシュの削除などがここに入ることが多いです。
  3. URLリクエストが発生した時の挙動
    これが最も呼び出しの多い機能になります。
    ページの遷移などで URL リクエストが発生したときに、これをキャッシュから取り出して表示するのか、オンラインでサーバーから取得して表示するのか、といったところをコントロールします。
  4. バックグラウンド同期
    これは、PWA の画面を開いていないときでもバックグラウンドでサーバーとの同期が取れる機能です。
    例えばメッセージの送信などをオフラインで発信したとして、これをオンラインになるまで保留しておいて、オンラインになったところで画面を開いていない状態でも「裏」で送っていてメッセージの同期をとっておく、というような機能が実装できます。
  5. Push通知
    これは、Firebase などに代表される Push Nortification を受信したときの挙動を記述する部分になります。

１〜３についてはほとんどのブラウザが対応しています。
４と５ については、対応できている環境は一部に限られますので、ひとまず１〜３について対応しておき、４、５への対応はオプション的な扱いとなることが多いようです。

ServiceWorker  がコンテンツ取得の仲立ちをする役割、としたら Manifest はサイトの振る舞いを定義する、という役割を担います。
PWA の画面の構成やホーム画面に配置されるアイコン、起動したときのスプラッシュ画面の色など、こうした定義が Manifest に記述されています。
Manifest は json 形式で記述されたテキストファイルになります。
Manifest で定義される項目については、次のようなものがあります。

  • name
    アプリの名称
  • short_name
    name が長いときに代わりに表示される短い名前。
    ホーム画面上のアイコンの下に表示されるアプリ名などに使用されます。
  • description
    アプリの説明
  • icons
    アプリのアイコン。
    PNG形式で正方形の解像度の画像ファイルを用意します。
    いろいろな端末で使用する際に、画面解像度に合わせて最適なサイズが表示できるように、複数のサイズのアイコンを用意します。
  • start_url
    PWA 起動時に表示するページの URL
  • scope
    PWA がサイト内のどのディレクトリ配下で稼働できるかを示します。
    例えば “/” を指定した場合は、サイトのトップディレクトリ配下すべての URL で PWA が稼働しますが、”/pwa/” と指定した場合は、”/pwa/” 配下の URL に対してしか PWA は機能せず、このときは、”/blog/” ディレクトリなどの違うパスの URL のコンテンツはキャッシュしたりすることはできません。
    デフォルトでは ServiceWorker は自身が配置されたディレクトリの同列および配下のみに対してのみ機能します。
  • display
    画面の表示形式を定義します。
    画面全体にコンテンツを表示する “fullscreen” 、ブラウザのUI部分（アドレスバーなど）を非表示にする “standalone”、 そのままブラウザ表示にする “browser” などがあります。
  • orientation
    画面の向きを指定します。
    横向きで表示する “landscape”、縦向きで表示する “portrait” などが指定できます。
  • background_color
    PWA の背景色。
    スプラッシュ画面では背景色に使用されます。
  • theme_color
    PWA のテーマカラー。
    スプラッシュ画面ではヘッダー部分の背景色に使用されます。

どんな設定があるのか、どんな機能が使えるのか、この二つのファイルの内容をざっくりとでも理解できたら PWA の全容が見えてきたような気がしませんか？

続きはまた次回！