ล้างแคชใน JavaScript

ฉันจะล้างแคชของเบราว์เซอร์ด้วย JavaScript ได้อย่างไร

เราปรับใช้รหัส JavaScript ล่าสุด แต่เราไม่สามารถรับรหัส JavaScript ล่าสุดได้

บทบรรณาธิการ: คำถามนี้มีการทำซ้ำกึ่งในสถานที่ต่อไปนี้และคำตอบในคำถามแรกของคำถามต่อไปนี้น่าจะดีที่สุด คำตอบที่ได้รับการยอมรับนี้ไม่ใช่ทางออกที่ดีที่สุดอีกต่อไป

วิธีบังคับให้เบราว์เซอร์โหลดไฟล์ CSS / JS ที่แคชใหม่

ฉันจะบังคับให้ไคลเอ็นต์รีเฟรชไฟล์ JavaScript ได้อย่างไร

โหลดข้อมูล Javascript ต้นฉบับ / json โลคัลแบบไดนามิกอีกครั้ง

คุณสามารถเรียกwindow.location.reload (จริง)เพื่อโหลดหน้าปัจจุบัน มันจะไม่สนใจรายการแคชใด ๆ และดึงสำเนาใหม่ของหน้า, CSS, รูปภาพ, JavaScript, ฯลฯ จากเซิร์ฟเวอร์ สิ่งนี้ไม่ได้ล้างแคชทั้งหมด แต่มีผลในการล้างแคชสำหรับหน้าเว็บที่คุณเปิดอยู่

อย่างไรก็ตามกลยุทธ์ที่ดีที่สุดของคุณคือการสร้างเวอร์ชั่นพา ธ หรือชื่อไฟล์ตามที่ระบุไว้ในคำตอบอื่น ๆ นอกจากนี้โปรดดูการแก้ไขชื่อไฟล์: อย่าใช้การสอบถามด้วยเหตุผลไม่ควรใช้?v=nเป็นโครงร่างการกำหนดรุ่นของคุณ

คุณไม่สามารถล้างแคชด้วย javascript วิธีทั่วไปคือการผนวกหมายเลขการแก้ไขหรือการประทับเวลาที่ปรับปรุงล่าสุดไปยังไฟล์เช่นนี้

myscript.123.js

หรือ

myscript.js?updated=1234567890

ลองเปลี่ยน src ของไฟล์ JavaScript หรือไม่ จากนี้:

<script language="JavaScript" src="js/myscript.js"></script>

สำหรับสิ่งนี้:

<script language="JavaScript" src="js/myscript.js?n=1"></script>

วิธีนี้ควรบังคับให้เบราว์เซอร์ของคุณโหลดสำเนาใหม่ของไฟล์ JS

นอกเหนือจากการแคชทุกชั่วโมงหรือทุกสัปดาห์คุณอาจแคชตามข้อมูลไฟล์

ตัวอย่าง (ใน PHP):

<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>

หรือแม้แต่ใช้เวลาในการแก้ไขไฟล์:

<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>

คุณสามารถบังคับให้โหลดรหัสซ้ำทุก ๆ ชั่วโมงเช่นนี้ใน PHP:

<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>

หรือ

<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>

วางสิ่งนี้ไว้ท้ายเทมเพลตของคุณ:

var scripts =  document.getElementsByTagName('script');
var torefreshs = ['myscript.js', 'myscript2.js'] ; // list of js to be refresh
var key = 1; // change this key every time you want force a refresh
for(var i=0;i<scripts.length;i++){ 
   for(var j=0;j<torefreshs;j++){ 
      if(scripts[i].src && (scripts[i].src.indexOf(torefreshs[j]) > -1)){
        new_src = scripts[i].src.replace(torefreshs[j],torefreshs[j] + 'k=' + key );
        scripts[i].src = new_src; // change src in order to refresh js
      } 
   }
}

ลองใช้สิ่งนี้

 <script language="JavaScript" src="js/myscript.js"></script>

สำหรับสิ่งนี้:

 <script language="JavaScript" src="js/myscript.js?n=1"></script>

นี่คือตัวอย่างของสิ่งที่ฉันใช้สำหรับโครงการล่าสุดของฉัน

จากตัวควบคุม:

if ( IS_DEV ) {
    $this->view->cacheBust = microtime(true);
} else {
    $this->view->cacheBust = file_exists($versionFile) 
        // The version file exists, encode it
        ? urlencode( file_get_contents($versionFile) )
        // Use today's year and week number to still have caching and busting 
        : date("YW");
}

