Caching er en teknik, der bruges til at gemme data midlertidigt, så man reducerer belastningen på servere og netværk. 

Når vi taler om web-applikationer, kan caching forekomme på flere niveauer: På serversiden, i webbrowseren og i selve webapplikationen.


Sideinformation

 



WMTS Cache Control på Datafordeleren


Datafordeleren benytter frontend Cache Control på følgende tjenester for alle lag:

  • Ortofoto WMTS,
  • Skærmkort WMTS dæmpet,
  • Skærmkort WMTS Grå og
  • Skærmkort WMTS Klassisk

Cachen er sat til max-age=172800, hvilket betyder at browseren gemmer data for viste tiles i 2 dage, inden den henter data igen.

Dette sker for at sikre en god og stabil indlæsning for anvendere af ovennævnte tjenester, fordi browseren ikke skal opdatere og hente nye data ved for eksempel zoom på Skærmkortet.

Desuden giver det en bedre brugeroplevelse, fordi der ikke bliver hentet blanke tiles.

Bemærk

Det kan være nødvendigt at cleare din cache for at trække det nyeste data, når der er en opdatering af data for Ortofoto og Skærmkortet.

Følg med i driftsmeddelelser på datafordeler.dk for at se, hvornår der er dataopdateringer.





Generelt om Cache

Serverside Cache

Vi springer hurtigt over caching på selve serveren, for det er der forhåbentligt allerede tænkt på, og det varierer fra API til API, hvilke data det kan betale sig at cache.

Serveren kan opfordre til caching på browser-niveau ved at sætte visse response HTTP-headers: 

  • "Cache-Control" - styrer hvordan og hvor længe browseren må cache data.
  • "Last-Modified" og "ETag" - Bruges af browseren til at vurdere, om en resource har ændret sig og bør hentes igen.






Browser Cache

(Browser: Selve browserprogrammet (f.eks. Edge, Chrome, Safari) ude hos den enkelte slutbruger.)

Browsere vil som udgangspunkt cache data fra en HTTP-response, men det kan variere afhængigt af kontekst. 

Vær opmærksom på, hvordan "Cache-Control" header er sat, og hvilke data, der returneres i responsen.






Webapplikation Cache


(Webapplikation: En webside med tilhørende HTML/Javascript. Det kører i browseren ude hos slutbrugeren. (F.eks. Boligas webside, når du tilgår den fra din telefon.))


Webapplikationer kan selv implementere interne caching-mekanismer, men det vil som regel være forbundet med store omkostninger at implementere. 

For mange vil det forekomme som dobbelt arbejde, når teknologien jo allerede findes i browseren.


I nogle tilfælde kan det blive nødvendigt at tvinge browser-caching igennem for Fetch requests (Se link #3 nedenfor)


Hvis både server- og browser-caching spiller fallit, er et en mulighed at bruge "ServiceWorkers" til at håndtere caching direkte i webapplikationen. (Se link #4 nedenfor)






Eksempler


API-response fra Dataforsyning STAC API




API-response fra DHMTerraen


Fetch request til 

https://services.datafordeler.dk/DHMTerraen/DHMKoter/1.0.0/GEOREST/HentKoter?geop=POINT(574764 6220953)&elevationmodel=dtm&username=xxx&password=yyy


Server har response headers:


"Cache-Control: private" - Angiver, at browsere må cache den returnerede JSON som de har lyst.


Der returneres noget JSON, som automatisk caches i browseren.




API-response fra DHMNedboer


Fetch request til 

https://services.datafordeler.dk/DHMNedboer/dhm_wcs/1.0.0/WCS?SERVICE=WCS&COVERAGE=dhm_terraen&RESPONSE_CRS=epsg:25832&CRS=epsg:25832&FORMAT=GTiff&REQUEST=GetCoverage&VERSION=1.0.0&username=xxx&password=yyy&height=424&width=317&bbox=573466.69,6220296.1899999995,575019.42,6221750.820000001


Server har response headers som i eksemplet ovenfor:

"Cache-Control: private"


Men her returneres der en Tiff-fil, som ikke umiddelbart bliver cachet af browseren.

Her burde serveren bruge en anden værdi for Cache-Control for at opfordre klienter til at cache, f.eks. "Cache-Control: public, max-age=31536000".


I dette tilfælde bruger klienten Fetch API, så vi kan ændre "cache" property i requesten fra klienten til: "cache: 'force-cache'" og således opnå, at browseren også cacher disse filer. (Se link #3)







Cache styret fra serversiden


  1. https://web.dev/articles/http-cache - Kort gennemgang af HTTP caching
  2. https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching - Grunding gennemgang af HTTP caching




Cache styret fra webapplikation


3. https://developer.mozilla.org/en-US/docs/Web/API/Request/cache - Brug af Request "cache" property (Specifikt for Fetch requests)

4. https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Caching - Om brug af ServiceWorker til caching