How to detect Browser Refresh using Angular

Question

In my current application, whenever the user clicks on the Refresh button on the Browser, the application is getting loaded again and re-directing the user to the Home Page. I got a requirement to stay on the same page (without loading the application again). I have gone through many links in StackOverflow, but I could not find out an exact solution which I am looking. Any help will be appreciated.

I am using angular 1.3.17 and $stateProvider for routing between the states. I am storing all the data in the $rootScope and whenever user clicks on refresh, $rootScope is getting destroyed and application has to be reloaded again

My objective is to prevent app loading and load only the page which user is currently using.

Answer 1

If you can detect the page and data to recover and display through rooting, I think it's the right solution. otherwise you can look for a plugin for stored the data needed in the localstorage. on loading the page you can use the stored data to redirect users to the page provided

Answer 2

For good reasons there is no way to prevent the user to reload/leave the page. But there are two events that will be fired before the reload and you could make the browser asking the user to stay.

angular.element($window).on('beforeunload', ()=>{
   var askUserToLeave = true /*your condition here*/; 
   if (askUserToLeave) {
      return '';/*let this empty, cause newer browser dont care about the string input*/
   }
});

If the user confirmed the page-leave you are still able to do final stuff before the reload

angular.element($window).on('unload', ()=>{
   //your code here
   //e.g. save the $rootscope to localstorage/sessionstorage
});

As mentioned before you are able to react (and prevent!) on route-changes (fireing when user clicks on link-button on your page, but it doesnt help when user reloads via browser).

$rootScope.$on('$routeChangeStart', function (event, next, current) {
   if (true/*your condition here*/) {
      event.preventDefaults()
   }
});

In the end saving much stuff on $rootScope isnt an elegant way, and you are losing the benefit of angular to encapsulate. If you want to make some(!) information "reload-proof" i suggest to save them in the sessionStorage (is deleted when tab is closed) or the localStorage (persists, it just get deleted when you clean browser-cache or deleted in your code). I highly recommend using ngStorage to work with sessionStorage/localStorage just like this:

$localStorage.foo = 'bar';
$sessionStorage.bar = 'foo';
//reload
console.log($localStorage.foo);//outputs: bar
console.log($sessionStorage.bar);//outputs: foo

https://github.com/gsklee/ngStorage

You can install it that way: npm i -S ngStorage

good luck :)

Answer 3

There isn't any valid way to prevent the user from reloading the page. The best way to tackle the data not to be destroyed from $rootScope is to store all the data in localStorage, and each time the app is loaded again , the needed values from $rootScope should be assigned from localStorage.

So my point is store essensial values in localStorage like

let neededData = JSON.parse(localStorage.getItem('yourData'));

and each time the app is reloaded, keep a function in ngOnInit() of your app, that will assign the needed values from local storage to the $rootScope variables like

this.$rootScope.data = localStorage.getItem('yourData');

hope it helps!

Answer 4

// Example in the constructor of you App Component

constructor(private router: Router) {
  this.subscription = router.events.subscribe((event) => {
    if (event instanceof NavigationStart) {
      browserRefresh = !router.navigated;
    }
  });
}

Answer 5

The way is to use prop record in raComponents. It overrides default RecordContext.