Clearing cache in the browser

Pushing cache invalidations to the CDN is now fairly common, and is a pattern that we call "event driven content" here at Fastly. But what stops us clearing content from the browser cache too, and how easy would it be to overcome those problems?

Transcript

1. Clearing cache in the browser Pushing cache invalidations shouldn’t be this hard Andrew Betts, Fastly @triblondon
2. Event driven content User Event: Comment posted Fastly Server Uncached, fetch from origin PURGE Cannot cache in the browser!
3. Event driven content User Event: Comment posted Fastly Server Uncached, fetch from origin PURGE CDN PURGE BROWSER
4. Requirements for client-side event driven caching 1 Push a server-initiated purge signal to the browser. 2 Programmatically evict an object from the browser cache.
5. • Event driven content • Updating third party script libraries (Google analytics, Sentry, polyfill.io) • Recovering from mistakes and bad deployments Use cases for client-side cache invalidation
6. location.reload(true)
9. location.reload(true);
10. const ifr = document.createElement('iframe'); ifr.src = "/forcereload?path=/thing/stuck/in/cache"; ifr.classList.add("hidden-iframe"); document.body.appendChild(ifr);
11. <iframe src="/thing/stuck/in/cache"></iframe> <script> if (!location.hash) { location.hash = "#reloading"; location.reload(true); } else { location.hash = "#reloaded"; } </script>
12. https://html.spec.whatwg.org/#location
13. reload(true) reload() Depends on Cache-Control: immutable https://maddening-museum.glitch.me/?grep=location.reload
14. fetch(url, {cache: reload})
15. await fetch( '/thing/stuck/in/cache', {cache: 'reload', credentials: 'include'} );
16. Same origin Foreign origin https://maddening-museum.glitch.me/?grep=FetchOptions
17. Split caches in fetch navigate fetch(‘/thing’); location.href = ‘/thing’;
18. fetch() with Vary
19. await fetch("/thing/stuck/in/cache", { headers: { "Force-Reload": 1 }, credentials: "include" }); Vary: Force-Reload
20. Different variations User Vary: Force-Reload Server Navigate Fetch Force-Reload: 1 Vary: Force-Reload Navigate Vary: Force-Reload
21. Same origin Foreign origin https://maddening-museum.glitch.me/?grep=Vary
22. fetch() via POST
23. https://httpwg.org/specs/rfc7234.html#rfc.section.4.4
24. await fetch( '/thing/stuck/in/cache', {method:'POST', credentials:'include'} );
25. Same origin Foreign origin https://maddening-museum.glitch.me/?grep=POST+request
26. <form> POST in IFRAME
27. const ifr = document.createElement('iframe'); ifr.name = ifr.id = 'ifr_' + Date.now(); document.body.appendChild(ifr); const form = document.createElement('form'); form.method = "POST"; form.target = ifr.name; form.action = '/thing/stuck/in/cache'; document.body.appendChild(form); form.submit();
28. Same origin Foreign origin https://maddening-museum.glitch.me/?grep=POST+into+an+IFRAME
29. • Firefox doesn’t clear fetch cache for cross-origin] • Requires two fetches • Creates a browser history entry POST/IFRAME Gotchas
30. Clear-Site-Data
31. Clear-Site-Data: "cache"
32. Clear-Site-Data https://maddening-museum.glitch.me/?grep=Clear-Site-Data
33. POST in IFRAME
34. Alternative caches Browser tab Image cache Fastly Origin server Preload cache Service worker HTTP cache HTTP/2 push cache
35. cache.delete(request,{options}).then(function(true) { //your cache entry has been deleted });
36. Requirements for client-side event driven caching 1 Push a server-initiated purge signal to the browser. 2 Programmatically evict an object from the browser cache.
39. Purging when things happen (+ silent push) User Event: Comment posted Fastly Server Uncached, fetch from origin PURGE SILENT WEB PUSH
40. “This site has been updated in the background”
43. • Clearing the browser cache is hard • Clear-Site-Data and cache:reload are the ‘proper’ solutions • Until then, POST in an IFRAME is the most effective solution if you want to or need to use the HTTP cache • Service worker cache API is much more straightforward if you are caching there • Web Push allows proactive notification of invalidations, but still requires a visible notification Summary
44. Thanks for listening I am Get the slides: Andrew Betts @triblondon abetts@fastly.com fastly.us/clear-cache-talk
45. presents Altitude London 22 May, 2018 | Studio Spaces fastly.com/altitude/2018/london