I was working on a weird functionality a counter for social media share. Basically after you have made the click it increases the counter by 1. The problem is that the sharing popup or window opens a new tab on Android. When you return to the original parent window it loses the dynamically update DOM and returns to the cached one (bfcache). I have tried to do some adjustments on focus return also attempted “visibilitychange” and unfortunately none of these worked out: $(window).on('focus', () => {})
$(window).on('visibilitychange', () => {})
The only way I could solve this: 1.) On the click event I have increased the counter and also stored the new total in the hash: window.location.hash = 'counter?='+newtotal;
then opening the new window (e.g. twitter share form) 2.) On load (return to the parent window) I have used the hash to retrieve the total and updated it back to the DOM.
1 |
|
It is far from perfect but it works. You can read more on this topic here and here. UPDATE ONE: Android likes to cache even ajax queries regardless of that you returned to the windows and apparently everything has been re - rendered (re drawn from cache). Something like this can be helpful as a cache buster:
1 |
|