How do you now check if a page gets reloaded?

It used to be like this:

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
  console.info( "This page is reloaded" );
} else {
  console.info( "This page is not reloaded");
}

How do you now check if a page gets reloaded?

It used to be like this:

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
  console.info( "This page is reloaded" );
} else {
  console.info( "This page is not reloaded");
}

But now I found out that navigation type is deprecated: https://developer.mozilla/en-US/docs/Web/API/Performance/navigation

So then I checked the replacement: https://developer.mozilla/en-US/docs/Web/API/PerformanceNavigationTiming

Even after reading it it's still not very clear on how I could acplish this. So how does the new way work of checking if a page gets refreshed?

I also tried this after I had read it:

    if (PerformanceNavigationTiming.type == "reload") {
    alert('page reloaded')
    }

But then the alert won't be displayed.

And after that I tried this:

    if (PerformanceNavigationTiming.type == PerformanceNavigationTiming.TYPE_RELOAD) {
    alert('page reloaded')
    }
    

But then It would display the alert also without a page refresh.

Then the last thing I tried:

  const pageAccessedByReload = (
      (PerformanceNavigationTiming && PerformanceNavigationTiming.TYPE === 1) ||
        window.performance
          .getEntriesByType('navigation')
          .map((nav) => nav.type)
          .includes('reload')
    );
    
    alert(pageAccessedByReload);

But this also gives me an alert either false when it's not reloaded and true when it is reloaded. And I only want that alert when the page is reloaded.

• javascript
• refresh

• Did you read check-if-page-gets-reloaded-or-refreshed-in-javascript? – ASDFGerte Commented Jan 20, 2022 at 10:18
• That won't work since performance.navigation.type is deprecated – SpringerJerry Commented Jan 20, 2022 at 10:20
• So i guess you didn't read it, even now. – ASDFGerte Commented Jan 20, 2022 at 10:22
• 1 That I have to use PerformanceNavigationTiming.type is known to me yes. But it was not clear to me that you only literally had to replace the words from performance.navigation.type to PerformanceNavigationTiming. As I didnt see that written down anywhere litteraly just like that. – SpringerJerry Commented Jan 20, 2022 at 10:26
• Yes you are right, thats weird... – SpringerJerry Commented Jan 20, 2022 at 10:33

3 Answers 3

From MDN reference 2022: Navigation Timing Level 2 specification

const navigationType = 
    (window.performance.getEntriesByType('navigation')
        [0] as PerformanceNavigationTiming).type;

const isPageReload = navigationType === 'reload';
const isNavigation = navigationType === 'navigate';
const isBackForward = navigationType === 'back_forward';
const isPrerender = navigationType === 'prerender';

You must remember to always pay attention when reading a new API docs, type in PerformanceNavigationTiming is a string and not a number so the correct way would be:

if (window.PerformanceNavigationTiming) {
  console.info("window.performance works fine on this browser");
  
  if (PerformanceNavigationTiming.type === "reload") {
    console.info("This page is reloaded");
  } else {
    console.info("This page is not reloaded");
  }
}

I have finally found a solution:

  const pageAccessedByReload = (
      (PerformanceNavigationTiming && PerformanceNavigationTiming.TYPE === 1) ||
        window.performance
          .getEntriesByType('navigation')
          .map((nav) => nav.type)
          .includes('reload')
    );
    
    if (pageAccessedByReload == true) {
    alert(pageAccessedByReload);
  }

Now it will only show when the page is refreshed.