Tarayıcı önbelleği programlı olarak nasıl boşaltılır?

121

Tarayıcı önbelleğini programlı olarak boşaltmanın bir yolunu arıyorum. Bunu yapıyorum çünkü uygulama gizli verileri önbelleğe alıyor ve "oturumu kapat" a bastığınızda bunları kaldırmak istiyorum. Bu, sunucu veya JavaScript aracılığıyla olur. Tabii ki, yazılımı yabancı / halka açık bilgisayarda kullanmak hala tavsiye edilmez, çünkü yazılım düzeyinde yenemeyeceğiniz tuş kaydediciler gibi daha fazla tehlike vardır.

— Kule
kaynak

3

Hangi tarayıcılar? Ayrıca, tarayıcıya sunucudan neyi önbelleğe almaması gerektiğini söyleyen veya onu silmeye çalışmalısınız.

— Mech Software

Ayrıca, Önbelleğe Alma ve nasıl çalıştığı hakkındaki bu eğiticiye de göz atmak isteyebilirsiniz. mnot.net/cache_docs kapakları böyle kontrol başlıklarını ve malzeme önbelleğe

— scrappedcola

@MechSoftware Daha hızlı sayfa yüklemeleri için önbelleğe almak istiyorum, ancak oturumu kapattıktan sonra temizlemek istiyorum. Tercihen olabildiğince iyi bir tarayıcı desteği.

— Kule

2

@rFactor Hiç kimse web sitelerine önbelleği üzerinde denetim sağlayan bir tarayıcı kullanmaz.

— NullUserException

3

Fiili web siteleri, HTTP başlıklarını kontrol ettikleri için önbellek üzerinde kontrole sahiptir.

— Danubian denizci

38

