Premiär! Fyndchans i SweClockers Månadens Drop

Hur säkerställer jag att en webbesökare alltid ser updaterad html/css i sin browser?

Permalänk
Avstängd

Hur säkerställer jag att en webbesökare alltid ser updaterad html/css i sin browser?

Hej,
Jag har gjort en sida till min mamma som är konstnär. En enkel sida i HTML och CSS med info om aktuella utsällningar och sånt. Den ändras inte så ofta, men när utställningsinformation ändras så vill man ju att en besökare ser det aktuella informationen. Men browsercacharna ställer till det för mig.

När jag ändrar på sidan laddar jag direkt upp ny HTML och ibland även CSS till hennes egna domän hostad på ett webbhotell. Jag brukar ofta se ändingen direkt i Firefox, Opera, IE och Chrome. Ibland måste jag tömma cachen. Men när jag sen ringer till henne och säger att uppdateringen är gjord, och hon öppnar sin Firefox och går till sidan
som hon kanske senast besökte för några dagar sen, så ser hon fortfarande den gamla sidan.

Jag förstår inte varför hon nästan alltid måste tömma cachen med CTRL+F5 för att få se den uppdaterade sidan, medan jag nästan aldrig behöver det.
Men eftersom hennes webbanvändarprofil stämmer bättre med de som antas besöka hennes sajt, så måste jag utgå från att besökarna riskerar att i likhet med henne se gammal cachad info när de besöker hennes sida på nytt, trots att där finns en nyare sidan på webben.

(Min workaround till problemet nu är att alltid byta namn på HTML-sida och länkat CSS, men det är knappast optimalt eller en speciellt snygg lösning.)

Jag har läst flera böcker om webbdesign, allt från nybörjare till intermediate, men ingenstans hittar jag en utförlig diskussion om hur man ska gå tillväga när det gäller att sätta upp cacheinställningar för webbsidor. När jag googlar hittar jag bara väldigt gammal information, som pratar om HTTP headers, men jag har fortfarande inte förstått om de är bättre och hur jag ska göra för att börja använda såna i stället?

Nu använder jag följande META-taggar men det verkar alltså inte vara speciellt effektivt:

<meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="pragma" content="no-cache" />

Kan någon hjälpa mig sprida lite ljus över det här problemet?
Tack!

Permalänk
Medlem

Du kan testa och hoppas att

<META HTTP-EQUIV="EXPIRES" CONTENT="0">

kommer att fungera.

Permalänk
Medlem

Tack,
Fast ju mer jag googlar på den taggen desto mindre bra verkar den: "According to my testing, both search engines and browsers will ignore the Meta Expires tag completely, just like you should do. This tag is worthless and needs to be deleted from use." Och jag vill ju inte att den ska plockas bort från google alls och inte cachas, jag vill bara att sidan ska återevalueras för att se om det finns en nyare version på servern, och det var det jag trodde att mina taggar åstadkom, men så tycks inte vara fallet.
???

Permalänk
Hedersmedlem

En sätt som _alltid_ fungerar i praktiken, men som inte är den teoretiskt snyggaste lösningen, är att lägga ett dynamiskt genererat slumpargument till URL:en. För PHP: sätt t ex

$no_cache = microtime();

någonstans tidigt i dokumentet. Skriv därefter länkar som

<a href="index.php?<?php echo $no_cache; ?>">

så kommer URL:en alltid vara annorlunda.

För att lösa det gällande första sidan så kan du lägga t ex

if (!isset($_GET['no-cache'])) { header('Location: index.php?no-cache=' . $no_cache); exit; }

högst upp (eller ja, efter att `$no_cache` satts). Detta skulle också kunna vara ett alternativ till alla andra sidor, i stället för att ha "fula" länkar. Ytterligare ett sätt för att inte fula till URL:en kan vara att skicka `POST`-värden i stället, men jag har inte utforskat det.

Detta är ingen snygg lösning, men den är fungerande. Jag använder den på en intern sida för uppdatering och kontroll av lagerstatus. Jag hade kanske inte vilja exponera lösningen mot kund dock, men den kanske kan vara ett uppslag för andra idéer. Man skulle kunna dölja det fula "no_cache="-värdet mha javascript eller något om man vill snygga till det, men det känns bökigt.

En annan fråga är hur ofta du kommer uppdatera sidan när den väl är fungerande. Det kanske inte blir något större problem i praktiken trots allt. Speciellt CSS ska ju ganska snabbt nå ett stabilt stadium. De flesta sidor på internet klarar ju sig utan denna fullösning.

Visa signatur

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.

Permalänk
Musikälskare
Skrivet av phz:

En sätt som _alltid_ fungerar i praktiken, men som inte är den teoretiskt snyggaste lösningen, är att lägga ett dynamiskt genererat slumpargument till URL:en. För PHP: sätt t ex

$no_cache = microtime();

någonstans tidigt i dokumentet. Skriv därefter länkar som

<a href="index.php?<?php echo $no_cache; ?>">

så kommer URL:en alltid vara annorlunda.

För att lösa det gällande första sidan så kan du lägga t ex

if (!isset($_GET['no-cache'])) { header('Location: index.php?no-cache=' . $no_cache); exit; }

högst upp (eller ja, efter att `$no_cache` satts). Detta skulle också kunna vara ett alternativ till alla andra sidor, i stället för att ha "fula" länkar. Ytterligare ett sätt för att inte fula till URL:en kan vara att skicka `POST`-värden i stället, men jag har inte utforskat det.

Detta är ingen snygg lösning, men den är fungerande. Jag använder den på en intern sida för uppdatering och kontroll av lagerstatus. Jag hade kanske inte vilja exponera lösningen mot kund dock, men den kanske kan vara ett uppslag för andra idéer. Man skulle kunna dölja det fula "no_cache="-värdet mha javascript eller något om man vill snygga till det, men det känns bökigt.

En annan fråga är hur ofta du kommer uppdatera sidan när den väl är fungerande. Det kanske inte blir något större problem i praktiken trots allt. Speciellt CSS ska ju ganska snabbt nå ett stabilt stadium. De flesta sidor på internet klarar ju sig utan denna fullösning.

Tack för tipset, du har inte någon ide på hur man kan dölja taggen med JS?

Visa signatur

❀ Monitor: ASUS Swift 27" @ 1440p/165Hz ❀ CPU: Ryzen 7700X ❀ Cooling: Corsair H170i ELITE 420mm ❀ GPU: MSI 3080 Ti SUPRIM X ❀ Memory: Corsair 32GB DDR5 Vengeance ❀ Motherboard: ASUS Crosshair X670E Hero ❀ M.2: Samsung 980 Pro ❀ PSU: Corsair HX1200 ❀ Chassi: Corsair 7000X ❀ Time Spy: 19 340

📷 Mina fotografier
🎧 Vad lyssnar du på just nu?