12

I have this code in order to know if the page is reload by the user, unfortunately is deprecated. I want to know if angular has this approach.

if (performance.navigation.type === 1) {
   console.log('is refreshed')
}

if (performance.navigation.type === 0) {
   console.log('the user is arrived')
}  

3 Answers 3

17

performance.navigation was deprecated. To get navigation type you can use getEntriesByType

Example

console.log(performance.getEntriesByType("navigation")[0].type)

The type value can be

enum NavigationType {
    "navigate",
    "reload",
    "back_forward",
    "prerender"
};

See more: https://w3c.github.io/navigation-timing/#sec-performance-navigation-types

9

Not specific to Angular, but this API has been replaced by the PerformanceNavigationTiming one, which also has a type property, but which returns a string instead of a numerical code.

However I just noticed that Chrome won't expose this for iframes, which will always output "navigate".

The following snippet won't work in Chrome, please try this plnkr instead, in external view.

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

console.log( entries.map( nav => nav.type ) );

rel.onclick = e => location.reload();
<button type="button" id="rel">reload</button>
<a href="404">go to 404 (come back with your browser's back button)</a>

1
  • Nice one, though mind that "This is an experimental technology, expect behavior to change in the future."
    – Paolo
    Commented Jan 19, 2021 at 11:59
5

I want to add that running:

performance.getEntriesByType("navigation");

returns an empty array in Safari

1
  • 1
    same issue for me in Safari, were you able to find a solution? Commented Nov 16, 2021 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.