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.
$(window).on('load', () => {
if(window.location.hash) {
var count = window.location.hash.split('=');
if(count && count.length > 1) {
change_total(count[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:
$.get(uri + '?_=' + new Date().getTime())
Leave a Reply
You must be logged in to post a comment.