Mobile browsers: update element on back button - javascript

I'm using JavaScript to display a CSS3 throbber when the user navigates on a mobile browser (specifically, when they use a swipe gesture to navigate pages). However, when the browser back button is used, the throbber persists in both iOS and Android. I've tried adding the following to the body onload, but it doesn't seem to be firing.
<body onload='document.getElementById("throbber").class="off";'>
Any suggestions?

You need to listen to the Back/Forward Cache (bfcache) events: pageshow and/or pagehide. See https://developer.mozilla.org/En/Working_with_BFCache

Related

Popstate not triggering on Chrome for Android when clicking the back button

Upon clicking the back button in the browser, I would like to prevent the default behaviour of going one page back and instead do an action. I'm using the "popstate" event listener. The following function (I'm using Vue 2) works in all major browsers and even in Firefox for Android, but when I test it in Chrome for Android, it simply goes back one page without popstate being triggered at all.
mounted() {
history.pushState(null, null, <current-url>);
window.addEventListener("popstate", () => { alert(1) });
}
I tried wrapping the popstate event inside the load event and giving it a timeOut of 0, but it still didn't work specifically in Chrome for Android. The version I'm testing on is 93.
I did some more research and it seems that Chrome won't let you use popstate if there is no user interaction first. As long as you click on something or scroll down on mobile, popsate will work, otherwise it won't. I tried to simulate user interaction with click(), but that didn't work either. It seems Chrome wants genuine user interaction. I also realized this is sort of a duplicate of: Chrome popstate not firing on Back Button if no user interaction

Display loading indicator when navigating away from page on Safari

I would like to display a nice page transition when navigating between pages on a site.
I've tried using these events: beforeunload unload pagehide and also visibilitychange.
There was a webkit bug described as
visibilitychange:hidden doesn't fire during page navigations
And a workaround is listed:
using the pagehide event is the workaround
I am adding a class to the html element on these events. On Chrome and Firefox this activates my loading indicator class and the animation is displayed until the page is replaced. I get a nice loading transition between page navigation. So, in Chrome and Firefox, everything works great.
Unfortunately, I am not having any luck with Safari on iOS (iPhone or iPad) and also failing on macOS Big Sur Safari. I found a related question here: Safari change dom on before unload page however, it only discusses the beforeunload event. I am hoping that by being less specific here that a viable alternative pops up.
I have tested the css works on Safari by manually applying it and also verified my listeners are called on Safari via the javascript console. However the css change doesn't seem to be rendered. There is no transition shown on the page being unloaded before getting the new page response from the server. I've also verified it isn't related to the CSS in use by setting a simple background color without any transition or similar effects.
So far, the only way that I have been able to get Safari to render the dom change is by returning a truthy string on unload - but this prompts the user if they want to leave or not which is not my intention.
I want to avoid browser detection - however the last viable alternative I can come up with is scanning the dom for anchors, buttons, forms, etc when Safari is detected to enable the loading indicator before navigating.
Are there any other options to consider?

CSS keyframe animation not triggering when using back button on iOS device

I am running a keyframe animation on the body element of my page that fades in and out the opacity of the background. The fade in animation is run directly on the body as a CSS rule, and the fade out is triggered by setting a class to the body element, when special links a clicked. The implementation works great on Android Chrome browser, and desktop Safari, Chrome, Firefox, IE11 and Edge.
The fadeout animation also works great when I click a link from an iOS device, but once I use the native back button in Safari it seems that the page just goes back to a previous view that it saved of the last page, without running the fadein animation again. Therefore the page looks broken.
How can I handle this? can I somehow force the iOS device to reload the page when I navigate back? or Would there be another way to handle it?
Safari does not "reload" the page when you hit the back button. One common workaround is to add some code to the footer of the page to tap into the pageshow event. You could then do something like.
const reloadAnimation = () => $("#my-element").removeClass("run-animation").addClass("run-animation");
window.addEventListener('pageshow', reloadAnimation)

Detecting all possible cases of page refresh

I read these two questions:
How can I detect browser tab refresh or close using javascript
and
How do I detect a page refresh using jquery?
which suggest binding to 'onbeforeunload' and also binding on F5 and Ctrl-R key presses, which is good advice.
However, most browsers have a refresh button on their address bars, like this in Chrome:
Question is: is it possible to detect and bind to refresh event of browser's address bar's refresh button?
By binding onbeforeunload to windowlike this window.onbeforeunload it should trigger in most browsers. check this fiddle. It seems it's not supported on IOS devices.
For IOS apple docs suggest using pagehide see apple page on Handling Events.
The load and unload events may not work as expected for back and forward optimization. Use the pageshow and pagehide events instead.
Keep in mind that this will also trigger on all other kinds of navigation away from the page. Such as close, tab close, back/ forward navigation, link navigation and address bar navigation
Checking if the browser is reloading versus navigating away from the page I'm pretty confident is not possible, due to security/ privacy reasons not being able to give you the destination url. You could eliminate link presses by using it is an condition when firing the onbeforeunload.
Edit: If you need to check if the page has been reloaded however, you could use sessionvariables or cookies to store that the user has already opened the page once before.

Detect in Javascript/jQuery if mobile browser is not open or active

*I have searched online and on SO
I have a mobile site made in jQuery Mobile. If the user has navigated away from the mobile browser on their phone, (to another app), which would hide the mobile browser (but the mobile browser would still be running on their phone), I need a way in Javascript or jQuery to know when the user opens their mobile browser again.
I have packaged the mobile site as an app using PhoneGap and I currently achieve this by using the onResume() function.
You can detect when the tab or window is closed via the onunload and onbeforeunload events. These will trigger if the tab is closed, the back button is hit or an exit link is clicked.
There's a proposal to allow webapps to detect if they're in the foreground or not, the visibilitychange event, http://www.w3.org/TR/2013/REC-page-visibility-20131029/#sec-visibilitychange-event
It's partially supported, mainly by newer browsers, so depending on your needs it may work for you. http://caniuse.com/#feat=pagevisibility

Categories

Resources