İstemcileri JavaScript dosyalarını yenilemeye nasıl zorlayabilirim?

Şu anda özel bir beta sürümünde çalışıyoruz ve bu yüzden hala oldukça hızlı değişiklikler yapma sürecindeyiz, açıkçası kullanım hızlanmaya başlasa da bu süreci yavaşlatacağız. Bununla birlikte, karşılaştığımız bir sorun, yeni JavaScript dosyalarıyla bir güncelleme çıkardıktan sonra, istemci tarayıcılarının hala dosyanın önbelleğe alınmış sürümünü kullanması ve güncellemeyi görmemeleridir. Açıkçası, bir destek çağrısında, ctrlF5sunucudan güncel dosyaları aldıklarından emin olmak için onları bir yenileme yapmaları için bilgilendirebiliriz , ancak bunu o zamandan önce işlemek tercih edilir.

Mevcut düşüncemiz, JavaScript dosyalarının adına bir sürüm numarası eklemek ve daha sonra değişiklikler yapıldığında, komut dosyasındaki sürümü artırmak ve tüm referansları güncellemektir. Bu kesinlikle işi yapar, ancak her sürümdeki referansları güncellemek hantal olabilir.

Eminim ki bununla ilk ilgilenen biz değiliz, bunu topluma atacağım diye düşündüm. Kodunuzu güncellediğinizde istemcilerin önbelleklerini güncellemelerini nasıl sağlıyorsunuz? Yukarıda açıklanan yöntemi kullanıyorsanız, değişikliği basitleştiren bir işlem kullanıyor musunuz?

Bildiğim kadarıyla ortak bir çözüm ?<version>betiğin src bağlantısına bir eklemektir .

Örneğin:

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

Bu noktada tüm komut dosyası etiketlerinde bu "sürüm numaralarını" artırmak için find-replace daha iyi bir yolu olmadığını varsayalım?

Bunu sizin için bir sürüm kontrol sisteminiz olabilir mi? Çoğu sürüm kontrol sistemi, check-in sırasında revizyon numarasını otomatik olarak enjekte etmenin bir yoluna sahiptir.

Bunun gibi bir şey olurdu:

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

Tabii ki, her zamanki gibi iyi çözüm vardır bu bir .

URL'ye şimdiki zamanı eklemek gerçekten yaygın bir çözümdür. Ancak bunu isterseniz web sunucusu düzeyinde de yönetebilirsiniz. Sunucu, javascript dosyaları için farklı HTTP başlıkları gönderecek şekilde yapılandırılabilir.

Örneğin, dosyayı 1 günden daha uzun süre önbelleğe alınmaya zorlamak için şunları gönderirsiniz:

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

Beta için, kullanıcıyı her zaman en son sürümü almaya zorlamak istiyorsanız şunu kullanırsınız:

Cache-Control: no-cache, must-revalidate

Google Sayfa Hızı: Statik kaynaklar için URL'ye bir sorgu dizesi eklemeyin. Çoğu proxy, en önemlisi Squid sürüm 3.0 aracılığıyla, bir "?" yanıtta bir Cache-control: public header olsa bile URL'sinde. Bu kaynaklar için proxy önbelleğe almayı etkinleştirmek için, sorgu dizelerini statik kaynaklara yapılan başvurulardan kaldırın ve bunun yerine parametreleri dosya adlarının içine kodlayın.

Bu durumda, URL eski haline sürümünü içerebilir: http://abc.com/ v1.2 /script.js ve bağlantısını yönlendirmek için apache mod_rewrite kullanmak http://abc.com/script.js . Sürümü değiştirdiğinizde istemci tarayıcı yeni dosyayı güncelleyecektir.

Bu kullanım reddedildi: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Bu yanıt sadece 6 yıl gecikti, ancak bu yanıtı pek çok yerde göremiyorum ... HTML5, bu sorunu çözmek için kullanılan Uygulama Önbelleğini tanıttı . Yazdığım yeni sunucu kodunun insanların tarayıcılarında saklanan eski javascript'i çökerttiğini buluyordum, bu yüzden onların javascript'ini sona erdirmenin bir yolunu bulmak istedim. Şuna benzeyen bir bildirim dosyası kullanın:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

ve kullanıcıların önbelleklerini her güncellemelerini istediğinizde bu dosyayı yeni bir zaman damgasıyla oluşturun. Bunu eklerseniz Bir yan not olarak, tarayıcı olacak değil tezahür saatleri arasında (kullanıcı yenilendiğinde sayfa bile) onu söyler yükleyin.

