trigger unload event in iframe app when parent application tab closes - javascript

I have two apps, App1 and App2.
App2 is embedded as an iframe in App1, so App1 is parent app which embeds App2.
When user closes App1 from browser, I want to trigger an api in App2.
I tried using 'unload' event in App2, but that is not getting triggered when App2 closes (am checking by putting debugger point on event listener function, which gets called when standalone App2 gets closed).
Is there a way to accomplish this? Thanks

Historically trying to make asynchronous requests in unload events has never been reliable
For that reason navigator.sendBeacon(url, data) was created.
It works in the background even after page or tab is gone and helps solve a lot of the reliability problems of using unload events.
With the sendBeacon() method, the data is transmitted asynchronously when the User Agent has an opportunity to do so, without delaying unload or the next navigation.
I've never used it in the disappearing iframe scenario like yours but believe it would solve your issue

Related

Correctly handling the BFCache in react

I'm showing a loading screen (state) before redirecting to an external url (payment provider), since they tend to load for a while.
If the user chooses not to complete the payment and goes history.back() (Gesture, back button, ...) the browser pulls the page before from the BFCache, including the loading state, and the user will be "stuck" loading forever.
How would you suggest handling that? Persisted loads can be detected using the pageshow event, but I'm not sure if that is the react way to handle the case.
Persisted loads should be handled manually. In your case you should handle the
loader state based on the event property persisted from pageshow event handler.

expo-linking: Linking back to app doesn't trigger eventListener on iOS, works fine on android

I’ve been struggling for days trying to figure out why the Linking eventListener doesn’t seem to work. I am setting up the event listener correctly:
Linking.addEventListener(“url”, handleStravaRedirect);
where, “handleStravaRedirect” is the callback function to be called after the user grants my app permission on the 3rd party website. The problem is, this function never gets called after the redirect back to my app. I thought I was doing something wrong, but when I tried the auth flow on android, the event handler triggered as expected.
Are there any extra steps I need to do to make Linking work on iOS? It seems like iOS handles the app being pushed to the background & the redirect differently than android handles it, almost like the Linking eventListener doesn't even know the user left the app in the first place.
Other information:
To make the Auth Request and open the web browser, I’m using: AuthSession.useAuthRequest
When I log “Linking.addEventListener” right above where it gets linked, the function is there and I receive no errors that adding the event listener failed, So I’m assuming that part is set up properly and the problem is purely on reopening of my app from the browser.
I’m having the same issue in Dev when I’m using the "exp:// " scheme and in Testflight when I use my custom “herofit://” scheme.
EDIT: This seems to be very similar to the issue I'm having
https://forums.expo.dev/t/expo-deeplinking-issue-with-addeventlistener/2254/14
I resolved my issue. I was unable to read the response because, I was using the “AuthSession.useAuthRequest” hook, and trying to listen to the response with “Linking.addEventListener”. Instead, I needed to to listen for the response with “response”, which was one of the methods returned on the useAuthRequest hook.

Prevent 'beforeunload' event being fired on window.location

I have an analytics service which uses
window.addEventListener('beforeunload', endSession);
to record the user navigating away from the app.
In another part of the app we have downloading functionality, using
window.location = urlOfItemToDownload;
This causes the beforeunload event to trigger, which is undesirable.
There are many downloads in the app so toggling a boolean variable isnt so scalable. Is there any way around it?

Nativescript - Running code when app is close

I would know if, using Nativescript, is it possible to create an application that on specific event (onclick) "register" a javascript function that will run always and indipendently from the app (this means either if the app is open or close) until another event "unregister" the function.
If it is possible can you direct me to the right construct to manage this situation? I heard about workers but i cant understand is can use it to do this.
you can use background-tasks which will run when the app is sent to the background.. for a long term execution you would need the user permission.
nativescript docs: https://docs.nativescript.org/core-concepts/ios-runtime/how-to/BackgroundExecution
edit: you can wake a closed app into the background in respond to events.. (notification..etc) so a running app is either an active foreground app(visible on the screen) or a background app(running but not active, can be seen from the app switcher)..

javascript new fullscreen API could not call using kinect's event

I'm trying to call element.requestfullscreen() function but i get following warning on mozilla console..
Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler.
I know what it means but how can still i call it using that event which is not connected to any element?
You're receiving the error because requestFullScreen requires a user action (generally a click, or key press) to launch into full screen. This is to prevent sites completely hijacking your browsing experience, and from embedded (or untrusted) content from trying to launch full screen, without proper action.
In order to fix this, you'll need to have the requestFullScreen trigger on a chain, that starts with that user action.
Here is a link to the relavent security/privacy considerations of full screen in the w3 spec.

Categories