ブラウザバック周辺の話

この記事は

ブラウザバック周辺の雑なアウトプットです。
結論とかオチとか無いのであしからず。

きっかけ

とあるサービスでブラウザバックをしても、画面が遷移しないバグが発生した

調査

手がかりの一つとして、バグが発生する状況で発火するメソッドの中に history.pushState(null, '', null)という処理があった。

history

ブラウザのセッション履歴を操作することができるWeb APIのインターフェース

history.pushState

ブラウザのセッション履歴スタックに状態を追加するもの。

第一引数 state

履歴エントリの状態オブジェクト。

第二引数 title

ページタイトル。
大体のブラウザで無視されるあまり意味のないプロパティ。

第3引数 url

オプション引数。
新しい履歴エントリのURL。

参考：https://developer.mozilla.org/ja/docs/Web/API/History/pushState

引数をnullにすると？

自分自身のページをストックする。
その為、ブラウザバックを実行すると popstateのイベントが実行される。

参考：http://glasses-se-note.com/disable-return-button/

つまり？

browserBackControl() {
  history.pushState(null, '', null);
}

/** アップロードフラグを監視 */
@Watch('isUploading') watchIsUploading(): void {
  if (this.isUploading) {
    this.browserBackControl();
    window.addEventListener('popstate', this.browserBackControl);
  }
}

上記のような処理があった場合、ファイルアップロード中であればブラウザバックできなくなる。

1. isUploadingフラグが変更される
2. もしisUploadingフラグ（ファイルアップロード中フラグ）が立っていればwatchIsUploading()が発火
3. browserBackControl()を呼ぶ
4. popstateのイベントを呼ぶ
5. popstateのイベントはbrowserBackControl()
6. 3番に戻る