Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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?

Andrew Betts

May 08, 2018
Tweet

More Decks by Andrew Betts

Other Decks in Technology

Transcript

  1. Event driven content User Event: Comment posted Fastly Server Uncached,

    fetch from origin PURGE Cannot cache in the browser!
  2. 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.
  3. • 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
  4. 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();
  5. • Firefox doesn’t clear fetch cache for cross-origin] • Requires

    two fetches • Creates a browser history entry POST/IFRAME Gotchas
  6. Alternative caches Browser tab Image cache Fastly Origin server Preload

    cache Service worker HTTP cache HTTP/2 push cache
  7. 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.
  8. Purging when things happen (+ silent push) User Event: Comment

    posted Fastly Server Uncached, fetch from origin PURGE SILENT WEB PUSH
  9. • 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