visibilitychange。ウィンドウ復帰時に表示を変更する方法。サーバー時刻同期復帰。

今回は頭を捻らされた問題を取り上げる。
JavacSript(以下JS)ではバックグラウンド実行されることによって、
ユーザーの実行環境下によってはセーフモードが働き、
JSが期待した動作を発揮しないことがある。
これを回避することはChatGPTに聞いてみたところ難しいらしい。

今回は問題となったのは時刻のサーバー同期である。
プログラムの詳細は省くが
カウントアップ形式によってサーバーから受け取ったデータをJSで回していた。
しかしユーザーによってウィンドウ遷移されると、
JSがバックグラウンド化し、期待した時刻を返さない。

そこで、ウィンドウが復帰したタイミングで発火してページを再リロードすることで、
これらの問題を解決した。

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
        //console.log("復帰処理");
    }
});

復帰処理はAJAXを使ってページのbody要素を丸置き換えした。
これにより、時刻がサーバーと完全に同期されるようになった。