Jak zmusić klientów do odświeżania plików JavaScript?

Obecnie pracujemy w prywatnej wersji beta, dlatego wciąż jesteśmy w trakcie wprowadzania dość szybkich zmian, chociaż oczywiście, ponieważ zużycie zaczyna rosnąć, spowolnimy ten proces. Biorąc to pod uwagę, jednym z problemów, na który napotykamy, jest to, że po opublikowaniu aktualizacji z nowymi plikami JavaScript przeglądarki przeglądarki nadal używają buforowanej wersji pliku i nie widzą aktualizacji. Oczywiście w przypadku wezwania pomocy technicznej możemy po prostu poinformować ich, aby zrobili ctrlF5odświeżenie, aby upewnić się, że otrzymają aktualne pliki z serwera, ale lepiej byłoby to zrobić przed tym czasem.

Naszą obecną myślą jest po prostu dołączyć numer wersji do nazwy plików JavaScript, a następnie po wprowadzeniu zmian, zwiększyć wersję skryptu i zaktualizować wszystkie odwołania. To zdecydowanie kończy pracę, ale aktualizacja referencji na każdym wydaniu może być uciążliwa.

Ponieważ jestem pewien, że nie jesteśmy pierwszymi, którzy sobie z tym poradzą, pomyślałem, że wyrzucę to społeczności. W jaki sposób zapewniasz klientom aktualizację pamięci podręcznej podczas aktualizacji kodu? Jeśli korzystasz z metody opisanej powyżej, czy korzystasz z procesu, który upraszcza zmianę?

O ile mi wiadomo, powszechnym rozwiązaniem jest dodanie ?<version>linku do skryptu src.

Na przykład:

<script type="text/javascript" src="myfile.js?1500"></script>

Zakładam w tym momencie, że nie ma lepszego sposobu niż znaleźć-zamień, aby zwiększyć te „numery wersji” we wszystkich znacznikach skryptu?

Być może system kontroli wersji to dla Ciebie robi? Większość systemów kontroli wersji ma możliwość automatycznego wstrzykiwania numeru wersji na przykład podczas odprawy.

Wyglądałoby to tak:

<script type="text/javascript" src="myfile.js?$$REVISION$$"></script>

Oczywiście zawsze są lepsze rozwiązania takie jak to .

Dołączanie aktualnego czasu do adresu URL jest rzeczywiście powszechnym rozwiązaniem. Możesz jednak również zarządzać tym na poziomie serwera WWW, jeśli chcesz. Serwer można skonfigurować do wysyłania różnych nagłówków HTTP dla plików javascript.

Na przykład, aby wymusić buforowanie pliku na czas nie dłuższy niż 1 dzień, wyślij:

Cache-Control: max-age=86400, must-revalidate

W przypadku wersji beta, jeśli chcesz zmusić użytkownika, aby zawsze otrzymywał najnowsze, użyj:

Cache-Control: no-cache, must-revalidate

Google Page-Speed: nie dołączaj ciągu zapytania do adresu URL zasobów statycznych. Większość serwerów proxy, zwłaszcza Squid w wersji 3.0, nie buforuje zasobów za pomocą „?” w ich adresie URL, nawet jeśli w odpowiedzi występuje nagłówek Cache-control: public. Aby włączyć buforowanie proxy dla tych zasobów, usuń ciągi zapytania z odniesień do zasobów statycznych i zamiast tego zakoduj parametry w samych nazwach plików.

W takim przypadku możesz dołączyć wersję do adresu URL np .: http://abc.com/ v1.2 /script.js i użyć apache mod_rewrite, aby przekierować link do http://abc.com/script.js . Po zmianie wersji przeglądarka klienta zaktualizuje nowy plik.

To użycie zostało usunięte: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Ta odpowiedź jest spóźniona tylko o 6 lat, ale nie widzę tej odpowiedzi w wielu miejscach ... HTML5 wprowadził bufor aplikacji, który służy do rozwiązania tego problemu. Odkryłem, że nowy kod serwera, który piszę, powoduje awarię starego javascript przechowywanego w przeglądarkach ludzi, więc chciałem znaleźć sposób na wygaśnięcie ich javascript. Użyj pliku manifestu, który wygląda następująco:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

i generuj ten plik z nowym znacznikiem czasu za każdym razem, gdy chcesz, aby użytkownicy aktualizowali pamięć podręczną. Na marginesie, jeśli dodasz to, przeglądarka nie przeładuje się (nawet gdy użytkownik odświeży stronę), dopóki manifest tego nie powie.

Co powiesz na dodanie rozmiaru pliku jako parametru ładowania?

<script type='text/javascript' src='path/to/file/mylibrary.js?filever=<?=filesize('path/to/file/mylibrary.js')?>'></script>

