WooCommerce Safari Back-Forward-Cache Problem lösen

31.10.2021 3 Minuten zum Lesen

Auf unserer Seite Fräulein Maya hatten wir das Problem, dass auf mobilen Endgeräten der Firma Apple mit Safari ein nerviges Problem für Endkunden bestand.

Problembeschreibung

  1. Kunde öffnet über die Listing-Seite (zum Beispiel Kinderhosenträger) ein Produkt
  2. Browser-Back / Swipe / Button zurück auf die Listing-Seite
  3. das zuvor geöffnete Produkt lässt sich nicht mehr klicken
  4. nur ein neu laden der Seite lässt das Produkt erneut öffnen
  5. 🤦‍♂️

Wirklich kundenfreundlich ist das nicht.

Wer ist davon betroffen?

Problem tritt auf iPhones und auf Safari (Mac) auf. An dieser Stelle der Hinweis: auf iPhone müssen alle Browser Webkit nutzen: “2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript.". Ergo betrifft es jeden Kunden auf iPhone und Mac-User mit Safari.

Ursache des Problems

Als Ursache konnte ich mithilfe eines befreundeten Entwicklers sehr schnell den sogenannten “Back-Forward-Cache” von Safari ausfindig machen. Das Thema an sich ist schon sehr alt, lässt sich hervorragend an dem aus 2012 stammenden Stackoverflow-Thread erkennen.

Back-Forward-Cache Problem in Safari und WooCommerce umgehen

Es gibt unterschiedliche Ansätze, die das Problem lösen können. Ein Ansatz von Apple selbst aus der mittlerweile archivierten FAQ war leider nicht zuverlässig.

Der empfohlene Ansatz ist eine Javascript-Lösung, welche bei uns jetzt auch gut funktioniert. Einziger Manko an der Lösung ist, dass die Scrollposition verloren geht. Bekanntlich muss man einen Tod ja sterben, weswegen wir das erst mal implementiert haben und jetzt weiter schauen wegen Scrollposition. PS: eigentlich soll die Scrollposition erhalten bleiben, bei uns funktioniert das aber leider nicht.

Für eine dauerhafte und automatische Implementierung in WooCommerce / Wordpress habe ich eine entsprechende Funktion in die functions.php ergänzt:

// browserback fix for safari
add_action( 'woocommerce_after_main_content' , 'fixCacheProblemCategoryPage', 5 );
	
function fixCacheProblemCategoryPage() {
    if(is_product()) return; //only on category pages
    wp_enqueue_script('prevent-cache', get_stylesheet_directory_uri() . '/preventCache.js', array(), filemtime(get_stylesheet_directory() . '/preventCache.js'));
}

Die Aktion woocommerce_after_main_content wird bei Listing bzw. Kategory und Produkt-Seiten ausgeführt, weswegen ich noch eine kleine Abfrage eingebaut habe, die dann nur bei Kategorie-Seiten weitermacht. Die filemtime-Funktion im hinteren Teil sorgt dafür, dass keine Caching Probleme auftreten.

window.onpageshow = function (event) {
  if (event.persisted) {
    document.location.reload();
  }
};

Die Funktion des Javascript ist im entsprechenden Stackoverflow vermerkt. Kurze Erklärung: wenn die Seite geladen wird und event.persisted existiert, dann wurde Browser-Back gedrückt und somit sollte ein Reload stattfinden.

Achtet darauf, dass das Javascript entsprechend zeitnah geladen wird. Bei mir hat WP-Rocket das Skript zeitverzögert geladen, was natürlich ungünstig ist. Eine entsprechende Einstellung für das Skript half an dieser Stelle. So wird das Skript sehr früh geladen und der Reload wird direkt beim Aufrufen der Seite ausgeführt.

Ich hoffe, ich konnte dir ebenfalls dabei helfen das Forward-Back-Cache Problem in Safari deiner WooCommerce-Installation zu lösen.