I've been playing around with this some more and discovered a number of things.
First of all, it didn't take me long to figure out that I was simply making a syntax error. The correct way to use window.onAppear and window.onDisappear is:
window.onAppear = myFunction;
myFunction function() {
// do something...
}
However, this is where things got tricky because the behaviour is inconsistent between iOS and Android. My setup includes a collection with a dynamic banner at the top and a bunch of articles below. My dynamic banner executes some logic whenever it comes into view, i.e., when it is first loaded; when a user navigates around the articles in the collection and comes back; when the app is brought back into the foreground.
Here is the behaviour I observed:
1) When you swipe away from the collection with the dynamic banner and come back, the onAppear and onDisappear are triggered correctly on iOS and Android. Good.
2) When you click on an article in the collection with the dynamic banner and come back, iOS only triggers onDisappear. onAppear is not executed at all. However, Android triggers both events correctly.
3) When you bring the app into the background, then bring it back, iOS only triggers onAppear. onDisappear is not executed at all. However, Android triggers both events correctly.
In order to fix case #2, I came across the following event:
document.addEventListener("visibilitychange", myFunction, false);
When it's fired, document.visibilityState is set to either "hidden" or "visible". This works on iOS and Android when you click on some article and then come back. However, it's important to note that this event is not fired on Android when you swipe between content, as in case #1. And, it is not fired when you bring the app into the background and foreground on iOS, as in case #3. Therefore, relying on this event is only a workaround to fix case #2.
In order to fix case #3, I am using the following event:
document.addEventListener("pause", myFunction, false);
It is fired when the app is brought into the background on iOS. However, it doesn't work on Android at all. The "resume" event doesn't work on Android as well.
My conclusion is that I need to use a combination of all these events in order to cover all cases on iOS and Android. In addition, because some of these events may be triggered at the same time, in order to avoid calling the same function repeatedly, I found it useful to use Lodash debounce, (Lodash Documentation).