Dlatego przy każdej aktualizacji pliku zmienia się parametr „filever”.

Co powiesz na to, kiedy zaktualizujesz plik, a twoja aktualizacja będzie miała ten sam rozmiar? jakie są szanse?

Nie wszystkie przeglądarki buforują pliki za pomocą „?”w tym. To, co zrobiłem, aby upewnić się, że jest buforowane w jak największym stopniu, umieściłem wersję w nazwie pliku.

Więc zamiast tego stuff.js?123zrobiłemstuff_123.js

Użyłem mod_redirect(tak myślę) w apache, have stuff_*.jsaby przejśćstuff.js

Do stron ASP.NET używam następujących

PRZED

<script src="/Scripts/pages/common.js" type="text/javascript"></script>

PO (wymuszenie przeładowania)

<script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>

Dodanie DateTime.Now.Ticks działa bardzo dobrze.

Dla ASP.NET przypuszczam, że następne rozwiązanie z zaawansowanymi opcjami (tryb debugowania / wydania, wersje):

Pliki Js lub Css zawarte w ten sposób:

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix i Global.CssPostfix jest obliczany w następujący sposób w Global.asax:

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif      
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

Obecnie powszechną praktyką jest generowanie kodu skrótu treści jako części nazwy pliku, aby zmusić przeglądarkę, szczególnie IE, do ponownego załadowania plików javascript lub plików css.

Na przykład,

sprzedawca. a7561fb0e9a071baadb9 .js
main. b746e3eb72875af2caa9 .js

Generalnie jest to zadanie dla narzędzi do budowania, takich jak webpack. Oto więcej szczegółów, jeśli ktoś chce wypróbować, jeśli używasz pakietu internetowego.

Jeśli generujesz stronę z linkami do plików JS, prostym rozwiązaniem jest dodanie znacznika czasu ostatniej modyfikacji pliku do wygenerowanych linków.

Jest to bardzo podobne do odpowiedzi Huppie, ale działa w systemach kontroli wersji bez podstawiania słów kluczowych. Jest to również lepsze niż dodawanie aktualnego czasu, ponieważ zapobiegnie to buforowaniu, nawet jeśli plik w ogóle się nie zmieni.

Funkcji jQuery getScript można również użyć do zapewnienia, że ​​plik js jest rzeczywiście ładowany za każdym razem, gdy strona jest ładowana.

Oto jak to zrobiłem:

$(document).ready(function(){
    $.getScript("../data/playlist.js", function(data, textStatus, jqxhr){
         startProgram();
    });
});

Sprawdź funkcję na stronie http://api.jquery.com/jQuery.getScript/

Domyślnie $ .getScript () ustawia ustawienie pamięci podręcznej na false. To dodaje parametr zapytania z datownikiem do adresu URL żądania, aby zapewnić, że przeglądarka pobierze skrypt za każdym razem, gdy zostanie o to poproszony.

W PHP :

function latest_version($file_name){
    echo $file_name."?".filemtime($_SERVER['DOCUMENT_ROOT'] .$file_name);
}

W HTML :

<script type="text/javascript" src="<?php latest_version('/a-o/javascript/almanacka.js'); ?>">< /script>

Jak to działa:

W HTML, napisz filepathi nazwij jak chcesz, ale tylko w funkcji. PHP pobiera filetimeplik i zwraca filepath+name+"?"+timeostatnią zmianę

Tworzymy SaaS dla użytkowników i udostępniamy im skrypt do dołączenia na stronie ich witryny, a nie było możliwe załączenie wersji ze skryptem, ponieważ użytkownik dołącza skrypt do swojej witryny pod kątem funkcjonalności i nie mogę ich zmusić zmieniać wersję za każdym razem, gdy aktualizujemy skrypt

Znaleźliśmy sposób na ładowanie nowszej wersji skryptu za każdym razem, gdy użytkownik wywoła oryginalny skrypt

link do skryptu udostępniony użytkownikowi

<script src="https://thesaasdomain.com/somejsfile.js" data-ut="user_token"></script>

plik skryptu

if($('script[src^="https://thesaasdomain.com/somejsfile.js?"]').length !== 0) {
   init();
} else {
   loadScript("https://thesaasdomain.com/somejsfile.js?" + guid());
}

var loadscript = function(scriptURL) {
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = scriptURL;
   head.appendChild(script);
}

var guid = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

var init = function() {
    // our main code
}

Wyjaśnienie:

Użytkownik załączył dostarczony im skrypt na swojej stronie internetowej i sprawdziliśmy, czy istnieje unikalny token dołączony do skryptu lub nie używa on selektora jQuery, a jeśli nie, to załaduj go dynamicznie nowszym tokenem (lub wersją)

