ブラウザの戻るボタンを押したときの処理

ブラウザの戻るボタンを押したときの処理について質問です。
例えば、ページAにボタンのカウンターがあり、ページBにカウンターを+1するボタンがあるとします。
ページAからページBに行き、ボタンを押した後ブラウザの戻るボタンを押し、ページAに戻った時、処理が反映されておらず、再リロードすると処理が反映されるといったような場合に対処したいと思っています。
少し調べた結果、解決策として下記のようなコードを見つけたのですが、これがベストな対応なんですかね？
本来の開発の場ではどのように対応されているのか知っている方がいたら教えて下さい。

JavaScript
1window.addEventListener('pageshow',()=>{
2  if(window.performance.navigation.type==2) location.reload();
3});

参考サイト↓
https://teratail.com/questions/304935

行動規範の内容に同意します

回答1件

ベストアンサー

ブラウザバック（フォワード）時にページのロードがされずキャッシュが使われる現象について、そのキャッシュは bfcache (Back-Forward Cache) と呼ばれます。

ブラウザが bfcache を使わないようになる条件として、その対象ページが「unload ハンドラを使用している」というものがあります。

https://developer.mozilla.org/ja/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching

この挙動を用いて、少なくとも Firefox や Google Chrome では空の unload ハンドラをセットしておくことで bfcache を使わないようにすることが可能です。

js
1// ページAに書いておく
2window.addEventListener('unload', () => {});

しかしこれは一部のブラウザ（Safari / iOS Safari など）では無視されてしまうようです。そのため、bfcache が使われた場合にページリロードをするという処理を追加することがあります。

js
1// ページAに書いておく
2window.addEventListener('pageshow', evt => {
3  if (evt.persisted) location.reload();
4});

evt.persisted は bfcache が使われたかどうかを返すプロパティです。

上記を組み合わせて書いておくのがよいのではないでしょうか。

js
1// ページAに書いておく
2window.addEventListener('unload', () => {});
3window.addEventListener('pageshow', evt => {
4  if (evt.persisted) location.reload();
5});

PerformanceNavigation.type を参照すれば history.back かどうかの判定ができますが、persisted プロパティを参照するのが本質的であると考えます（なぜ過去のスレッドでは逆の結論になっているのでしょうね）。それに pageshow イベント内で処理をする必要性もないように思います。

なお、PerformanceNavigation.type は非推奨とされています。もし history.back (history.forward) かどうか判定したい場合は PerformanceNavigationTiming を参照してください。

js
1const navigation = window.performance.getEntriesByType('navigation')[0];
2// history.back または history.forward でページにアクセスされたかどうか
3const isBackForward = navigation.type === 'back_forward';