XAMPP aracılığıyla Wordpress kaynak koduna dayalı bir web sitesi geliştiriyorum. Bazen CSS kodunu, komut dosyalarını veya başka bir şeyi değiştiriyorum ve tarayıcımın değişiklikleri uygulamasının zaman aldığını fark ediyorum. Bu, birini yenilemek için birden fazla tarayıcı kullanmamı sağlıyor ve yeni stilleri uygulamazsa ikincisini deniyorum ve her zaman bu.
Bu sorunu önlemenin bir yolu var mı? Bazen kodu önceki değişiklikleri haber vermeden değiştiriyorum.
Yanıtlar:
Presleme Ctrl+ F5(ya da Ctrl+ Shift+ R) bir önbellek yeniden kuvvet için. Mac'lerin Cmd+ Shift+ kullandığına inanıyorum R.
PHP'de, sona erme tarihini başlıklar ile geçmiş bir zamana ayarlayarak önbelleği devre dışı bırakabilirsiniz:
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");
Chrome'un önbelleği, geliştirici araçları ile açılarak, F12sağ alt köşedeki dişli çark simgesi tıklanarak ve ayarlar iletişim kutusunda Önbelleği devre dışı bırak seçilerek devre dışı bırakılabilir , örneğin:
Bu cevaptan alınan görüntü .
Tür about:configsonra başlıklı girişi bulmak URL çubuğuna network.http.use-cache. Bunu olarak ayarlayın false.
İstemci tarafında bundan kaçınmak istiyorsanız ?v=1.x, dosya içeriği değiştiğinde css dosya bağlantısı gibi bir şey ekleyebilirsiniz . örneğin, eğer varsa, <link rel="stylesheet" type="text/css" href="css-file-name.css">bunu değiştirebilir <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">, önbelleğe almayı atlar.
Eğer php yazabiliyorsanız, yazabilirsiniz:
<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(); ?>" />
Her zaman yenilenecek!
DÜZENLEME: Tabii ki, bunu her şey için manuel olarak eklemeyeceğiniz için bütün bir web sitesi için gerçekten pratik değil.
Şunu kontrol edin: Tarayıcıyı Stil Sayfamın En Yeni Sürümünü Kullanmaya Nasıl Zorlayabilirim?
Css dosyanızın olduğunu varsayarsak, foo.cssaşağıda gösterildiği gibi bir sorgu dizesi ekleyerek istemciyi en son sürümü kullanmaya zorlayabilirsiniz.
<link rel="stylesheet" href="foo.css?v=1.1">
Geliştirici bakış açısı Geliştirme
modundaysanız (orijinal soruda olduğu gibi), en iyi yaklaşım tarayıcıda HTML meta etiketleri aracılığıyla önbelleğe almayı devre dışı bırakmaktır. Bu yaklaşımı evrensel hale getirmek için aşağıda gösterildiği gibi en az üç meta etiket eklemelisiniz.
<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" />
Bu şekilde, bir geliştirici olarak, değişiklikleri görmek için yalnızca sayfayı yenilemeniz gerekir. Ancak, üretim sırasında bu kodu yorumlamayı unutmayın, sonuçta önbelleğe alma müşterileriniz için iyi bir şeydir.
Üretim Modu Üretimde
önbelleğe almaya izin vereceğinizden ve müşterilerinizin tam yeniden yüklemeyi veya başka bir hileyi nasıl zorlayacaklarını bilmelerine gerek olmadığı için, tarayıcının yeni dosyayı yükleyeceğini garanti etmelisiniz. Ve evet, bu durumda bildiğim en iyi yaklaşım dosyanın adını değiştirmektir.
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
Değiştirilirse yenilenecektir.
Bunun DNS'nizden olmadığından emin olun. Örneğin, Cloudflare, Cloudflare hızlandırılmış önbellek sunduğundan stil sayfalarınız ve görüntülerinizde bir tasfiye zorladığı geliştirme modunu açabileceğiniz bir yere sahiptir. Bu, onu devre dışı bırakır ve birisi sitenizi her ziyaret ettiğinde güncelleme yapmaya zorlar.
Bu Firefox uzantısı, çalışabildiğim tek çözümdü: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
Yukarıda kabul edilen cevap doğrudur. Ancak, önbelleği yalnızca periyodik olarak yeniden yüklemek istiyorsanız ve Firefox kullanıyorsanız, Web Geliştirici araçları (Kasım 2015 itibariyle Araçlar menü öğesinin altında) bir Ağ seçeneği sunar. Bu, bir Yeniden Yükle düğmesi içerir. Önbelleği bir kez sıfırlamak için Yeniden Yükle'yi seçin.
Bu dosyaların tüm kullanıcılar için Chrome tarafından düzgün bir şekilde yenilendiğinden emin olmak istiyorsanız must-revalidate, Cache-Controlbaşlığa sahip olmanız gerekir . Bu, Chrome'un yeniden getirilmeleri gerekip gerekmediğini görmek için dosyaları yeniden kontrol etmesini sağlayacaktır.
Aşağıdaki yanıt başlığını önerin:
Cache-Control: must-validate
Bu, Chrome'a sunucuyu kontrol etmesini ve daha yeni bir dosya olup olmadığına bakmasını söyler. Daha yeni bir dosya varsa, yanıt olarak alacaktır. Değilse, bir 304 yanıtı alacak ve önbellekteki yanıtın güncel olduğuna dair güvence alacak.
Bu başlığı AYARLAMAZSANIZ, dosyayı geçersiz kılan başka bir ayarın olmaması durumunda, Chrome daha yeni bir sürüm olup olmadığını görmek için sunucuyla hiçbir zaman kontrol etmez .
İşte konuyu daha ayrıntılı tartışan bir blog yazısı .
Html-head'den harici css dosyasına bağlantı etiketi yerine php-include'i kullanın:
<style>
<?php
include("style.css");
?>
</style>
Bir tür hack, ama benim için çalışıyor :)
Tarayıcılar css ve js dosyalarının yeni sürümlerini kontrol etmediğinden, her değişiklik yaptığımda css ve js dizinlerimi yeniden adlandırmaya karar verdim. Dizin isimleri olarak css1'den css9'a ve js1'den js9'a kullanıyorum. 9'a geldiğimde, daha sonra 1'de baştan başlıyorum. Bu bir acı, ama her seferinde mükemmel çalışıyor. Kullanıcılara yazmalarını söylemek zorunda olmak çok saçma.
Binlerce istemciyi uzaktan etkileyen stil sayfalarımı oluşturmam ve değiştirmem gereken bir durumum var, ancak ağır ağ yükü riski nedeniyle önbelleği kapatmıyorum.
HTML içeriğini uzaktan değiştirebildiğim için, stil sayfasını, stil sayfasının içeriğiyle eşleşen bir karma kodla ilişkilendiririm.
https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808
Bununla birlikte, HTML içeriği değiştiğinde düğümleri ve öznitelikleri dikkatlice değiştirmek için istemci tarafı bir javascript işlevi de kullanıyorum, yani stil sayfası bağlantı etiketi değiştirilmeyecek, yalnızca href özniteliği değişecek.
Bu senaryo, Windows'ta Chrome, Firefox ve Edge'de, ayrıca Android'de Chrome'da iyi çalışıyor, ancak Android'de web istemcilerinde her zaman çalışmıyor. Dolayısıyla, javascript kullanarak güncellemeyi zorlamak / tetiklemek için bir şeyler arıyorum - en iyi şekilde sayfayı yeniden yüklemeye gerek kalmadan.
Bunu dene:
link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
'?' bu, sayfaya her erişildiğinde farklıdır, o zaman time()yapacaktır. Bunu kodunuzda kalıcı olarak bırakmak gerçekten iyi bir fikir değildir, çünkü yalnızca sayfanın yüklenmesini yavaşlatır ve muhtemelen gerekli değildir.
Bir sayfanın düzeninde kapsamlı değişiklikler yaptıysanız ve yeni stil sayfasına erişmenin, ekranda mantıklı bir şeyin görünmesi için hayati önem taşıdığını, bir stil sayfasını yenilemeye zorlamanın yararlı olduğunu gördüm.