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
   

   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
    abetts@fastly.com
    fastly.us/clear-cache-talk
    

    View Slide

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

    View Slide