How to get check if a page gets reloaded with js

Question

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.org/en-US/docs/Web/API/Performance/navigation

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

Even after reading it it's still not very clear on how I could accomplish 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.

Did you read [check-if-page-gets-reloaded-or-refreshed-in-javascript](https://stackoverflow.com/questions/5004978/check-if-page-gets-reloaded-or-refreshed-in-javascript/53307588#53307588)? — ASDFGerte, Jan 20 '22 at 10:18
That won't work since performance.navigation.type is deprecated — SpringerJerry, Jan 20 '22 at 10:20
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, Jan 20 '22 at 10:26

btx · Answer 1 · 2022-10-27T10:08:15.427

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 isBackForwarad = navigationType === 'back_forward';
const isPrerender = navigationType === 'prerender';

score 1 · Accepted Answer · answered Jan 20 '22 at 12:48

1

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");
  }
}

answered Jan 20 '22 at 12:48

Gamedroit

379
2
6

2

PerformanceNavigationTiming.type will be always undefined as it is an interface and not a class – btx Oct 27 '22 at 10:09

SpringerJerry · Answer 3 · 2022-01-20T11:23:05.583

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.

How to get check if a page gets reloaded with js

3 Answers3