関連ページ
二重クリック防止のローディング画面をつくる

概要

ローカルの静的ファイルを直接ブラウザで開いてHTMLやJSを作成（以下、ローカルで作成）したが、サーバーに載せたら違う挙動をする時があったので手を動かして確認してみた。

<ひとりごと>
特にデザイナーの方からよく「HTMLをローカルで作ったからサーバーに合うように変えて使ってくださーい」と言われることがあり、その時にぶち当たる可能性があるなーとおもった。

なんで気付いたか

ローディング画面を作成した際に差異に気づいた。
ローカルで作成した時はブラウザバックでローディングが入る画面に戻ってきても再入力が問題なくできた。しかし、サーバーで実行すると、ブラウザバックして戻るとローディングが表示されたままになり入力を受け付けない状態になってしまった。

検証

下記を埋め込んで比べてみる。

<script>
  window.addEventListener("load", () => {
    alert("load called!")
  });
  window.addEventListener("pageshow", showAlert);
  function showAlert(event) {
    if (event.persisted) {
      alert("pageshow called! cached");
    } else {
      alert("pageshow called! not cached");
    }
  }
  window.addEventListener("pagehide", () => {
    alert("pagehide called!")
  });
</script>

結果

※数字は呼ばれる順番を表しています

ページを開いた時・リロード時

ブラウザバックでページに戻ってきた時

ボタンを押して別ページに遷移する時

ここからわかること

• ブラウザによって挙動が違う
• キャッシュされているため呼ばれないイベントがある
  -> サーバーを用いている場合とブラウザによってはページがキャッシュされる
• pageshow イベントはどのケースでも呼ばれる
  -> ページのキャッシュをクリアしたり、状態を一度初期化するスクリプトはこのイベントを用いる
  -> Window: pageshow イベント - mdn web docs によるとどのブラウザでも現在(2022/11)は対応しているそうだ

サンプル

html_sample - GitHub にローディング画面のブラウザバック対応の例を２つ掲載しました。
docker 環境があればローカルですぐに試せますのでお手元でお試しください。

教訓

イベント等ブラウザの仕様を確認しつつ実装する。
なるべく本番の環境に合わせた状態でデバッグする。
可能である場合はユーザーの動作環境を固定できると検証が楽になる。

更新履歴

(2023/01/15) サンプル項目追記