Wymuś przeglądarkę, aby odświeżyła css, javascript itp

Tworzę stronę internetową w oparciu o kod źródłowy Wordpress za pośrednictwem XAMPP. Czasami zmieniam kod CSS, skrypty lub coś innego i zauważam, że moja przeglądarka potrzebuje czasu, aby wprowadzić modyfikacje. To prowadzi mnie do używania wielu przeglądarek do odświeżania jednej, a jeśli nie stosuję nowych stylów, próbuję drugiej i zawsze tak jest.

Czy jest jakiś sposób na uniknięcie tego problemu? Czasami zmieniam kod bez uprzedzenia o poprzednich modyfikacjach.

Ogólne rozwiązanie

Naciśnięcie Ctrl+ F5(lub Ctrl+ Shift+ R), aby wymusić ponowne załadowanie pamięci podręcznej. Uważam, że komputery Mac używają Cmd+ Shift+ R.

PHP

W PHP możesz wyłączyć pamięć podręczną, ustawiając datę wygaśnięcia na godzinę z przeszłości z nagłówkami:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Chrom

Pamięć podręczną Chrome można wyłączyć, otwierając narzędzia programistyczne za pomocą F12, klikając ikonę koła zębatego w prawym dolnym rogu i wybierając opcję Wyłącz pamięć podręczną w oknie dialogowym ustawień, na przykład:

^{Obraz zaczerpnięty z tej odpowiedzi .}

Firefox

Wpisz about:configw pasku adresu URL, a następnie znajdź wpis zatytułowany network.http.use-cache. Ustaw to na false.

Jeśli chcesz tego uniknąć po stronie klienta, możesz dodać coś takiego jak ?v=1.xlink do pliku css, gdy zawartość pliku zostanie zmieniona. na przykład, jeśli tak <link rel="stylesheet" type="text/css" href="css-file-name.css">, możesz to zmienić na <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">to ominie buforowanie.

Jeśli potrafisz pisać php, możesz napisać:

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

Zawsze się odświeży!

EDYCJA: Oczywiście nie jest to praktyczne dla całej witryny, ponieważ nie dodawałbyś tego ręcznie do wszystkiego.

Sprawdź: Jak zmusić przeglądarkę do korzystania z najnowszej wersji mojego arkusza stylów?

Zakładając, że plik css to foo.css, możesz zmusić klienta do korzystania z najnowszej wersji, dołączając ciąg zapytania, jak pokazano poniżej.

<link rel="stylesheet" href="foo.css?v=1.1">

Punkt widzenia programisty
Jeśli jesteś w trybie programistycznym (jak w pierwotnym pytaniu), najlepszym rozwiązaniem jest wyłączenie buforowania w przeglądarce za pomocą metatagów HTML. Aby to podejście było uniwersalne, musisz wstawić co najmniej trzy metatagi, jak pokazano poniżej.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

W ten sposób jako programista musisz tylko odświeżyć stronę, aby zobaczyć zmiany. Ale nie zapomnij skomentować tego kodu podczas produkcji, w końcu buforowanie jest dobrą rzeczą dla twoich klientów.

Tryb produkcyjny
Ponieważ w środowisku produkcyjnym zezwolisz na buforowanie, a Twoi klienci nie muszą wiedzieć, jak wymusić pełne przeładowanie lub jakąkolwiek inną sztuczkę, musisz zagwarantować, że przeglądarka załaduje nowy plik. I tak, w tym przypadku najlepszym rozwiązaniem, jakie znam, jest zmiana nazwy pliku.

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

Odświeży się, jeśli zmodyfikujesz.

Upewnij się, że to się nie dzieje z Twojego DNS. Na przykład Cloudflare ma to, w którym możesz włączyć tryb programowania, w którym wymusza czyszczenie arkuszy stylów i obrazów, ponieważ Cloudflare oferuje przyspieszoną pamięć podręczną. Spowoduje to wyłączenie go i wymusi aktualizację za każdym razem, gdy ktoś odwiedza Twoją witrynę.

