Android back button and cache

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())