Envis cache i Chrome

[maccaddam]

På min hemsida uppdaterar jag "dagens bild" med mera i stort sett varje dag. När jag använder Chrome finns en gammal "dagens bild" från flera dagar sedan. Det hjälper inte att klicka på reloadknappen (Hämta sidan igen), den gamla cachebilden är fortfarande kvar. Detta gäller oberoende av om jag använder Windows10- eller Android-enheter. I Edge och Firefox  fungerar det som det ska, ibland kommer casche-bilden upp, men med en reload så får jag en aktuell sida.

 

Någon som stött på samma problem? Eller är det någon inställning Chrome som jag missat?

[.M]

Har du samma namn på bildfilen varje dag? Eller ser du till att byta namn på bilden när du byter den? Använder du vanlig statisk html eller är det php eller asp eller liknande som driver din hemsida?

[maccaddam]

Har du samma namn på bildfilen varje dag? Eller ser du till att byta namn på bilden när du byter den? Använder du vanlig statisk html eller är det php eller asp eller liknande som driver din hemsida?

Samma namn varje dag, ja. Vanlig enkel html, en av sidorna är http://notudden.eu/fiske.htm. Jag har försökt med 

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

<META HTTP-EQUIV="REFRESH" 

men det verkar inte fungera

[.M]

Jag tror inte meta-taggarna fungerar på bilder som är inlänkade. Så den enklaste lösningen är nog att byta namn på bilden varje gång du byter den. Till exempel till dagens datum.

 

Egentligen borde webbservern lösa det där åt dig, men verkar som att någonting ignoreras hos chrome eller likande. Så den enklaste lösningen är nog ändå att byta namn på bilden när du uppdaterar den.

[Pelle Penna]

Intressant. Jag använder tre olika webbläsare till vår WP sida och där råkar jag också ständigt ut för att jag måste rensa webbhistoriken för att de grafiska förändringarna ska visas. Inte så att bilderna inte visas rätt, men om jag ändrar färg på teckensnitt och linjer så råkar jag ut för detta.

[maccaddam]

Jag tror inte meta-taggarna fungerar på bilder som är inlänkade. Så den enklaste lösningen är nog att byta namn på bilden varje gång du byter den. Till exempel till dagens datum.

 

Egentligen borde webbservern lösa det där åt dig, men verkar som att någonting ignoreras hos chrome eller likande. Så den enklaste lösningen är nog ändå att byta namn på bilden när du uppdaterar den.

Det är ju inte så enkelt att byta namn, jag kan ju inte gärna gå in och byta länkkod varje gång jag laddar upp ny bild?

[.M]

Om vi tittar på din bild, dagensbild.jpg. Så är svaret som kommer ifrån din webbserver följande

HTTP/1.1 200 OK
Server: nginx
Date: Thu, 07 Sep 2017 04:41:11 GMT
Content-Type: image/jpeg
Content-Length: 565226
Last-Modified: Wed, 06 Sep 2017 08:25:52 GMT
Accept-Ranges: bytes
Cache-Control: max-age=2592000, public, proxy-revalidate, public, proxy-revalidate
Expires: Sat, 07 Oct 2017 04:41:11 GMT
Proxy-Connection: Keep-Alive
Connection: Keep-Alive
Age: 0

Det vi får reda på, som kan vara viktigt i det här fallet är att bilden ändrades senaste gången igår, klockan 08:25 GMT och att den har en regel som säger Expires, lördagen den 7 oktober. Det berättar för webbläsaren att den inte ska försöka hämta bilden en gång till innan den tiden gått ut. Efter som den sitter en månad fram i tiden och du vill ändra bild en gång per dag ungefär, så försöker webbläsaren inte ens att hämta en ny version. Men som du säger så verkar Edge och Firefox hämta bilden korrekt. Vilket tyder på att någon eller några webbläsare gör fel.

 

