title: How to get check if a page gets reloaded with js
body: <p>How do you now check if a page gets reloaded?</p>
  <p>It used to be like this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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");
  }</code></pre>
  </div>
  </div>
  </p>
  <p>But now I found out that navigation type is deprecated:
  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation</a></p>
  <p>So then I checked the replacement: <a href="https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming</a></p>
  <p>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?</p>
  <p>I also tried this after I had read it:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    if (PerformanceNavigationTiming.type == "reload") {
      alert('page reloaded')
      }</code></pre>
  </div>
  </div>
  </p>
  <p>But then the alert won't be displayed.</p>
  <p>And after that I tried this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    if (PerformanceNavigationTiming.type == PerformanceNavigationTiming.TYPE_RELOAD) {
      alert('page reloaded')
      }
      </code></pre>
  </div>
  </div>
  </p>
  <p>But then It would display the alert also without a page refresh.</p>
  <p>Then the last thing I tried:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  const pageAccessedByReload = (
        (PerformanceNavigationTiming &amp;&amp; PerformanceNavigationTiming.TYPE === 1) ||
          window.performance
            .getEntriesByType('navigation')
            .map((nav) =&gt; nav.type)
            .includes('reload')
      );
      
      alert(pageAccessedByReload);</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>