ブラウザバックでページ表示された時にだけ処理を実行する方法

みんな大嫌いブラウザバックに関連した処理のお話し。

実現したいこと

ブラウザバックにより表示された場合にだけ、通常のページ表示とは違う処理を実行したい。
たとえば、ページ表示直後に何らかの演出が表示されるが、当該ページから離脱後にブラウザバックで戻ってきた時には（冗長なので）その演出を見せたくない場合があったりする。

やりたいのは以下ではない

• 当該ページでブラウザバックされたのを検出する（popstate）
• 通常のページ表示では実行される処理が、ブラウザバック時に実行されない事態を回避する（ = 通常表示時もブラウザバック表示時も同じにしたい）

実現方法

ページ離脱時に、history.stateに任意の値を指定して履歴を書き換えておく。
そして、ページ表示時にhistory.stateを確認して、ブラウザバックか否かを確認する。

window.onunload = function () {
  if (history && history.replaceState){
    // ページ離脱時に、Stateオブジェクトに任意の文字列を指定して履歴を書き換える
    history.replaceState('unloaded',null, null);
  }
}

window.onpageshow = function () {
  if(history && history.state === 'unloaded'){
    // ブラウザバック時にのみ実行する処理を記述する
  }
}

注意

onpageshowイベントのpersistedは使えない。
キャッシュからページ表示された場合にtrueになるのだが、表示環境が十分に早いなどしてブラウザがキャッシュを使わない場合には、falseになる。ゆえに、ブラウザバックか否かを判定する場合には使えない。