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

5 min readMar 30, 2018

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

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

Progressive Web Apps on iOS are here 🚀

medium.com

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

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

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

ネイティブアプリではできて、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のその他の注意点

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