Men vad som är klart är att din webbserver säger åt webbläsaren att bilden ska cahcas i en månad. Det bästa vore att du gräver i hur din webbserver är konfigurerad och plockar bort denna expires. Eftersom din webbserver skickar ut informationen Last-Modified så kommer webbläsaren att hantera cache väldigt effektivt själv. I http 1.1 så finns det en regel som säger att om webbservern berättar Last-Modified så kommer webbläsaren när man hämtar en sida eller bild på nytt skicka med en klausul som säger att om bilden eller sidan inte är ändrad sedan Last-Modified datumet, då hämtar jag inte ned bilden på nytt. Men din regel Expires kommer i vägen för detta.

 

Och det är antagligen samma problem för Pelle Penna när han ändrar på sin Wordpress sida. Jag misstänker att han har sina stylesheet i separata css-filer och dom har också fått en expires eller liknande regel på sig och därför cachas mer aggressivt än vad dom kanske borde behövas. Övriga Wordpress sidor hanteras av Wordpress och där är cache korrekt konfigurerat till att börja med, men css ligger antagligen utanför Wordpress och därför måste man vara mer hands-on och peta på reglerna.

 

Så kolla med ditt webbhotell om dom kan hjälpa till. Om du vill ha en månads cache för allt utom dagensbild.jpg så går det antagligen att ställa in.

[Pelle Penna]

Om vi tittar på din bild, dagensbild.jpg. Så är svaret som kommer ifrån din webbserver följande

HTTP/1.1 200 OK
Server: nginx
Date: Thu, 07 Sep 2017 04:41:11 GMT
Content-Type: image/jpeg
Content-Length: 565226
Last-Modified: Wed, 06 Sep 2017 08:25:52 GMT
Accept-Ranges: bytes
Cache-Control: max-age=2592000, public, proxy-revalidate, public, proxy-revalidate
Expires: Sat, 07 Oct 2017 04:41:11 GMT
Proxy-Connection: Keep-Alive
Connection: Keep-Alive
Age: 0

Det vi får reda på, som kan vara viktigt i det här fallet är att bilden ändrades senaste gången igår, klockan 08:25 GMT och att den har en regel som säger Expires, lördagen den 7 oktober. Det berättar för webbläsaren att den inte ska försöka hämta bilden en gång till innan den tiden gått ut. Efter som den sitter en månad fram i tiden och du vill ändra bild en gång per dag ungefär, så försöker webbläsaren inte ens att hämta en ny version. Men som du säger så verkar Edge och Firefox hämta bilden korrekt. Vilket tyder på att någon eller några webbläsare gör fel.

 

Men vad som är klart är att din webbserver säger åt webbläsaren att bilden ska cahcas i en månad. Det bästa vore att du gräver i hur din webbserver är konfigurerad och plockar bort denna expires. Eftersom din webbserver skickar ut informationen Last-Modified så kommer webbläsaren att hantera cache väldigt effektivt själv. I http 1.1 så finns det en regel som säger att om webbservern berättar Last-Modified så kommer webbläsaren när man hämtar en sida eller bild på nytt skicka med en klausul som säger att om bilden eller sidan inte är ändrad sedan Last-Modified datumet, då hämtar jag inte ned bilden på nytt. Men din regel Expires kommer i vägen för detta.

 

Och det är antagligen samma problem för Pelle Penna när han ändrar på sin Wordpress sida. Jag misstänker att han har sina stylesheet i separata css-filer och dom har också fått en expires eller liknande regel på sig och därför cachas mer aggressivt än vad dom kanske borde behövas. Övriga Wordpress sidor hanteras av Wordpress och där är cache korrekt konfigurerat till att börja med, men css ligger antagligen utanför Wordpress och därför måste man vara mer hands-on och peta på reglerna.

 

Så kolla med ditt webbhotell om dom kan hjälpa till. Om du vill ha en månads cache för allt utom dagensbild.jpg så går det antagligen att ställa in.

Tack för dina synpunkter och tankar

[maccaddam]

Om vi tittar på din bild, dagensbild.jpg. Så är svaret som kommer ifrån din webbserver följande