Dosya boyutunu bir load parametresi olarak eklemeye ne dersiniz?

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

Böylece dosyayı her güncellediğinizde "filever" parametresi değişir.

Dosyayı güncellediğinizde ve güncelleme sonuçlarınız aynı dosya boyutunda olduğunda ne dersiniz? ihtimaller neler?

Tüm tarayıcılar '?' içinde. Mümkün olduğunca önbelleğe alındığından emin olmak için ne yaptım, sürümü dosya adına ekledim.

Yani yerine stuff.js?123, ben yaptımstuff_123.js

Kullandığım mod_redirectiçin apache içinde (Sanırım) have stuff_*.jsgitmek içinstuff.js

ASP.NET sayfaları için aşağıdakileri kullanıyorum

ÖNCE

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

SONRASI (zorla yükleme)

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

DateTime.Now.Ticks eklemek çok iyi çalışıyor.

ASP.NET için gelişmiş seçeneklerle (hata ayıklama / bırakma modu, sürümler) sonraki çözümü varsayalım:

Js veya Css dosyaları bu şekilde dahil edilmiştir:

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

Global.JsPostfix ve Global.CssPostfix, Global.asax içinde şu şekilde hesaplanır:

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();
    }
    ...
}

Günümüzde yaygın uygulama, tarayıcıyı özellikle IE'yi javascript dosyalarını veya css dosyalarını yeniden yüklemeye zorlamak için dosya adının bir parçası olarak bir içerik karma kodu oluşturmaktır.

Örneğin,

SATICI. a7561fb0e9a071baadb9 .js
ana. b746e3eb72875af2caa9 .js

Bu genellikle webpack gibi derleme araçlarının işidir. Webpack kullanıyorsanız denemek isteyen varsa daha fazla ayrıntı .

JS dosyalarına bağlanan sayfayı oluşturuyorsanız, dosyanın oluşturulan son değişiklik zaman damgasını oluşturulan bağlantılara basit bir çözüm eklemektir.

Bu, Huppie'nin cevabına çok benzer, ancak anahtar kelime değiştirme olmadan sürüm kontrol sistemlerinde çalışır. Ayrıca, geçerli saati eklemekten daha iyidir, çünkü dosya hiç değişmediğinde bile önbelleğe almayı önleyecektir.

JQuery işlevi getScript, sayfa her yüklendiğinde bir js dosyasının gerçekten yüklenmesini sağlamak için de kullanılabilir.

Ben böyle yaptım:

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

Http://api.jquery.com/jQuery.getScript/ adresindeki işlevi kontrol edin

Varsayılan olarak, $ .getScript () önbellek ayarını false olarak ayarlar. Bu, tarayıcının her istendiğinde komut dosyasını indirmesini sağlamak için istek URL'sine zaman damgalı bir sorgu parametresi ekler.

In PHP :

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

In HTML :

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

Nasıl çalışır:

HTML'de filepathve adını istediğiniz gibi yazın, ancak yalnızca işleve. PHP filetimedosyayı alır ve filepath+name+"?"+timeen son değişikliği döndürür

Kullanıcılar için bir SaaS oluşturuyoruz ve web sitelerine ekleyecekleri bir komut dosyası sağlıyoruz ve kullanıcı işlevselliği için komut dosyasını web sitelerine ekleyeceği ve onları zorlayamadığım için komut dosyasıyla bir sürüm eklemek mümkün değildi betiği her güncellediğimizde sürümü değiştirmek için

Bu nedenle, kullanıcı orijinal komut dosyasını her aradığında komut dosyasının daha yeni sürümünü yüklemenin bir yolunu bulduk

kullanıcıya sağlanan komut dosyası bağlantısı

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

komut dosyası

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
}

Açıklama:

Kullanıcı kendilerine sağlanan komut dosyasını web sitelerine ekledi ve jQuery seçiciyi kullanarak veya betiğe eklenmiş benzersiz simgenin var olup olmadığını kontrol ettik ve eğer değilse, daha yeni jeton (veya sürüm) ile dinamik olarak yükleyin

Bu, aynı komut dosyasını bir performans sorunu olabilecek iki kez çağırır, ancak sürümü kullanıcıya veya istemciye verilen gerçek komut dosyası bağlantısına koymadan komut dosyasını önbellekten yüklememeye zorlama sorununu gerçekten çözer

