【JavaScript／TypeScript】ページがF5などで更新されたのかを判定する

JavaScriptでページがF5などで更新されたのかを判定したい！

概要

今回の記事では、JavaScriptでページがF5などで更新されたのかを判定する手順を掲載する。

表示するページが他のページから遷移してきたのか、F5ブラウザの更新ボタンでページが再読込されたのかを判定する。

環境

TypeScript 5.2.2

手順書

ページの読み込みが完了したタイミングで再読み込みを判定する例。

document.addEventListener('DOMContentLoaded', function () {
    var perfEntries = performance.getEntriesByType("navigation");
    perfEntries.forEach(function (pe) {
        if (pe.type === 'reload') {
            // 再読み込みだった場合の処理
        } else if (pe.type === 'navigate') {
            // リンクやURL直接入力などでページが読み込まれた場合の処理
        } else if (pe.type === 'back_forward') {
            // ブラウザの戻る、進むボタンによってページが読み込まれた場合の処理
        } else if (pe.type === 'prerender') {
            // rel="prerender"を使って事前にページが読み込まれた場合の処理
        }
    });
});

下記は非推奨になった過去のコード。

document.addEventListener('DOMContentLoaded', function () {
    if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
        // 再読み込みだった場合の処理
    } else {
        // 他のページからの遷移やお気に入りから、URL直入力などの場合の処理
    }
});

まとめ（感想文）

SPAで使えそうな感じかもね！