JavaScriptでブラウザリロードとURL直接アクセスの判定方法 PerformanceNavigationTiming

目次

JavaScriptでブラウザリロードとURL直接アクセスの判定方法

近年のWeb開発において、ブラウザのリロードかURLの直接アクセスかを判定する場面が増えてきました。
しかし、window.performance.navigationの非推奨化に伴い、この判定方法をどのように行うべきか迷っている方も多いかと思います。
本記事では、新しい方法を使用してこれらのアクションを判定する方法を紹介します。

PerformanceNavigationTimingの利用

PerformanceNavigationTiming インターフェースを利用します。
このインターフェースを通じて、ナビゲーションの情報を取得することができます。

const navigationEntries = performance.getEntriesByType("navigation");

if (navigationEntries.length > 0 && navigationEntries[0] instanceof PerformanceNavigationTiming) {
    const navigationType = navigationEntries[0].type;

    if (navigationType === 'reload') {
        console.log("This page was reloaded");
    } else if (navigationType === 'navigate') {
        console.log("This page was navigated directly (e.g., by entering the URL)");
    }
}

上記のコードを利用することで、ブラウザのリロードやURLの直接アクセスを簡単に判定することができます。

注意点

この方法は多くのモダンなブラウザで動作しますが、完璧な方法ではないため、実際のアプリケーションに組み込む前に十分なテストを行うことをおすすめします。

まとめ

window.performance.navigationの非推奨化に伴い、新しい判定方法を知ることはWeb開発者にとって非常に有用です。
本記事で紹介したPerformanceNavigationTimingを利用した方法を試して、より良いユーザーエクスペリエンスを提供しましょう。