iOSの11.3からのPWA対応でできるようになったこと

先日公開されたiOS 11.3そしてSafariの11.1からPWAに対する機能が強化されました。iOSのPWAではAndroidのPWAでできることが全てできるわけではないので、できることやできないことをまとめてみました。

なおこの記事を書くのに参考にしたのは以下の記事なので合わせて読んでくださいね。

今回のiOSのアップデートでService Workerが使えるようになったのはSafariブラウザのみでWeb Viewを使っているFirefox、Chrome、Fabookのアプリ内ブラウザではService Workerは動作しません。

Twitterのアプリ内ブラウザはSafari View Controllerを使っているのでService Workerが動作します。

iOSのPWAでできること (iOS 11.3以前から使えるものも入っています)

  • 位置情報
  • 方位磁石、速度メーター、ジャイロスコープなどのセンサー
  • カメラ
  • 音声出力
  • スピーチ
  • 音声合成
  • Apple Pay
  • Payment Request APIを使ってApple Payの起動

ネイティブアプリではできて、iOSのPWAではできないこと

  • オフラインのデータ容量は50メガバイトまで
  • ユーザーがPWAを数週間使わないとiOSはアイコン以外のPWAのファイルを削除するので次にアプリを起動した時はアプリの再起動がはじまる
  • Bluetooth, シリアル, ビーコン, TouchID, Face ID, ARKit, 高度計, バッテリー情報にはアクセスできない
  • バックグラウンドにいるときはコードを実行できない
  • 連絡先やバックグラウンド位置情報などのプライベートなデータにはアクセスできない。ネイティブのSNSアプリにはアクセスできない(facebookネイティブアプリを使ったログインなどが付加)
  • アプリ内課金やその他のAppleのサービスにアクセスできない
  • iPadで画面を分割して他のアプリと一緒に表示することができない。PWAはいつも全画面表示される。
  • プッシュ通知、アイコンのバッジ、Siriの統合は使えない
  • 画面回転のロック

AndroidのPWAではできてiOSのPWAではできないこと

  • Androidでは50メガ以上のデータを保存できる
  • AndroidはPWAをしばらく使わなくてもメモリの容量が足りなくならない限りファイルを削除しない。PWAがつかわれることが多い場合はPersistent Storageをリクエストできるようになる。
  • BLEデバイスからのBluetoothアクセス
  • Web Shareを使ってネイティブシェアダイアログへのアクセス
  • 音声認識
  • バックグラウンド同期とプッシュ通知
  • Web App Bannerを使ってユーザーにPWAのインストールを促す
  • Splash screenとデバイスの向きのカスタマイズ
  • WebAPKとChromeを使うことでPWAは一つしかインストールできないようになっている
  • WebAPKとChromeを使うことで、URLのintentを設定できるのでlink経由でPWAを開いた場合アドレスバーを出さないstandaloneモードで起動することが可能

iOSのPWAだけでできてAndroidでできないこと

  • インストール時にあアイコンの名前を変えることができる
  • 設定ファイル経由で設定できる。

iOSがPWAをAndroidのUXに近づけるためにiOSだけに設定が必要なものがあります。

iOSのPWAだけにしなければいけないこと

  • フルスクリーン表示にはmetaタグを使うことが必要
  • バックグラウンド同期には別の実装が必要
  • ステータスバーのスタイルにはmetaタグを使うかCSS/HTMLの指定が必要
  • バックボタンを付けないと前のページに戻れない
  • アイコンの設定にはApp Manifestからではなくapple-touch-icon linkの設定が必要。これを設定しないとアイコンがスクリンショットになってしまう。

iOSのPWAのその他の注意点

  • セッションは保存されないので、PWAに戻ってきたらリスタートされる
  • アクティブではないPWAは白いスクリーンでアプリリストに表示される
  • PWAの過去の閲覧履歴は白いスクリーンで表示される
  • iPhone Xの上の出っ張りの周りにきちんと表示させるために修正が必要

Push通知やApp Manifestへの対応などまだAndroidのPWAに比べてできないことも多いiOSのPWAですが今秋公開のiOS 12に向けてさらなる対応が楽しみですね。