จากมุมมอง:

<script type="text/javascript" src="/javascript/somefile.js?v=<?= $this->cacheBust; ?>"></script>
<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<?= $this->cacheBust; ?>">

กระบวนการเผยแพร่ของเราสร้างไฟล์ที่มีหมายเลขรุ่นปรับปรุงของบิลด์ปัจจุบัน สิ่งนี้ทำงานได้โดยการเข้ารหัส URL ไฟล์นั้นและใช้เป็นแคชบัสเตอร์ หากไฟล์นั้นไม่มีอยู่จะใช้หมายเลขปีและสัปดาห์เพื่อให้การแคชยังคงใช้ได้และจะมีการรีเฟรชอย่างน้อยสัปดาห์ละครั้ง

นอกจากนี้ยังให้การป้องกันแคชทุกครั้งที่โหลดหน้าเว็บในขณะที่อยู่ในสภาพแวดล้อมการพัฒนาเพื่อให้นักพัฒนาไม่ต้องกังวลกับการล้างแคชสำหรับทรัพยากรใด ๆ (javascript, css, ajax call)

หรือคุณสามารถอ่านไฟล์ js โดยเซิร์ฟเวอร์ด้วย file_get_contets แล้วใส่ echo ลงในส่วนหัวของเนื้อหา js

บางที"การล้างแคช"อาจไม่ง่ายอย่างที่ควรจะเป็น แทนที่จะล้างแคชในเบราว์เซอร์ของฉันฉันรู้ว่า"แตะ"ไฟล์จะเปลี่ยนวันที่ของไฟล์ต้นฉบับที่แคชบนเซิร์ฟเวอร์ (ทดสอบบน Edge, Chrome และ Firefox) และเบราว์เซอร์ส่วนใหญ่จะดาวน์โหลดสำเนาสดใหม่ล่าสุดโดยอัตโนมัติ อะไรในเซิร์ฟเวอร์ของคุณ (รหัสกราฟิกมัลติมีเดียใด ๆ ด้วย) ฉันขอแนะนำให้คุณคัดลอกสคริปต์ล่าสุดบนเซิร์ฟเวอร์และ"ทำสิ่งที่สัมผัส"ก่อนที่โปรแกรมของคุณจะทำงานดังนั้นมันจะเปลี่ยนวันที่ของไฟล์ปัญหาทั้งหมดของคุณเป็นวันที่และเวลาล่าสุดจากนั้นดาวน์โหลดสำเนาใหม่ สู่เบราว์เซอร์ของคุณ:

<?php
    touch('/www/control/file1.js');
    touch('/www/control/file2.js');
    touch('/www/control/file2.js');
?>

... โปรแกรมที่เหลือของคุณ ...

ฉันใช้เวลาพอสมควรในการแก้ไขปัญหานี้ (เนื่องจากเบราว์เซอร์จำนวนมากทำงานแตกต่างกับคำสั่งที่แตกต่างกัน แต่พวกเขาทั้งหมดตรวจสอบเวลาของไฟล์และเปรียบเทียบกับสำเนาที่คุณดาวน์โหลดในเบราว์เซอร์ของคุณถ้าวันและเวลาที่แตกต่างกัน ไม่สามารถไปในทางที่ถูกต้องควรมีวิธีแก้ไขปัญหาที่ใช้งานได้ดีกว่าอยู่เสมอ ขอแสดงความนับถือและตั้งแคมป์ที่มีความสุข

ฉันมีปัญหาบางอย่างกับรหัสที่ yboussard แนะนำ วง j ภายในไม่ทำงาน นี่คือรหัสที่แก้ไขที่ฉันใช้ด้วยความสำเร็จ

function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var aScript = scripts[i];
        for(var j = 0; j < toRefreshList.length; j++) {
            var toRefresh = toRefreshList[j];
            if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {
                new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);
                // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)
                aScript.src = new_src;
            }
        }
    }
}

หากคุณใช้ php สามารถทำได้:

 <script src="js/myscript.js?rev=<?php echo time();?>"
    type="text/javascript"></script>

Cache.delete ()สามารถใช้กับ chrome, firefox และ opera ใหม่ได้

กรุณาอย่าให้ข้อมูลที่ไม่ถูกต้อง Cache apiเป็นประเภทของแคชที่แตกต่างจากแคชhttp

