[Javascript] タブレット端末などでWebブラウザを落としたかの判別処理
公開日：
最終更新日：
要約
タブレット端末や古いブラウザで、スリープや別アプリ遷移時にダウンロードデータが保持されない問題を検証し、復帰時にデータ再読み込みが必要と判明。JavaScriptのsetInterval()を使い、タイマーのズレを検出することでスリープ復帰を判別する方法を紹介する。500ms以上のズレを検知した際に復帰処理を行うサンプルコードも掲載。
最近色々とこねくり回していると，古いブラウザでは，タブレット端末が一度スリープ（や，別アプリに遷移）した場合，ダウンロードしていたデータに「保持されないことがある」ことが分かった。
そこで，スリープから復帰した際に，もう一度データを読み込めば良い。
その「スリープから復帰した際」かどうかを，いかにチェックすれば良いか。
そのためには，setInterval() をつかって，ブラウザ内部でカウントしている値にズレがないかどうかを確認すれば良い。
JavaScriptでスマホがスリープから回復した時にカウントアップ(ダウン)を調整する
上のページが参考になる。
自分の場合は，10msごとにチェックするタイマーがあるので，そこで，下のような関数を走らせることにした。
checkTimeout() {
const Limit = 500; // 500ms
const Now = Date.now();
const Diff = Now - this.$TimeChecker; // $TimeChecker は setInterval で 10msごとに 10 加算される
if (Diff > Limit) {
// 500msec 以上のズレが生じた場合
// ~~ ここでスリープからの復帰処理
}
// 比較する DateTime を更新
this.$TimeChecker = Date.now();
}