Yasal Uyarı: Performans sizin durumunuzda büyük bir sorunsa kullanmayın.

Asp.net mvc dosyasında js dosya sürüm numarası için @ DateTime.UtcNow.ToString () kullanabilirsiniz . Sürüm numarası otomatik tarih ile değiştirmek ve istemciler tarayıcı otomatik olarak js dosyasını yenilemek için zorlar. Bu yöntemi kullanıyorum ve bu iyi çalışıyor.

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

location.reload (doğru);

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

Bu sorundan kaçmak için javascript'in tarayıcının önbelleği yerine web sunucusundan yeniden alındığından emin olmak için bu kod satırını dinamik olarak çağırıyorum.

Bir çözüm, kaynak getirilirken URL'ye içinde zaman damgası bulunan bir sorgu dizesi eklemektir. Bu, bir tarayıcının, içinde sorgu dizeleri bulunan URL'lerden getirilen kaynakları önbelleğe almamasından yararlanır.

Muhtemelen tarayıcının bu kaynakları hiç önbelleğe almamasını istemezsiniz; bunların önbelleğe alınmasını istemeniz daha olasıdır, ancak tarayıcının kullanılabilir hale getirildiğinde dosyanın yeni bir sürümünü almasını istiyorsunuz.

En yaygın çözüm, dosya adının kendisine bir zaman damgası veya revizyon numarası gömmek gibi görünüyor. Bu biraz daha fazla iştir, çünkü kodunuzun doğru dosyaları istemek için değiştirilmesi gerekir, ancak örneğin sürümünüzün yayınlanmasına kadar snazzy_javascript_file.js(örneğin snazzy_javascript_file_7.js) sürümünüzün 7 sürümü tarayıcıda önbelleğe alınır ve kodunuz olarak değişir. snazzy_javascript_file_8.jsyerine getir .

file.js?V=1Over a kullanmanın avantajı fileV1.js, JavaScript dosyalarının birden çok sürümünü sunucuda depolamanıza gerek olmamasıdır.

Gördüğüm sorun file.js?V=1, kütüphane yardımcı programlarının yeni sürümünü kullanırken bozulan başka bir JavaScript dosyasında bağımlı kodunuz olabilir.

Geriye dönük uyumluluk uğruna , gerekirse eski sayfaları yükseltmeye hazır olana kadar jQuery.1.3.jsyeni sayfalarınız için kullanmanın ve mevcut sayfaların kullanılmasının daha iyi olduğunu düşünüyorum jQuery.1.1.js.

GETTarayıcı önbelleğini önlemek için bir sürüm değişkeni kullanın .

?v=AUTO_INCREMENT_VERSIONURL'nizin sonuna eklemek, tarayıcının önbelleğe alınmasını önler - önbelleğe alınmış tüm komut dosyalarından kaçınır.

Meslektaşım, http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/ adresinde yayınladıktan hemen sonra bu yönteme bir referans buldu . Başkalarının onu kullandığını görmek güzel ve işe yarıyor gibi görünüyor. Bu noktada tüm komut dosyası etiketlerinde bu "sürüm numaralarını" artırmak için find-replace daha iyi bir yolu olmadığını varsayalım?

Çerçeveye özgü olmasına rağmen, Django 1.4, yukarıdaki cevaptaki 'greenfelt' sitesine bağlantı ile benzer şekilde çalışan bu işleve sahiptir.

Bir etiket yardımcısı aracılığıyla ASP.NET Core'da Cache Busting bunu sizin için halledecek ve tarayıcınızın dosya değişene kadar önbelleğe alınmış komut dosyalarını / css tutmasına izin verecektir. Scrip (js) veya link (css) etiketine helper asp-append-version = "true" etiketini eklemeniz yeterlidir:

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

Dave Paquette'in iyi bir örneği ve burada önbellek bozma açıklaması (sayfanın altında) Önbellek Bozma

En basit çözüm? Tarayıcının hiçbir şekilde önbelleklemesine izin vermeyin. Geçerli saati (ms cinsinden) sorgu olarak ekleyin.

(Hala beta sürümündesiniz, bu nedenle performansı optimize etmemek için makul bir durum ortaya koyabilirsiniz. Ancak YMMV burada.)

Basit bir yol. Htaccess'i düzenle

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]

Aşağıda benim için çalıştı:

<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>