$30 off During Our Annual Pro Sale. View Details »

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. Clearing cache in the
    browser
    Pushing cache invalidations shouldn’t be this hard
    Andrew Betts, Fastly
    @triblondon

    View Slide

  2. Event driven content
    User
    Event:
    Comment posted
    Fastly Server
    Uncached, fetch
    from origin
    PURGE
    Cannot cache
    in the browser!

    View Slide

  3. Event driven content
    User
    Event:
    Comment posted
    Fastly Server
    Uncached, fetch
    from origin
    PURGE CDN
    PURGE BROWSER

    View Slide

  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.

    View Slide

  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

    View Slide

  6. location.reload(true)

    View Slide

  7. View Slide

  8. View Slide

  9. location.reload(true);

    View Slide

  10. const ifr = document.createElement('iframe');
    ifr.src = "/forcereload?path=/thing/stuck/in/cache";
    ifr.classList.add("hidden-iframe");
    document.body.appendChild(ifr);

    View Slide


  11. <br/>if (!location.hash) {<br/>location.hash = "#reloading";<br/>location.reload(true);<br/>} else {<br/>location.hash = "#reloaded";<br/>}<br/>

    View Slide

  12. https://html.spec.whatwg.org/#location

    View Slide

  13. reload(true)
    reload()
    Depends on
    Cache-Control:
    immutable
    https://maddening-museum.glitch.me/?grep=location.reload

    View Slide

  14. fetch(url, {cache: reload})

    View Slide

  15. await fetch(
    '/thing/stuck/in/cache',
    {cache: 'reload', credentials: 'include'}
    );

    View Slide

  16. Same origin
    Foreign origin
    https://maddening-museum.glitch.me/?grep=FetchOptions

    View Slide

  17. Split caches in
    fetch
    navigate
    fetch(‘/thing’);
    location.href = ‘/thing’;

    View Slide

  18. fetch() with Vary

    View Slide

  19. await fetch("/thing/stuck/in/cache", {
    headers: { "Force-Reload": 1 },
    credentials: "include"
    });
    Vary: Force-Reload

    View Slide

  20. Different variations
    User
    Vary: Force-Reload
    Server
    Navigate
    Fetch
    Force-Reload: 1
    Vary: Force-Reload
    Navigate Vary: Force-Reload

    View Slide

  21. Same origin
    Foreign origin
    https://maddening-museum.glitch.me/?grep=Vary

    View Slide

  22. fetch() via POST

    View Slide

  23. https://httpwg.org/specs/rfc7234.html#rfc.section.4.4

    View Slide

  24. await fetch(
    '/thing/stuck/in/cache',
    {method:'POST', credentials:'include'}
    );

    View Slide

  25. Same origin
    Foreign origin
    https://maddening-museum.glitch.me/?grep=POST+request

    View Slide

  26. POST in IFRAME

    View Slide

  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();

    View Slide

  28. Same origin
    Foreign origin
    https://maddening-museum.glitch.me/?grep=POST+into+an+IFRAME

    View Slide

  29. • Firefox doesn’t clear fetch cache for cross-origin]
    • Requires two fetches
    • Creates a browser history entry
    POST/IFRAME Gotchas

    View Slide

  30. Clear-Site-Data

    View Slide

  31. Clear-Site-Data: "cache"

    View Slide

  32. Clear-Site-Data
    https://maddening-museum.glitch.me/?grep=Clear-Site-Data

    View Slide

  33. POST in IFRAME

    View Slide

  34. Alternative caches
    Browser tab Image
    cache
    Fastly Origin server
    Preload
    cache
    Service
    worker
    HTTP
    cache
    HTTP/2
    push cache

    View Slide

  35. cache.delete(request,{options}).then(function(true) {
    //your cache entry has been deleted
    });

    View Slide

  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.

    View Slide

  37. View Slide

  38. View Slide

  39. Purging when things happen (+ silent push)
    User
    Event:
    Comment posted
    Fastly Server
    Uncached, fetch
    from origin
    PURGE
    SILENT WEB PUSH

    View Slide

  40. “This site has been updated
    in the background”

    View Slide

  41. View Slide

  42. View Slide

  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

    View Slide

  44. Thanks for listening
    I am Get the slides:
    Andrew Betts
    @triblondon
    [email protected]
    fastly.us/clear-cache-talk

    View Slide

  45. presents
    Altitude London
    22 May, 2018 | Studio Spaces
    fastly.com/altitude/2018/london

    View Slide