【Javascript】iPhone の Safari / Chrome でブラウザバック（「戻る」もしくは「進む」）が動かない問題を解決した

ブラウザの「戻る」（もしくは「進む」）ボタンを押したとき、ページ遷移前にモーダルを起動する処理を行っていたんですが、iPhone の Safari / Chrome では、モーダルがうまく動かないことがありました。どうやら原因は2つあったようです。

原因1. ‘use strict’; を指定していなかった。

ウェブ上で拾える解決策をいくら試してもうまくいかなかったのですが「そういえば ‘use strict’; してなかった。」と思い出して追記したところ、あらゆる挙動が劇的に変化して戸惑いました。

MDNでも割とハッキリ言及されていたので「おまじない」という認識を改めたいと思います。

厳格モードは単なるサブセットではなく、通常のコードとは意図的に異なる意味を持っています。
厳格モード | mdn web docs

Safari では、Back-forward cache（bfcache）と呼ばれる独自のキャッシュの仕組みがあるため、ブラウザバックしてもブラウザの持っているキャッシュを考慮していなかったために、思ったような挙動をしてくれなかったようです。

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // bfcache発動時の処理
  }
});

‘pageshow’ をトリガーにすると、キャッシュの有無に関わらず、関数を呼び出すことができ、キャッシュの有無自体は event.persisted によって判断することができるようになります。