Pfthb

need some of your help guys. Im trying to prompt the user whenever he/she tries to navigate away from the current browser (refresh, close tab and window, clicking back button from the browser). Im having this issue on IOS mobile that it does not fire pagehide and/or beforeunload.

Im aware that safari does not support beforeunload event anymore so Ive added an event listener for pagehide with similar logic, and that too does not fire. Code is written in angular.

Approach tried:

// Method decorator, Did not work for both
@Hostlistner(window:pagehide), @Hostlistner(window:beforeunload)

doSomething(event:any)
 event.returnValue = true;
 return true;


// Component host property, Also tried this on beforeunload, did not work for both
@Component(
...
host: "(window:pagehide)" : "doSomething($event)"
)

// Plain javascript, have tried pagehide too, did not work for both
window.onbeforeunload = (event) => 
 event.returnValue = true;
 return true;
;

//Also tried binding it via addEventListener method of window/document, did not work for both
window.addEventListener('beforeunload', (event) => 
 this.log("before unload");
 event.returnValue = true;
 return true;
);

have been trying it via stackblitz: https://stackblitz.com/edit/angular-qkezha?file=src%2Fapp%2Fapp.component.ts

Device use for testing the issue: IPhone 6, IOS 12.1

Issue arise on Mobile IOS both for Chrome and Safari, have not tested it in yet in Firefox but I doubt that it will work on there too. Code works on Android Chrome and Windows Desktop Chrome

I've been on this for several days now. Searching here and there. Any help or hints is very much appreciated. Thanks guys!