HTTP/1.1 200 OK
Server: nginx
Date: Thu, 07 Sep 2017 04:41:11 GMT
Content-Type: image/jpeg
Content-Length: 565226
Last-Modified: Wed, 06 Sep 2017 08:25:52 GMT
Accept-Ranges: bytes
Cache-Control: max-age=2592000, public, proxy-revalidate, public, proxy-revalidate
Expires: Sat, 07 Oct 2017 04:41:11 GMT
Proxy-Connection: Keep-Alive
Connection: Keep-Alive
Age: 0

Det vi får reda på, som kan vara viktigt i det här fallet är att bilden ändrades senaste gången igår, klockan 08:25 GMT och att den har en regel som säger Expires, lördagen den 7 oktober. Det berättar för webbläsaren att den inte ska försöka hämta bilden en gång till innan den tiden gått ut. Efter som den sitter en månad fram i tiden och du vill ändra bild en gång per dag ungefär, så försöker webbläsaren inte ens att hämta en ny version. Men som du säger så verkar Edge och Firefox hämta bilden korrekt. Vilket tyder på att någon eller några webbläsare gör fel.

 

Men vad som är klart är att din webbserver säger åt webbläsaren att bilden ska cahcas i en månad. Det bästa vore att du gräver i hur din webbserver är konfigurerad och plockar bort denna expires. Eftersom din webbserver skickar ut informationen Last-Modified så kommer webbläsaren att hantera cache väldigt effektivt själv. I http 1.1 så finns det en regel som säger att om webbservern berättar Last-Modified så kommer webbläsaren när man hämtar en sida eller bild på nytt skicka med en klausul som säger att om bilden eller sidan inte är ändrad sedan Last-Modified datumet, då hämtar jag inte ned bilden på nytt. Men din regel Expires kommer i vägen för detta.

 

Och det är antagligen samma problem för Pelle Penna när han ändrar på sin Wordpress sida. Jag misstänker att han har sina stylesheet i separata css-filer och dom har också fått en expires eller liknande regel på sig och därför cachas mer aggressivt än vad dom kanske borde behövas. Övriga Wordpress sidor hanteras av Wordpress och där är cache korrekt konfigurerat till att börja med, men css ligger antagligen utanför Wordpress och därför måste man vara mer hands-on och peta på reglerna.

 

Så kolla med ditt webbhotell om dom kan hjälpa till. Om du vill ha en månads cache för allt utom dagensbild.jpg så går det antagligen att ställa in.

Det märkliga är att fenomenet är nytt, jag haft den här hemsidan i bortåt 20 år på olika servrar och inte råkat ut för det här problemet.

 

Jag har också testat samma sida på ytterligare två servrar och resultatet i Chrome är lika illa. Alltså verkar det som det är Chrome som har ändrat något. 

 

Om jag öppnar bilden i ny flik och trycker reload så uppdateras bilden även på sidan. Det kanske finns någon kodsnutt som kan fixa detta?

[.M]

Men du har hur som helst en Expires header som berättar att bilden är giltig i en månad. Så om chrome har ändrat något så har dom kanske rättat hur cache skall hanteras. Och även om du hittar en inställning för att korrigera detta beteende i din browser så kommer väl inte dina besökare ha gjort ändringen?

 

Så det bästa är nog att ändra hur servern skickar ut bilderna så alla kan se den senaste bilden oavsett browser.

[maccaddam]

Med Ctrl-F5 laddas sidan direkt från server. Vad jag behöver är en html-kod som gör en Ctrl-F5. Det finns ett antal förslag på nätet men jag har inte fått någon att fungera.

[Cecilia]

Vad händer då när du ändrar Expires header då?

[maccaddam]

Vad händer då när du ändrar Expires header då?

Ingenting (i Chrome alltså)

[maccaddam]

newImage.src = "image.jpg?t=" + new Date().getTime(); 

 

som jag hämtat från

 

https://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url

 

verkar fungera