Mümkün, jQuery'yi önbellek durumuna atıfta bulunan 'meta etiketi' bir olay işleyicisi / düğmesiyle değiştirmek için kullanabilir ve ardından kolayca yenileyebilirsiniz.

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){

            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

NOT: Bu çözüm, HTML 5 spesifikasyonunun bir parçası olarak uygulanan Uygulama Önbelleğine dayanır. Ayrıca, Uygulama Önbelleği bildirimini ayarlamak için sunucu yapılandırması da gerektirir. Bu, 'geleneksel' tarayıcı önbelleğini istemci veya sunucu tarafı kodu yoluyla temizleyebileceğiniz bir yöntemi tarif etmez, ki bunu yapmak neredeyse imkansızdır.

— Coşkulu Murapa
kaynak

Bu yalnızca bir HTML5 özelliği mi?

— John Naegle

Bunu söyleyebilirim ve bunun aynı zamanda sunucu yapılandırması gerektirdiğine inanıyorum (uygulama önbelleği bildirimini ayarlamak için). Bu cevap orijinal soruya bir çözüm sunarken, geleneksel tarayıcı önbelleğini istemci veya sunucu tarafı koduyla temizlemenin neredeyse imkansız olduğu gerçeğini gizler.

— Eric Fuller

Bu yöntem önbelleği atlıyor ve içeriği güncelliyor gibi görünüyor, ancak sayfa yeniden yüklendiğinde, önceden önbelleğe alınmış içeriğe geri dönüyor.

— basit

hizmet çalışanları için kullanımdan kaldırıldı developer.mozilla.org/en-US/docs/Web/HTML/…

— nadav

2

servis çalışanları iPhone'larda çalışmıyor, bu yüzden orada uygulama önbelleğini kullanmanız gerekiyor

— tony

159

Orada hiçbir şekilde bir tarayıcı önbelleğini temizleyin izin verir. Bu mümkün olsaydı çok büyük bir güvenlik sorunu olurdu. Bu çok kolay bir şekilde kötüye kullanılabilir - bir tarayıcının böyle bir "özelliği" desteklediği dakika, onu bilgisayarımdan kaldırdığım dakika olacaktır.

Ne yapabilirsiniz yapmak bu meta etiketleri uygun başlıkları gönderme veya kullanarak, sayfanızı önbelleğe değil söylemektir:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Maalesef bunu yapmanın standart bir yolu olsa da, form alanlarında otomatik tamamlamayı kapatmayı da düşünebilirsiniz ( bu soruya bakın ).

Ne olursa olsun, hassas verilerle çalışıyorsanız, SSL kullanmanız gerektiğini belirtmek isterim. SSL kullanmıyorsanız, ağa erişimi olan herkes ağ trafiğini koklayabilir ve kullanıcınızın ne gördüğünü kolayca görebilir.

SSL kullanmak da bazı tarayıcılar yapar değil açıkça söylenmedikçe önbelleğe kullanın. Bu soruya bakın .

— NullUserException
kaynak

8

Kullanıcılarımı rahatsız etmek için web uygulamamın önbelleğini neden temizleyeyim? Bunu, önbelleğe alınmış özel verilerin izlerini temizlemek için yapmak istiyorum. Tarayıcıya önbelleğe almamasını söylersem, sayfa her yüklendiğinde megabaytlarca istemci tarafı veri istemesi gerekir ki bu da yapmak istemiyorum.

— Kule

27

kimse yapmazdı, çünkü belli ki bu mümkün olmayacaktı. Komut dosyalarını başka bir kaynaktan çalıştıramayacağınız gibi, kendi kökeninizde bir komut dosyası çalıştıramayacağınız anlamına gelmez. Uzak bir kaynaktan önbelleği temizleyemiyorsanız, bu mantıklıdır, ancak kodu çalıştırdığım kaynağın önbelleğini neden temizleyemiyorum? Olmaması için bir sebep yok, bu yüzden buna bir çözüm var mı bakıyorum, ama bu mümkün değil gibi görünüyor. Bu kadar meraklıysanız size söyleyebilirim ki çok fazla CSS, HTML ve JS ile yaklaşık 6 MB derlenmiş büyük bir uygulamam var.

— Tower

4

@rFactor Bu çok fazla waaaay.

— NullUserException

14

Lütfen uygulama ne olursa olsun bunun bir güvenlik sorunu olacağını açıklayın. Bu güvenli bir şekilde uygulanabilir.

— Dan

22

Belki dün gece yeterince uyuyamadım, bir web uygulaması önbelleği temizleyebildiğinde ( değiştiremediğinde ) bu nasıl bir güvenlik sorunu olur ? Bunu nasıl istismar edebilirsin?

— Volker E.

19

html'nin kendisini kullanın. Kullanılabilecek bir numara vardır. İşin püf noktası, komut dosyası etiketindeki dosya adına bir parametre / dize eklemek ve değişiklikleri dosyaladığınızda bunu değiştirmektir.

<script src="myfile.js?version=1.0.0"></script>

Tarayıcı, "?" İşaretinden sonra gelse bile tüm dizeyi dosya yolu olarak yorumlar. parametrelerdir. Öyleyse şimdi ne olur, dosyanızı bir dahaki sefere güncellediğinizde, web sitenizdeki komut dosyası etiketindeki numarayı değiştirin (Örnek <script src="myfile.js?version=1.0.1"></script>) ve her kullanıcının tarayıcısı dosyanın değiştiğini görecek ve yeni bir kopya alacaktır.

— Joish
kaynak

1

Bazı sunucu tarafı dinamik dilini kullananlar için, dosyanın ctime, (veya mtime) 'e erişebiliyorsanız, sadece söz konusu zamanı arkasına ekleyebilirsiniz. Örneğin php'de myfile.js?v=<?=filectime('myfile.js');?>ve orada kaynaklarınız için kendinize bir otomatik güncelleme önbelleğine sahipsiniz.

— Pierre-Antoine Guillaume

Bu tekniği günlerce kullanıyordum. Ancak bugün, sürüm kısmını değiştirdikten sonra bile dosyanın hala önbellekten işlendiğini fark ettim. Chrome kullanıyordum. Dosyayı sunucudan sildikten sonra bile gösteriliyordu. Neden işe yaramayacağına dair herhangi bir bilgisi olan var mı?

— Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

Bu numara işe yarıyor, stackoverflow.com/questions/1922910/…

— Nevin

9

En iyi fikir, js dosya oluşturmayı adla + sürümle biraz karma yapmaktır, önbelleği temizlemeniz gerekiyorsa, yalnızca yeni karma ile yeni dosyalar oluşturun, bu tarayıcıyı yeni dosyaları yüklemesi için tetikler

— Amiral Ördek
kaynak

5

Başlangıçta tarayıcı önbelleğini temizlemek için html, JS'de çeşitli programatik yaklaşımı denedim. En son Chrome'da hiçbir şey çalışmaz.

Sonunda .htaccess ile bitirdim:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

Chrome, Firefox, Opera'da test edildi

Referans: https://wp-mix.com/disable-caching-htaccess/

— rajagopalx
kaynak

4

location.reload (doğru); önbelleği yok sayarak mevcut sayfayı yeniden yükleyecektir.
Cache.delete () ayrıca yeni chrome, firefox ve opera için de kullanılabilir.

— Jay Shah
kaynak

Bu işlev Internet explorer ve safari tarayıcısı ile çalışmaz. Microsoft Edge ile çalışıp çalışmadığından emin değilim.

— Meraklı Geliştirici

3

Chrome'da bunu kıyaslama uzantısını kullanarak yapabilmelisiniz. Chrome'unuzu aşağıdaki anahtarlarla başlatmanız gerekir:

./chrome --enable-benchmarking --enable-net-benchmarking

Chrome'un konsolunda artık şunları yapabilirsiniz:

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

Yukarıdaki komutlardan da anlayabileceğiniz gibi, yalnızca tarayıcı önbelleğini temizlemekle kalmaz, aynı zamanda DNS önbelleğini de temizler ve ağ bağlantılarını kapatır. Bunlar, sayfa yükleme süresi karşılaştırması yaparken harikadır. Açıkçası, gerekmedikçe hepsini kullanmak zorunda değilsiniz (örneğin, yalnızca önbelleği temizlemeniz gerekiyorsa ve DNS önbelleği ve bağlantıları umursamıyorsanız, clearCache () yeterli olacaktır).

— kakhkAtion
kaynak

2

//The code below should be put in the "js" folder with the name "clear-browser-cache.js"

(function () {
    var process_scripts = false;
    var rep = /.*\?.*/,
    links = document.getElementsByTagName('link'),
    scripts = document.getElementsByTagName('script');
    var value = document.getElementsByName('clear-browser-cache');
    for (var i = 0; i < value.length; i++) {
        var val = value[i],
            outerHTML = val.outerHTML;
        var check = /.*value="true".*/;
        if (check.test(outerHTML)) {
            process_scripts = true;
        }
    }
    for (var i = 0; i < links.length; i++) {
        var link = links[i],
        href = link.href;
        if (rep.test(href)) {
            link.href = href + '&' + Date.now();
        }
        else {
            link.href = href + '?' + Date.now();
        }
    }
    if (process_scripts) {
        for (var i = 0; i < scripts.length; i++) {
            var script = scripts[i],
            src = script.src;
            if (src !== "") {
                if (rep.test(src)) {
                    script.src = src + '&' + Date.now();
                }
                else {
                    script.src = src + '?' + Date.now();
                }
            }
        }
    }
})();

At the end of the tah head, place the line at the code below

    < script name="clear-browser-cache" src='js/clear-browser-cache.js' value="true" >< /script >

Snippet'i genişlet

— haimirick
kaynak

3

Bu cevabın nasıl çalıştığı ve mevcut cevaplardan nasıl daha iyi olduğu belirsizdir. Bu, hangi yaklaşımı

— izlediğinizin

Takdir edilse de, bu tarayıcı önbelleğini temizlemez, sadece parametreler ekleyerek verilen sayfadaki herhangi bir bağlantıyı önbelleğe alıp bozar.

— Dan Chase

1

Artık Cache.delete () kullanabilirsiniz

Misal:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

Chrome 40+, Firefox 39+, Opera 27+ ve Edge'de çalışır.

— r.delic
kaynak

0

.jsDosyaların yerleştirildiğini hayal edin/my-site/some/path/ui/js/myfile.js

Normalde komut dosyası etiketi şöyle görünür:

<script src="/my-site/some/path/ui/js/myfile.js"></script>

Şimdi bunu şu şekilde değiştirin:

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

Şimdi elbette bu işe yaramayacak. Çalışmasını sağlamak için bir veya birkaç satır eklemeniz gerekir .htaccess Önemli satır: (alttaki tüm .htaccess)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

Öyleyse, bunun yaptığı şey, 1111111111yoldan ve doğru yola olan bağlantıları bir nevi kaldırıyor .

Yani şimdi değişiklik yaparsanız, numarayı 1111111111istediğiniz sayıya değiştirmeniz yeterlidir. Ve dosyalarınızı eklediğinizde, js dosyasının en son değiştirildiği zamana bir zaman damgası kullanarak bu sayıyı ayarlayabilirsiniz. Dolayısıyla, sayı değişmezse önbellek normal şekilde çalışacaktır. Eğer değişirse, yeni dosyayı sunacaktır (HER ZAMAN EVET) çünkü tarayıcı tamamen yeni bir URL alır ve dosyanın o kadar yeni olduğuna inanır ve onu alması gerekir.

Aşağıdakiler için kullanabilirsiniz CSS, faviconsve her ne önbelleğe alır. CSS için sadece böyle kullanın

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

Ve işe yarayacak! Güncellemesi basit, bakımı basit.

Söz verilen tam .htaccess

Henüz .htaccess'iniz yoksa, sahip olmanız gereken minimum değer budur:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>

— karamba
kaynak