Safariでの戻るボタン使用時にJavaScriptをリセットする方法

課題

ウェブ開発において、ブラウザの戻る操作により以前のページに遷移した際に、JavaScriptの状態がそのまま保持されてしまうことは、しばしば困ることの一つです。この振る舞いは、特にSafariブラウザにおいて一般的です。

具体的な困る事例として、例えばショッピングサイトでユーザーが商品をカートに追加した後、別のページに移動してから戻るボタンで商品ページに戻ったときを考えてみましょう。

ここで問題となるのは、ブラウザがJavaScriptの状態を保存してしまうため、カートに追加された商品が表示上はカートから削除されたままになってしまうことです。この状況はユーザーに混乱をもたらし、その結果ショッピング体験が損なわれる可能性があります。

この記事では、このような問題を解決するための手段を提案します。

調査結果

調査の結果、pageshowイベントというブラウザの機能を利用することで、この問題に対処できることがわかりました。pageshowイベントは、ページがバック/フォワード キャッシュからロードされたときに発生します。

このイベントにはpersistedというプロパティが含まれています。このプロパティがtrueである場合、ページがバック/フォワード キャッシュからロードされていることが示されます。この性質を利用することで、ページがキャッシュからロードされた場合にJavaScriptの再実行を強制することが可能となります。

手順・実装内容

以下のスニペットは、ページがバック/フォワード キャッシュからロードされた場合にページをリロードするJavaScriptの実装例です：

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    window.location.reload();
  }
});

このコードをページに追加すると、ユーザーがブラウザの「戻る」を使用してページに戻るとき、そのページが自動的にリロードされます。その結果、ページ上のJavaScriptは再実行されることになり、常に初期状態から実行されるようになります。

注意点

この方法はページの読み込み時間が増える可能性があり、ユーザーエクスペリエンスに影響を与えるかもしれません。したがって、この方法を採用する前に、サイトのパフォーマンスとユーザーエクスペリエンスにどのような影響が出るかを評価することをお勧めします。