Spróbuj wyczyścić pamięć podręczną przeglądarki.

Możesz wyłączyć buforowanie za pomocą paska narzędzi programisty przeglądarki Firefox.

To rozszerzenie Firefoksa było jedynym rozwiązaniem, które mogłem uruchomić: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/

Przyjęta powyżej odpowiedź jest prawidłowa. Jeśli jednak chcesz tylko okresowo ponownie ładować pamięć podręczną i używasz przeglądarki Firefox, narzędzia dla programistów WWW (w menu Narzędzia od listopada 2015 r.) Udostępniają opcję Sieć. Obejmuje to przycisk Odśwież. Wybierz opcję Załaduj ponownie, aby jednorazowo zresetować pamięć podręczną.

Jeśli chcesz mieć pewność, że te pliki są poprawnie odświeżane przez Chrome dla wszystkich użytkowników, to musisz mieć must-revalidatew Cache-Controlnagłówku. Spowoduje to ponowne sprawdzenie plików przez Chrome, aby sprawdzić, czy trzeba je ponownie pobrać.

Polecam następujący nagłówek odpowiedzi:

Cache-Control: must-validate

To informuje Chrome, aby sprawdził serwer i sprawdził, czy jest nowszy plik. Jeśli istnieje nowszy plik, otrzyma go w odpowiedzi. Jeśli nie, otrzyma odpowiedź 304 i pewność, że ta w pamięci podręcznej jest aktualna.

Jeśli NIE ustawisz tego nagłówka, to w przypadku braku innych ustawień, które unieważnią plik, Chrome nigdy nie sprawdzi z serwerem, czy jest dostępna nowsza wersja.

Oto post na blogu, który dalej omawia ten problem.

Zamiast link-tag w html-head do zewnętrznego pliku css, użyj php-include:

<style>
<?php
include("style.css");
?>      
</style>

Trochę hack, ale na mnie działa :)

Zdecydowałem, że ponieważ przeglądarki nie sprawdzają nowych wersji plików css i js, zmieniam nazwy katalogów css i js za każdym razem, gdy wprowadzam zmianę. Używam css1 do css9 i js1 do js9 jako nazw katalogów. Kiedy dochodzę do 9, zaczynam od nowa od 1. To jest ból, ale za każdym razem działa idealnie. To śmieszne, gdy trzeba kazać użytkownikom pisać.

Mam przypadek, w którym muszę mieć możliwość tworzenia i zmiany moich arkuszy stylów zdalnie, wpływając na tysiące klientów, ale ze względu na ryzyko dużego obciążenia sieci nie wyłączam pamięci podręcznej.

Ponieważ mogę zdalnie zmieniać zawartość HTML, łączę arkusz stylów z hashcode pasującym do zawartości arkusza stylów.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

To powiedziawszy, używam również funkcji javascript po stronie klienta, aby ostrożnie zastępować węzły i atrybuty, gdy zmienia się zawartość HTML, co oznacza, że ​​tag linku arkusza stylów nie zostanie zastąpiony, zmieni się tylko atrybut href.

Ten scenariusz działa dobrze w Chrome, Firefox i Edge w systemie Windows, także w Chrome na Androidzie, ale nie zawsze działa w klientach internetowych na Androida, ku mojemu zaskoczeniu. Więc mniej więcej szukam czegoś, co wymusi / uruchomi aktualizację za pomocą javascript - optymalnie bez konieczności ponownego ładowania strony.

Spróbuj tego:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

Jeśli potrzebujesz czegoś po znaku „?” to jest inne za każdym razem, gdy strona jest otwierana, wtedy time()zrobi to. Pozostawienie tego w kodzie na stałe nie jest dobrym pomysłem, ponieważ spowolni tylko ładowanie strony i prawdopodobnie nie jest konieczne.

Odkryłem, że wymuszenie odświeżenia arkusza stylów jest pomocne, jeśli dokonałeś rozległych zmian w układzie strony, a dostęp do nowego arkusza stylów jest niezbędny, aby na ekranie pojawiło się coś sensownego.