PWAはiOSでも動きます

Takeshi Amano
Aug 8, 2017 · 5 min read

PWAを紹介していると「iOSでは動かないんでしょ」とよく言われます。

結論から言うとPWAはiOSでも動きます。というのもPWAは厳密な仕様として定義されているものではなく「モバイルブラウザ内でアプリっぽい動作をするもの」がまとめてPWAと呼ばれているだけだからです。

ネイティブアプリでできてブラウザベースでのPWAできない機能を補完するためにバックグランドで動作するService WorkerというJavascriptのライブラリは現在iOSでは開発中のためiOSのPWAではいくつか使えない機能がありますが、PWAそのものが動かない訳ではありません。

iOSのChromeも内部的にはSafariと同じwebkitを使っているためService Workerを使うことはできません。

GoogleのPete LePageの「はじめてのプログレッシブウェブアプリ」の記事によるとPWAには以下の特徴があると紹介されています。

  • 段階的 — プログレッシブ・エンハンスメントを基本理念としたアプリであるため、 ブラウザに関係なく、すべてのユーザーに利用してもらえます。
  • レスポンシブ — パソコンでもモバイルでもタブレットでも、次世代の端末でも、 あらゆるフォームファクタに適合します。
  • ネットワーク接続に依存しない — Service Worker の活用により、オフラインでも、 ネットワーク環境が良くない場所でも動作します。
  • アプリ感覚 — App Shell モデルに基づいて作られているため、アプリ感覚で操作できます。
  • 常に最新 — Service Worker の更新プロセスにより、常に最新の状態に保たれます。
  • 安全 — 覗き見やコンテンツの改ざんを防ぐため、HTTPS 経由で配信されます。
  • 発見しやすい — W3C のマニフェストとService Worker の登録スコープにより、 「アプリケーション」として認識されつつ、検索エンジンからも発見することができます。
  • 再エンゲージメント可能 — プッシュ通知のような機能を通じで容易に 再エンゲージメントを促すことができます。
  • インストール可能 — ユーザーが気に入ればアプリのリンクをホーム画面に残して おくことができ、アプリストアで探し回る必要はありません。
  • リンク可能 — URL を使って簡単に共有でき、複雑なインストールの必要はありません。

ちょっと長くなりますが、この各特徴がAndroidとiOSのPWAで実際どの様に当てはまるか見ていきましょうか。

段階的
PWAはAndroidやiOSのブラウザ内で問題なくアプリとして動作します。

レスポンシブ
AndroidやiOSのブラウザ内で動作するアプリはレスポンシブなHTMLを使って表示させれば各スマホのサイズに自動的に合わせて表示されます。

ネットワーク接続に依存しない
Service Workerは現在Androidでは使う事ができますが、iOSでは対応してないため、オフラインでの動作はiOSでは使えません。

アプリ感覚
Ionic Frameworkなどハイブリッドアプリを開発するためのUIライブラリをもったフレームワークを使って開発することでアプリっぽい挙動をするPWAがAndroidやiOSで動作します。

常に最新
Pete LePageの記事ではService Workerが必要みたいに書いてありますが、webアプリとして動作するPWAは基本リロードすれば常にアプリを最新の状態に保つ事ができ、ネイティブアプリで必要だったアプリ全体のアップデートも必要ありません。これはAndroidやiOSでも行うことができます。

安全
AndroidもiOSどちらのブラウザもHTTPSに対応しています。

発見しやすい
検索サイトからの流入はAndroidやiOSでもちろん可能。

再エンゲージメント可能
PWAを閉じた状態でプッシュ通知を送るにはService Workerが必要なため、現在iOSでは対応していません。

インストール可能
これはAndroidでもiOSからも可能。面白いのはiOSのChromeでは「ホームボタンにブックマークを登録する」を選ぶことはできなく、Safariでしかできない事。

リンク可能
友達からリンクが送られて来てPWAを立ち上げるのはAndroidでもiOSでも可能。
ここら辺はPWAとネイティブアプリのインストールを比較した天野の記事に詳細があります。

まとめると
こうやってみるとService Workerが必要なオフラインでの動作とプッシュ通知以外はiOSでPWAの特徴は全て満たしているのです。

ユーザーから見るとiOSで動作するPWAはリンク経由で共有したりSafariブラウザ内でアプリっぽく動作するけど、ネットが切れたりプッシュ通知はまだできないといったところでしょう。

天野もPWAのデモをiPhoneのSafariでよく見せてますが、ホームボタンに登録してそこから起動してローディングの画像が出てアプリみたいな動作すれば、これアプリだよねと言ってみんな信じてくれます。

結局エンドユーザーにとってはPWAもネイティブアプリもオタク言語でしか無いわけですから…

Takeshi Amano

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade