スマホのホーム画面を見る。アイコンが並んでいて、押せば開く。並んでいる以上どれも同じ「アプリ」に見えるが、実はその中に、正体がWebサイトのものが混ざっていることがある。それがPWAだ。

比較のために、まず普通の方を見ておく。App StoreやGoogle Playから入れるものをネイティブアプリと呼ぶ。その端末専用に作られていて、カメラや位置情報を深く使えるかわりに、iPhone用とAndroid用を別々に作り、それぞれストア審査を通す必要がある。数日待たされ、直しを求められればやり直し。登録料も毎年かかる。

PWAはここを丸ごと飛ばす。作るのはWebサイト1つだけ。相手にURLを渡し、ブラウザのメニューからホーム画面に追加してもらえば、それでインストール完了になる。自分や家族だけで使う道具を作るなら、この身軽さは大きい。

では、ただのWebサイトが何をするとアプリらしくなるのか。鍵はmanifest.jsonという小さな設定ファイルにある。「アプリの名前はこれ」「アイコンはこの画像」「開いたら全画面にして」「背景色はこれ」——そう書いた紙を一枚置いておくと、ブラウザはそれを読んで、このサイトをアプリとして扱ってよいと判断する。

中でも効くのがスタンドアロン表示の指定だ。これを書いておくと、ホーム画面から開いた時にアドレスバーもタブも消える。人が「アプリだ」と感じる決め手は、ほとんどここにある。ただ、消えているのは見た目だけで、動かしているのはさっきまでと同じブラウザ。だからPWAは「見せかける技術」なのだ。

見た目の部品はあと3つ。apple-touch-iconを用意しないと、ホーム画面にはその時の画面のスクショが縮小されて置かれてしまう。スプラッシュ画面は起動の一瞬に出る名前とロゴの画面で、これもmanifest.jsonの中身から自動で組み立てられる。テーマカラーを背景と揃えておくと、画面の上端に白い帯が残らずに済む。どれも小さな設定だが、揃うと一気に「ちゃんとしたアプリ」の顔になる。

見た目の裏側で働いているのがService Worker。画面には何も出さず、ブラウザの裏で待機している小さなプログラムだ。一度読み込んだ画像や文章を手元に取っておき、次に必要になった時はインターネットに取りに行かず、取っておいた方を渡す。Cloudflareのところで出てきたキャッシュと同じ考え方だが、置き場所が世界中のサーバーではなく、その人の端末だという点が違う。

おかげで、電波のない場所でも一度開いた画面なら出せる。これがオフライン対応。ただし裏返しの癖もあって、更新したはずなのに古い画面が出続けることがある。取っておいた方を渡しているのだから当然で、たいていは一度閉じて開き直せば新しい方に入れ替わる。

弱点もはっきりしている。Web Push（プッシュ通知）はPWAでも送れるが、iPhoneでは「ホーム画面に追加されている場合のみ」といった条件がつき、ネイティブアプリほど自由ではない。通知が中心になる道具を考えているなら、ここは最初に確かめておく場所だ。

もう一つ、忘れやすい落とし穴。多くの手作りアプリは、進み具合や入力内容をlocalStorageに保存している。サーバーがいらないので手軽なのだが、保存先はその端末のブラウザの中だ。別のスマホで開いても記録は出てこないし、機種変更で消える。アイコンが並んで全画面で開いていても、中身がブラウザである以上、この性質からは逃げられない。

まとめるとこうなる。manifest.jsonが「アプリだ」と宣言し、スタンドアロン表示がブラウザの枠を隠し、Service Workerが電波のない時間を埋める。この3つで、Webサイトはアプリの顔をする。中身は最初からずっとブラウザのまま——それを分かった上で使うのが、PWAとの正しい付き合い方だ。

アプリのように見せる技術