【Expo Web】ResizeObserver ポリフィルのテスト方法

前提条件

開発中の Expo Web をビルド( npx expo export:web )してローカルでサービスを提供 ( npx serve web-build --single ) します。

$ npx expo export:web
Exporting with Webpack...
Compiled with warnings

asset size limit: The following asset(s) exceed the recommended size limit (586 KiB).
This can impact web performance.
Assets: 
  static/media/MaterialCommunityIcons.5d42b4e60858731e7b65.ttf (1.09 MiB)
  static/js/846.fcc4abd9.js (893 KiB)
...

$ npx serve web-build --single

   ┌───────────────────────────────────────────┐
   │                                           │
   │   Serving!                                │
   │                                           │
   │   - Local:    http://localhost:3000       │
   │   - Network:  http://192.168.11.12:3000   │
   │                                           │
   │   Copied local address to clipboard!      │
   │                                           │
   └───────────────────────────────────────────┘

※ Expo Webアプリ開発の全体の記事はこちら！

iOS Safari で実行中の Expo プロジェクトを開く

前提条件の結果、http://192.168.11.12:3000 リンクに接続可能な状態だとします。（⬆︎）

iPhone などでこのリンクを Safari で開いておきます。

デバイスを Apple コンピュータに接続する

USBケーブルを使用してその iPhone を MacBook などに接続します。

パソコンで Safari を開き、[開発] > [デバイス] > [ホスト] に移動する

※ MacBook などで Safari を開いたときに 開発 メニューが見当たらない場合の対応方法はこちら、デバイスで Webインスペクタを有効にする 方法は こちら をご覧ください。

Safari 192.168.11.12 のように表示されるので、クリックして Webインスペクタ を起動します。( IP アドレスは環境によって異なります。)

警告有無を確認する

❶ Webインスペクタ ログに「onLayout は ResizeObserver に依存しています…」という警告がないことを確認します。

❷ iPhone などで Expo Web プロジェクトのリンクを Safari で開きます。

デバイスを横 <–> 縦 向きに変えながら画面の高さや幅が問題なく表示されるか確認します。

あとがき

経験上、このポリフィルを適用する前はデバイスを縦から横向きに変えたら、画面の高さが縦の時の高さのままでした。適用後はもちろんクリアです！