Nazywa się to dwukrotnie tym samym skryptem, co może być problemem z wydajnością, ale naprawdę rozwiązuje problem zmuszania skryptu, aby nie ładował się z pamięci podręcznej bez umieszczenia wersji w rzeczywistym łączu skryptu podanym użytkownikowi lub klientowi

Oświadczenie: Nie używaj, jeśli wydajność jest dużym problemem w twoim przypadku.

W asp.net mvc możesz użyć @ DateTime.UtcNow.ToString () dla numeru wersji pliku js. Automatyczna zmiana numeru wersji wraz z datą i zmuszanie przeglądarki klienta do automatycznego odświeżania pliku js. Korzystam z tej metody i działa to dobrze.

<script src="~/JsFilePath/JsFile.js?v=@DateTime.UtcNow.ToString()"></script>

location.reload (true);

patrz https://www.w3schools.com/jsref/met_loc_reload.asp

Dynamicznie wywołuję ten wiersz kodu, aby upewnić się, że javascript został ponownie pobrany z serwera WWW zamiast z pamięci podręcznej przeglądarki w celu uniknięcia tego problemu.

Jednym z rozwiązań jest dołączenie ciągu zapytania ze znacznikiem czasu do adresu URL podczas pobierania zasobu. Wykorzystuje to fakt, że przeglądarka nie buforuje zasobów pobranych z adresów URL zawierających ciągi zapytań.

Prawdopodobnie nie chcesz, aby przeglądarka w ogóle nie buforowała tych zasobów; bardziej prawdopodobne jest, że chcesz je buforować, ale chcesz, aby przeglądarka pobierała nową wersję pliku, gdy jest on dostępny.

Najczęstszym rozwiązaniem wydaje się osadzenie znacznika czasu lub numeru wersji w samej nazwie pliku. Jest to trochę więcej pracy, ponieważ kod musi zostać zmodyfikowany, aby zażądać poprawnych plików, ale oznacza to, że np. Wersja 7 twojego snazzy_javascript_file.js(tj. snazzy_javascript_file_7.js) Jest buforowana w przeglądarce aż do wydania wersji 8, a następnie twój kod zmienia się na pobierz snazzy_javascript_file_8.jszamiast tego.

Zaletą korzystania z file.js?V=1ponad fileV1.jsto, że nie trzeba do przechowywania wielu wersji plików JavaScript na serwerze.

Problem, który widzę, file.js?V=1polega na tym, że możesz mieć kod zależny w innym pliku JavaScript, który psuje się podczas korzystania z nowej wersji narzędzi bibliotecznych.

Ze względu na zgodność z poprzednimi wersjami uważam, że znacznie lepiej jest używać jQuery.1.3.jsnowych stron i zezwalać na korzystanie z istniejących stron jQuery.1.1.js, dopóki nie będzie można zaktualizować starszych stron, jeśli to konieczne.

Użyj GETzmiennej wersji , aby zapobiec buforowaniu przeglądarki.

Dołączenie ?v=AUTO_INCREMENT_VERSIONna końcu adresu URL zapobiega buforowaniu przeglądarki - unikając wszystkich buforowanych skryptów.

Mój kolega właśnie znalazł odniesienie do tej metody zaraz po tym, jak opublikowałem (w odniesieniu do css) na stronie http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/ . Dobrze widzieć, że inni go używają i wydaje się, że działa. Zakładam w tym momencie, że nie ma lepszego sposobu niż znaleźć-zamień, aby zwiększyć te „numery wersji” we wszystkich znacznikach skryptu?

Mimo że jest specyficzny dla ram, Django 1.4 ma tę funkcję, która działa w podobny sposób, jak link do strony „zielonej” w powyższej odpowiedzi

Pomijanie pamięci podręcznej w programie ASP.NET Core za pomocą pomocnika tagów zajmie się tym i pozwoli twojej przeglądarce przechowywać skrypty / css w pamięci podręcznej do momentu zmiany pliku. Po prostu dodaj tag pomocnika asp-append-version = "true" do tagu skryptu (js) lub linku (css):

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>

Dave Paquette ma dobry przykład i wyjaśnienie CacheBuster tutaj (na dole strony) Pomijanie pamięci podręcznej

Najprostsze rozwiązanie? Nie pozwól, aby przeglądarka w ogóle buforowała. Dołącz aktualny czas (w ms) jako zapytanie.

(Wciąż jesteś w fazie beta, więc możesz uzasadnić brak optymalizacji pod kątem wydajności. Ale YMMV tutaj.)

Jeden prosty sposób. Edytuj htaccess

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(jpe?g|bmp|png|gif|css|js|mp3|ogg)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v33|)v=33[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=33 [R=301,L]

Poniżej pracował dla mnie:

<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
</head>