แคช HTTPจะทำงานเมื่อเซิร์ฟเวอร์ส่งส่วนหัวที่ถูกต้องคุณไม่สามารถเข้าถึงด้วย javasvipt

api ของแคชในทางกลับกันถูกไล่ออกเมื่อคุณต้องการมันเป็นประโยชน์เมื่อทำงานกับพนักงานบริการดังนั้นคุณสามารถตัดกันคำขอและตอบจากแคชประเภทนี้ดู: ilustration 1 ilustration 2 course

คุณสามารถใช้เทคนิคเหล่านี้เพื่อให้ผู้ใช้ของคุณมีเนื้อหาใหม่อยู่เสมอ:

1. ใช้location.reload (จริง)สิ่งนี้ไม่ได้ผลสำหรับฉันดังนั้นฉันจะไม่แนะนำอีก
2. ใช้Cache apiเพื่อบันทึกลงในแคชและตัดการร้องขอกับพนักงานบริการระวังด้วยสิ่งนี้เพราะถ้าเซิร์ฟเวอร์ส่งส่วนหัวแคชสำหรับไฟล์ที่คุณต้องการรีเฟรชเบราว์เซอร์จะตอบจากแคช HTTP ก่อน และถ้ามันไม่พบมันก็จะไปที่เครือข่ายดังนั้นคุณจึงสามารถจบลงด้วยไฟล์เก่า
3. เปลี่ยน URL จากไฟล์ stactics ของคุณคำแนะนำของฉันคือคุณควรตั้งชื่อด้วยการเปลี่ยนแปลงเนื้อหาไฟล์ของคุณฉันใช้md5แล้วแปลงเป็นสตริงและ URL ที่เป็นมิตรและ md5 จะเปลี่ยนกับเนื้อหาของไฟล์ที่นั่นคุณ สามารถส่งส่วนหัวแคช HTTP ได้อย่างอิสระนานพอ

ฉันอยากจะแนะนำให้คนที่สามดู

นอกจากนี้คุณยังสามารถปิดใช้งานการแคชของเบราว์เซอร์ด้วยเมตาแท็ก HTML เพียงแค่ใส่แท็ก html ในส่วนหัวเพื่อหลีกเลี่ยงการแคชหน้าเว็บในขณะที่คุณกำลังเข้ารหัส / ทดสอบและเมื่อคุณทำเสร็จแล้วคุณสามารถลบเมตาแท็ก

(ในส่วนหัว)

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

รีเฟรชหน้าของคุณหลังจากวางสิ่งนี้ไว้ในส่วนหัวและควรรีเฟรชรหัสจาวาสคริปต์ใหม่ด้วย

ลิงก์นี้จะให้ตัวเลือกอื่น ๆ แก่คุณหากคุณต้องการ http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

หรือคุณสามารถสร้างปุ่มได้

<button type="button" onclick="location.reload(true)">Refresh</button>

มันรีเฟรชและหลีกเลี่ยงการแคช แต่มันจะมีอยู่ในหน้าของคุณจนกว่าคุณจะเสร็จสิ้นการทดสอบแล้วคุณสามารถนำออก ตัวเลือกกำปั้นที่ดีที่สุดคือสิ่งที่ฉัน

ฉันมักจะปรับรุ่นเฟรมเวิร์กของฉันจากนั้นใช้หมายเลขเวอร์ชันกับเส้นทางสคริปต์และสไตล์

<cfset fw.version = '001' />
<script src="/scripts/#fw.version#/foo.js"/>

window.parent.caches.delete("call")

ปิดและเปิดเบราว์เซอร์หลังจากรันโค้ดในคอนโซล

window.location.reload(true)ดูเหมือนว่าจะถูกคัดค้านโดยมาตรฐาน HTML5 วิธีหนึ่งที่จะทำเช่นนี้โดยไม่ต้องใช้สายแบบสอบถามคือการใช้Clear-Site-Dataส่วนหัวซึ่งดูเหมือนว่าจะถูกมาตรฐาน

ทำให้แคชของเบราว์เซอร์ลิงก์เดียวกันคุณควรเพิ่มเลขสุ่มสิ้นสุดของ url new Date().getTime()สร้างหมายเลขอื่น

เพียงเพิ่มnew Date().getTime()จุดสิ้นสุดลิงก์เช่นเดียวกับการโทร

'https://stackoverflow.com/questions.php?' + new Date().getTime()

เอาท์พุท: https://stackoverflow.com/questions.php?1571737901173