【javascript】iPhone、Androidでブラウザを閉じる・非表示を監視して処理をする方法メモ

はじめに

今回やりたかったのはユーザー操作でページから離れるときに何か処理がしたいということ。
で、とりあえず考えられる操作としては以下
・ブラウザを終了したとき
・タブを閉じたとき
・別タブへ移動したとき
・別アプリへ移動したとき
・ホーム画面へ移動したとき

検証した端末は以下
・iOS10(Safari)
・iOS9(Safari)
・Android(標準ブラウザ)
・Android(Chrome)

検証

これらの操作を行うときに発火されそうなイベントとして、visibilityState、pagehide、unload、blurあたりが呼ばれそうなのでとりあえずこれらについて調べてみた。

で、結論から書くと以下のようになった。
iOSで直接ブラウザ閉じたときとタブを閉じたときに何か処理をするというのはできないのではないかなぁということになりました。

	HOME画面へ	別アプリ選択画面				別タブ選択画面
	HOME画面へ	表示	移動	終了	HOMEへ	表示	移動	終了
iOS9	○		○	×	○		○	×
iOS10	○		○	×	○		○	×
Android (標準)	○	○	-	-	※1	○	-	-
Android (Chrome)	○	○	-	-	※1	○	-	-

※1:対象の操作なし、-:表示時に発火されるため検証不要

実装

で、上記の結果の詳細をページ下部に書いてみたけど、以下のような実装で今回やりたいことはある程度できそう。
ただし、上述の通りiOSで直接ブラウザとタブを閉じた場合は対応できない。。。
また、リンク踏んで別ページへ遷移することも対応したかえればunload、pagehideあたりも入れておくのが無難かも

// Page Visiblity
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

if (typeof document.addEventListener != "undefined" && typeof document[hidden] != "undefined") {
 document.addEventListener("visibilitychange", function() {
    if (document[hidden]) {
        // 何か行いたい処理
    }
 });
}

// window.blur
window.addEventListener("blur", function(){
    // 何か行いたい処理
});

まとめ

全てはハンドリングできないのでそれを理解した上で使えそうだったら使う形になるかと思いました。
以上です

おまけ〜各イベント検証結果
1.document.visibilityStateイベント

	HOME画面へ	別アプリ選択画面				別タブ選択画面
	HOME画面へ	表示	移動	終了	HOMEへ	表示	移動	終了
iOS9	○	×	○	×	○	×	○	×
iOS10	○	×	○	×	○	×	○	×
Android (標準)	非対応
Android (Chrome)	○	○	-	-	※1	×	○	○

※1:対象の操作なし、-:表示時に発火されるため検証不要

2. window.pagehideイベント
android標準ブラウザでタブを閉じたときのみ発火

3. window.unload
android標準ブラウザでタブを閉じたときのみ発火

4. window.blurイベント

	HOME画面へ	別アプリ選択画面				別タブ選択画面
	HOME画面へ	表示	移動	終了	HOMEへ	表示	移動	終了
iOS9	○	×	○	×	○	×	○	×
iOS10	○	×	○	×	○	×	○	×
Android (標準)	○	○	-	-	※1	○	-	-
Android (Chrome)	×	×	×	×	※1	○	-	-

※1:対象の操作なし、-:表示時に発火されるため検証不要