Clearing cache in the browser

Slide 1

Slide 1 text

Clearing cache in the browser Pushing cache invalidations shouldn’t be this hard Andrew Betts, Fastly @triblondon

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

● 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

Slide 6

Slide 6 text

location.reload(true)

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

location.reload(true);

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

if (!location.hash) { location.hash = "#reloading"; location.reload(true); } else { location.hash = "#reloaded"; }

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

fetch(url, {cache: reload})

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

fetch() with Vary

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

fetch() via POST

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

POST in IFRAME

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Clear-Site-Data

Slide 31

Slide 31 text

Clear-Site-Data: "cache"

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

POST in IFRAME

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

“This site has been updated in the background”

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

● 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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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