Mobile Safariでタブ切替、ウィンドウの表示非表示を検知する方法

iOSの標準ブラウザであるMobile Safari(以降Safari)でタブの切替時、
アプリ切り替えで起こるSafariアプリの表示非表示時を検知する方法をメモします。

 

画面の表示、非表示を検知する

コードは以下

windowのpageshow、pagehideイベントをハンドルするだけです。
これでfunction内に処理を記載すると、画面が表示、非表示に切替されるタイミングで
任意のコードを実行できるようになります。

 

 

肝心の使いドコロ

例えばWebアプリで音を鳴らしてた場合など、iOSではシステム側の音源を使うんでしまうため
Safariをバックグラウンドに持って行ってもずっと音が鳴り続けます。※Musicアプリで音楽を聞いている状態です。
それを止めるのに、pagehideのタイミングで、audio.pauseとか使えると思います。

 

あとは、現アプリから別アプリへ飛ぶ場合や、戻ってきた場合など
使う用途はいろいろありそうです。

HTMLでセンサー系のAPIも充実してきているのでその辺を扱う場合も使えそうですね。

 

また、Page Visibility APIというのがあって、そちらでも同じような雰囲気のことが出来そうでした。
が、Mobile Safariでは未実装のようです。

Page Visibility API の使用



❏❏ TOPIC ❏❏ ------------------------------------------------------------

カスタム自由!フリーECサイトパッケージ
チャットボット導入サービス
WEBシステム開発・スマホアプリ開発はSRIAへ