ブラウザバックした際に
・ページを閲覧したのにステータスが変わっていない
・一度見たはずの通知が消えてない
等の問題に対処する方法です。
解決方法
その1: PerformanceNavigationTimingを使う
PerformanceNavigationTimingとは、ブラウザーの文書ナビゲーションイベントに関するメトリックを格納および取得するためのメソッドとプロパティを提供するインターフェース。
getEntriesByTypeからリスト形式でnavigation オブジェクトを取得し、読み込みタイプを取り出します。
ブラウザバックを表すのは、back_forwardなので、以下のように記述すればOK。
Sample
var perfEntries = performance.getEntriesByType("navigation");
var type = null;
perfEntries.forEach(function(pe){
// 読み込みタイプを取得
type = pe.type;
});
// ブラウザバックかどうかの判定
if(type == 'back_forward'){
// 実行したい処理を記述
}
なお、読み込みタイプには、以下の4種類があります。
| 戻り値 | 条件 |
|---|---|
| navigate | 通常読み込み 【例】URL直打ち, フォーム送信後の遷移 |
| reload | 更新 【例】更新ボタン or F5キー押下時 |
| back_forward | 戻る or 進む 【例】戻るボタン or 進むボタン |
| prerender | 事前のページ読み込み 【例】linkタグでrel="prerender"を使用 → 発生するのはこの場合のみ |
その2: PerformanceNavigation.typeを使う
PerformanceNavigation.typeは、対象ページへの移動方法を表すunsigned short型の定数です。
ブラウザバックの判定は以下のように行います。
Sample
// ブラウザバックかどうかの判定
if(performance.navigation.type == performance.navigation.TYPE_BACK_FORWARD){
// 実行したい処理を記述
}
なお、PerformanceNavigation.typeで、使用できる値および定数名は以下の通り。
| 値 | 定数名 | 意味 |
|---|---|---|
| 0 | TYPE_NAVIGATE | 通常読み込み |
| 1 | TYPE_RELOAD | 更新 |
| 2 | TYPE_BACK_FORWARD | 戻る or 進む |
| 255 | TYPE_RESERVED | その他の方法 |
TYPE_RESERVED以外は、PerformanceNavigationTimingと同じですね。
ただし、このインターフェースは非推奨となっているので、原則その1のPerformanceNavigationTimingを使うようにしましょう。