title: Differentiate between browser close and refresh event in browser?
body: <p>In <strong>Angular</strong> 4 application, I am dealing with one API call <strong>to save details on browser close activity and refresh in database</strong> . I am able to succeed in API call and save these details on browser close or refresh activity. <strong>But can not able to differentiate those events whether its occurred due to browser close or refresh</strong>. How to deal with that ? My current code in hostlistener of <strong>app.component.ts</strong> as follows </p>
  
  <pre><code>@HostListener('window:beforeunload', ['$event'])
  public beforeunloadHandler($event) {
      const browerLocation = $event.srcElement.location['href'];
  
      const browercloseinfo = {
          'ClientID': this.clientDetails.ClientID,
          'TestID': this.testData ? this.testData.TestID : 0,
          'BrowserLocation': browerLocation
      }
  
      if (this.router.url.indexOf('list') !== -1) {
          browercloseinfo.TestID = 0;
      } else {
          browercloseinfo.TestID = this.testData ? this.testData.TestID : 0;
      }
  
      const xmlhttp = new XMLHttpRequest();
      xmlhttp.open('POST', url,false); // False used for making call 
      synchronously 
      xmlhttp.setRequestHeader('Content-type', 'application/json');
      xmlhttp.send(JSON.stringify(browercloseinfo));
  }
  </code></pre>
  
  <p>These are the possible other ways I already tried but not useful in my case</p>
  
  <pre><code> if (window.performance) {
       console.info("window.performance works fine on this browser");
   }
   if (performance.navigation.type == 1) {
      console.info( "This page is reloaded" );
  } else {
      console.info( "This page is not reloaded");
  }
  </code></pre>
  
  <p>It's printing only refresh event on console though i had done browser close or refresh </p>
  
  <pre><code>window.onbeforeunload = function (e)
  {
     e = e || window.event;
     var y = e.pageY || e.clientY;
     if (y &lt; 0) {
     console.log("Do You really Want to Close the window ?"
  }
  else {
    return "Refreshing this page can result in data loss."; 
    }
  }
  </code></pre>
  
  <p>Its giving undefined value of Y variable  on click of refresh or close.</p>
  
  <p>Please help me from my first code.</p>