Support the Back Forward Cache

[Tiggerito]

https://web.dev/bfcache/

The Back Forward Cache (bfcache) is a way to give users an instant page response when they browse back and forward. If I site does not support it, the page has to be reloaded from the server.

It is supported by Chrome, Firefox and Safari.

The Chrome browser now includes a way to test if a page supports the bfcache. I tested a few stores and they had some common issues:

The first was that there was code using the unload handler, which disables the bfcache. I tracked it down to what I think is some code in the jQuery bundled with the theme. The package code looks like this:

	// Accessing iframe documents after unload throws "permission denied" errors (jQuery #13936)
	// Support: IE 11+, Edge 17 - 18+
	// IE/Edge sometimes throw a "Permission denied" error when strict-comparing
	// two documents; shallow comparisons work.
	// eslint-disable-next-line eqeqeq
	if ( preferredDoc != document &&
		( subWindow = document.defaultView ) && subWindow.top !== subWindow ) {

		// Support: IE 11, Edge
		if ( subWindow.addEventListener ) {
			subWindow.addEventListener( "unload", unloadHandler, false );

		// Support: IE 9 - 10 only
		} else if ( subWindow.attachEvent ) {
			subWindow.attachEvent( "onunload", unloadHandler );
		}
	}

I'm not sure what can be done with this one?

The other issue is the presence of this header in the HTML response. no-store is another no-no for bfcache.

cache-control: no-store, no-cache, must-revalidate

CloudFlare controls those headers. It could be CloudFare adding it or passing it on from the original response. Maybe just the no-cache is enough. Is a no-store required?

[ImTheDeveloper]

Good spot this was on my to do list to sort out on our store. I've noticed Shopify themes seem to be quite snappy with the back button caching well but our BC stores suffering the full reload which is quite painful.