{"id":1467,"date":"2019-02-27T15:09:41","date_gmt":"2019-02-27T15:09:41","guid":{"rendered":"https:\/\/guwii.com\/?p=1467"},"modified":"2019-04-26T09:54:20","modified_gmt":"2019-04-26T08:54:20","slug":"cache-issues-with-forwards-and-back-history-in-safari","status":"publish","type":"post","link":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/","title":{"rendered":"Cache issues with Forwards and Back history in Safari"},"content":{"rendered":"\n

Safari has this neat feature in that it saves the page exactly as it was when it was left by the user, so that if you go backwards or forwards to it using the browser buttons (or shortcuts) it doesn\u2019t have to reload the page and instead it can load the saved snapshot state.<\/p>\n\n\n\n

This creates a super smooth feeling when jumping back and forth between sites in your back or forward history, however, it\u2019s not necessarily the experience that users always expect.
One common situation is with hamburger\/drop-down menus, leaving a site whilst the menu is open means that if you go back\/forwards to the site it still remains open, most users would expect the menu to be closed like when you first load a site.<\/p>\n\n\n\n

As a side note it\u2019s worth mentioning that Firefox also uses this caching behaviour in most circumstances, so the solutions we provide also work for Firefox back button history caching issues.<\/p>\n\n\n\n

Now, why are we discussing this, well it was a long rabbit hole of a development issue, on one of our client’s sites we wanted to ensure a few of the features and settings of the site reset when the user used the back button in their Safari browser. This proved particularly difficult to solve. We tested all types of JavaScript event methods, from window.onbeforeunload<\/code>, window.unload<\/code>, document.visibilitychange<\/code>, window.onpopstate<\/code> events, through to .htaccess<\/code> configs to try and create a solution.<\/p>\n\n\n\n

Eventually, after several hours, we managed to create a reliable solution using a combination of the <\/g>pageshow<\/code> and<\/g> <\/g>pagehide<\/code> events.
However, like most things in web development and coding\u2014that wasn\u2019t the end, we had only been testing in iOS 10.3+ and when it came to testing in iOS 9.3 the issue remained, in that the site wasn\u2019t resetting as we hoped. With fingernails firmly dug into our scalps we continued investigating.<\/p>\n\n\n\n

We began testing a bunch of other sites to see if they had this issue, and surprisingly most sites had this quirk, here\u2019s the Reddit website, for example, the menu stays open when using an iPad’s back\/forward buttons on iOS 9.3:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Finally, we found a site that had the behaviour we were expecting and began trying to figure how it was accomplished, a complete local copy of the example working site was made. For the most part our local version was exactly the same, however, when testing it still had the issue!<\/p>\n\n\n\n

Positively bald and exhausted by now we were at the end of our tether for such a small issue, thinking there must be some kind of clever server-side logic happening we began adding some no-cache headers and other bits to tell the browser not to cache the site (mostly just to test for the moment), still no luck. It was then we ruled out the only remaining difference we could think of… the live example site that was working was running on HTTPS, we installed a local SSL certificate for our mirror of the example site and.. it worked!<\/p>\n\n\n\n

So to cut a long story short, enabling HTTPS, along with the following JS events solve forward-back-cache issues in Safari (tested in iOS 9.3 and up) and Firefox too.<\/p>\n\n\n\n

function unloadingWebsite() {\n    \/\/ Do something just before the user leaves:\n    \/\/ Eg: Hide\/close your menu\/reset settings\/clear cookies etc, whatever you need to do.\n    document.body.classList.add(\"unloaded\");\n}\nwindow.addEventListener(\"pagehide\", function() {\n    unloadingWebsite();\n});\nwindow.addEventListener(\"pageshow\", function() {\n    \/\/ You can use the pageshow function if required to double ensure that everything is reset on the page load.\n    \/\/ Most of the time the \"pagehide\" event will provide the solution.\n    unloadingWebsite();\n});<\/code>\n<\/pre>\n\n\n\n
Just fill the unloadingWebsite()<\/code> function with the code that should run to set the website back to standard.<\/p>\n","protected":false},"excerpt":{"rendered":"
Safari has this neat feature in that it saves the page exactly as it was when it was left by the user, so that if you go backwards or forwards to it using the browser buttons (or shortcuts) it doesn\u2019t have to reload the page and instead it can load […]<\/p>\n","protected":false},"author":1,"featured_media":1479,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[42],"tags":[],"acf":[],"yoast_head":"\nCache issues with Forwards and Back history in Safari - guwii<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cache issues with Forwards and Back history in Safari - guwii\" \/>\n<meta property=\"og:description\" content=\"Safari has this neat feature in that it saves the page exactly as it was when it was left by the user, so that if you go backwards or forwards to it using the browser buttons (or shortcuts) it doesn\u2019t have to reload the page and instead it can load […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/\" \/>\n<meta property=\"og:site_name\" content=\"guwii\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/guwii\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/guwii\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-27T15:09:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-26T08:54:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/guwii.com\/wp-content\/uploads\/2019\/02\/backwards-forwards-arrow-safari-history-cache.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1947\" \/>\n\t<meta property=\"og:image:height\" content=\"1303\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@guwiidigital\" \/>\n<meta name=\"twitter:site\" content=\"@guwiidigital\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/\"},\"author\":{\"name\":\"Alex\",\"@id\":\"https:\/\/guwii.com\/#\/schema\/person\/dcddaceaae34a2f09e6fb9a21dc29183\"},\"headline\":\"Cache issues with Forwards and Back history in Safari\",\"datePublished\":\"2019-02-27T15:09:41+00:00\",\"dateModified\":\"2019-04-26T08:54:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/\"},\"wordCount\":555,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/guwii.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/guwii.com\/wp-content\/uploads\/2019\/02\/backwards-forwards-arrow-safari-history-cache.jpg\",\"articleSection\":[\"web industry\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/\",\"url\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/\",\"name\":\"Cache issues with Forwards and Back history in Safari - guwii\",\"isPartOf\":{\"@id\":\"https:\/\/guwii.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/guwii.com\/wp-content\/uploads\/2019\/02\/backwards-forwards-arrow-safari-history-cache.jpg\",\"datePublished\":\"2019-02-27T15:09:41+00:00\",\"dateModified\":\"2019-04-26T08:54:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#primaryimage\",\"url\":\"https:\/\/guwii.com\/wp-content\/uploads\/2019\/02\/backwards-forwards-arrow-safari-history-cache.jpg\",\"contentUrl\":\"https:\/\/guwii.com\/wp-content\/uploads\/2019\/02\/backwards-forwards-arrow-safari-history-cache.jpg\",\"width\":1947,\"height\":1303,\"caption\":\"backwards forwards arrow safari history cache\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/guwii.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cache issues with Forwards and Back history in Safari\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/guwii.com\/#website\",\"url\":\"https:\/\/guwii.com\/\",\"name\":\"guwii\",\"description\":\"A complete digital partner for your business. Design, Development, SEO, IT and Marketing.\",\"publisher\":{\"@id\":\"https:\/\/guwii.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/guwii.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/guwii.com\/#organization\",\"name\":\"guwii\",\"url\":\"https:\/\/guwii.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/guwii.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/guwii.com\/wp-content\/uploads\/2018\/06\/guwii-on-light-large.png\",\"contentUrl\":\"https:\/\/guwii.com\/wp-content\/uploads\/2018\/06\/guwii-on-light-large.png\",\"width\":2000,\"height\":754,\"caption\":\"guwii\"},\"image\":{\"@id\":\"https:\/\/guwii.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/guwii\",\"https:\/\/x.com\/guwiidigital\",\"https:\/\/www.instagram.com\/guwiidigital\/\",\"https:\/\/www.linkedin.com\/company\/guwii\/\",\"https:\/\/www.pinterest.co.uk\/guwiidigital\/\",\"https:\/\/www.youtube.com\/guwii\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/guwii.com\/#\/schema\/person\/dcddaceaae34a2f09e6fb9a21dc29183\",\"name\":\"Alex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/guwii.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6d55b9d9169e09016dba7b95759850a4?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6d55b9d9169e09016dba7b95759850a4?s=96&r=g\",\"caption\":\"Alex\"},\"sameAs\":[\"https:\/\/guwii.com\",\"https:\/\/www.facebook.com\/guwii\/\",\"https:\/\/x.com\/guwiidigital\"],\"url\":\"https:\/\/guwii.com\/author\/guwadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cache issues with Forwards and Back history in Safari - guwii","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/","og_locale":"en_US","og_type":"article","og_title":"Cache issues with Forwards and Back history in Safari - guwii","og_description":"Safari has this neat feature in that it saves the page exactly as it was when it was left by the user, so that if you go backwards or forwards to it using the browser buttons (or shortcuts) it doesn\u2019t have to reload the page and instead it can load […]","og_url":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/","og_site_name":"guwii","article_publisher":"https:\/\/www.facebook.com\/guwii","article_author":"https:\/\/www.facebook.com\/guwii\/","article_published_time":"2019-02-27T15:09:41+00:00","article_modified_time":"2019-04-26T08:54:20+00:00","og_image":[{"width":1947,"height":1303,"url":"https:\/\/guwii.com\/wp-content\/uploads\/2019\/02\/backwards-forwards-arrow-safari-history-cache.jpg","type":"image\/jpeg"}],"author":"Alex","twitter_card":"summary_large_image","twitter_creator":"@guwiidigital","twitter_site":"@guwiidigital","twitter_misc":{"Written by":"Alex","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#article","isPartOf":{"@id":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/"},"author":{"name":"Alex","@id":"https:\/\/guwii.com\/#\/schema\/person\/dcddaceaae34a2f09e6fb9a21dc29183"},"headline":"Cache issues with Forwards and Back history in Safari","datePublished":"2019-02-27T15:09:41+00:00","dateModified":"2019-04-26T08:54:20+00:00","mainEntityOfPage":{"@id":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/"},"wordCount":555,"commentCount":0,"publisher":{"@id":"https:\/\/guwii.com\/#organization"},"image":{"@id":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#primaryimage"},"thumbnailUrl":"https:\/\/guwii.com\/wp-content\/uploads\/2019\/02\/backwards-forwards-arrow-safari-history-cache.jpg","articleSection":["web industry"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/","url":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/","name":"Cache issues with Forwards and Back history in Safari - guwii","isPartOf":{"@id":"https:\/\/guwii.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#primaryimage"},"image":{"@id":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#primaryimage"},"thumbnailUrl":"https:\/\/guwii.com\/wp-content\/uploads\/2019\/02\/backwards-forwards-arrow-safari-history-cache.jpg","datePublished":"2019-02-27T15:09:41+00:00","dateModified":"2019-04-26T08:54:20+00:00","breadcrumb":{"@id":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#primaryimage","url":"https:\/\/guwii.com\/wp-content\/uploads\/2019\/02\/backwards-forwards-arrow-safari-history-cache.jpg","contentUrl":"https:\/\/guwii.com\/wp-content\/uploads\/2019\/02\/backwards-forwards-arrow-safari-history-cache.jpg","width":1947,"height":1303,"caption":"backwards forwards arrow safari history cache"},{"@type":"BreadcrumbList","@id":"https:\/\/guwii.com\/cache-issues-with-forwards-and-back-history-in-safari\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/guwii.com\/"},{"@type":"ListItem","position":2,"name":"Cache issues with Forwards and Back history in Safari"}]},{"@type":"WebSite","@id":"https:\/\/guwii.com\/#website","url":"https:\/\/guwii.com\/","name":"guwii","description":"A complete digital partner for your business. Design, Development, SEO, IT and Marketing.","publisher":{"@id":"https:\/\/guwii.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/guwii.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/guwii.com\/#organization","name":"guwii","url":"https:\/\/guwii.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/guwii.com\/#\/schema\/logo\/image\/","url":"https:\/\/guwii.com\/wp-content\/uploads\/2018\/06\/guwii-on-light-large.png","contentUrl":"https:\/\/guwii.com\/wp-content\/uploads\/2018\/06\/guwii-on-light-large.png","width":2000,"height":754,"caption":"guwii"},"image":{"@id":"https:\/\/guwii.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/guwii","https:\/\/x.com\/guwiidigital","https:\/\/www.instagram.com\/guwiidigital\/","https:\/\/www.linkedin.com\/company\/guwii\/","https:\/\/www.pinterest.co.uk\/guwiidigital\/","https:\/\/www.youtube.com\/guwii"]},{"@type":"Person","@id":"https:\/\/guwii.com\/#\/schema\/person\/dcddaceaae34a2f09e6fb9a21dc29183","name":"Alex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/guwii.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d55b9d9169e09016dba7b95759850a4?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d55b9d9169e09016dba7b95759850a4?s=96&r=g","caption":"Alex"},"sameAs":["https:\/\/guwii.com","https:\/\/www.facebook.com\/guwii\/","https:\/\/x.com\/guwiidigital"],"url":"https:\/\/guwii.com\/author\/guwadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/posts\/1467"}],"collection":[{"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/comments?post=1467"}],"version-history":[{"count":9,"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/posts\/1467\/revisions"}],"predecessor-version":[{"id":1486,"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/posts\/1467\/revisions\/1486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/media\/1479"}],"wp:attachment":[{"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/media?parent=1467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/categories?post=1467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guwii.com\/wp-json\/wp\/v2\/tags?post=1467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}