iOS13とiPadOSに備える（フロントエンド） #JavaScript

もうじきiOS13、iPadOSが一般公開されますね。
みなさんは自身のサービスで動作確認済ませてますか？

この記事では自分が観測した要注意事象と、それに対する対処を紹介します。
※ iOS13 beta8時点の情報です。

要注意

プライベートモード判定の裏技が使えなくなった

プライベートモード判定しているサイトは要注意です！！

Apple Developer Forumsにもある内容ですが、iOS11とiOS12では下記のコードでWebSQLがエラーになる場合はプライベートモードと判定することが可能でした。

var isPrivate = false;
try {
  window.openDatabase(null, null, null, null);
} catch (_) {
  isPrivate = true;
}

しかし、Safari13ではWebSQLのサポートが終了し、プライベートモードを判定するすべがなくなりました。

ちなみに！
Safari13で上記コードがどのように動くかというと・・・

window.openDatabaseが存在しないため常にisPrivate = trueとなります。
プレイベートモードユーザーのアクセスを制限しているようなサービスの場合、Safari13のユーザー全てがアクセス不可となり大惨事です。

Safari13未満だけでもプライベートモード判定をしたい場合は、今のうちに次のように書き換えましょう。

var isPrivate = false;
if (window.openDatabase) {
  try {
    window.openDatabase(null, null, null, null);
  } catch (_) {
    isPrivate = true;
  }
}

ちなみにChromeでも判定用の裏技がありましたが、最新バージョンのChrome76で既に潰されています。
Chromeのシークレットモード、Webサイト側での検出ができないように修正へ - Engadget 日本版

iPadOSはデフォルトのUserAgentがmacOSと同じになる

UserAgentでiOS判定などを行なっているサイトは要注意です！！

iOS Safari13には「デスクトップ用WEBサイトを表示」というオプション機能が追加されていて、iPadOSはそれがデフォルトでONになっています。

その結果、SafariのUserAgentがmacOSと同じものになります。

実際のUserAgent

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15

「デスクトップ用WEBサイトを表示」をOFFにすると、従来のiPadのUserAgentとなります。

Mozilla/5.0 (iPad; CPU OS 13_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1

ちなみにWebViewのUserAgentもmacOSに偽装されています。

iPhoneも「デスクトップ用WEBサイトを表示」は使えますが、デフォルトOFFなので意図的に設定されない限り問題ありません。

対処としては、タッチイベントに対応しているか否かで判定可能です。
PC用Safariはタッチイベント非対応ですが、iOS Safariは対応しています。
Can I use... Support tables for HTML5, CSS3, etc

iOS判定の実装例↓

if (Safari判定 && typeof document.ontouchstart !== 'undefined') {
  // Safari かつ タッチイベント対応 = iOS
}

IndexedDBの保存容量に上限ができた

ブラウザゲームなどIndexedDBを活用しているサービスは要注意です（・・・滅多なさそうですが）

一般的には「SafariのWebストレージ上限は50MB」という情報が出回っていると思いますが、実際のところはIndexedDBには保存上限がありませんでした。
やろうと思えばストレージを食いつぶすまでデータ保存可能でした（これはこれでヤバイ）

Safari13ではついに上限が設定され、1GBあたりで容量エラーが返される事を確認しました。
1GBもあれば十分ですし、ユーザーにとっても安心ですね。

ただし！リソース削除だけでは容量エラーが解消されないという怪しい挙動になっています。
リソース削除 & Safariのキャッシュ削除 & 端末再起動まですればエラー解消できましたが・・・
ソフトウェア側の対処としては、しっかりエラーハンドリングしつつ、容量エラーになってもサービスが継続できるよう設計するしか無いですかね。

おまけ

個人的にSafari13で期待している事も紹介したいと思います。

PWAのタスクキルが真っ当な動作になった

iOS12.1まで : PWAが非アクティブになるたびにセッションが切れてしまい、サービスによっては使い物にならない状態
iOS12.2から : 非アクティブでもセッションは維持できるが、タスクキルしてもセッションを切れないという予想外の挙動
iOS13から : 非アクティブでもセッションは維持できるし、タスクキルすればセッションを切れるネイティブアプリ同等の真っ当な挙動になった

PWAのカメラ対応できそうな雰囲気だった

iOS13 beta1 PWAでもカメラが使えるようなりました
iOS13 beta2 重大なバグがあったとのことでリバートされました
iOS13 beta8 カメラはまだ使えません

対応できそうな雰囲気だったのに！リリース版で奇跡の実装を期待！

Pointer events 対応

マウス、タッチスクリーン、ペンなどのさまざまな入力を統合するべく策定されたポインターイベントがついにSafariに実装です

さらっと確認した感じ微妙な統合具合でしたが・・・近々↓の記事を更新したいと思います。
PCとスマホの Pointer Events 挙動まとめ - Qiita