Clearing cache in the browser

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?

Fd1af6cc88403788ae1e5710871bbf62?s=128

Andrew Betts

May 08, 2018
Tweet

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)

  7. None
  8. None
  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.
  37. None
  38. None
  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”

  41. None
  42. None
  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