แก้ปัญหาเวลาแก้ไข JavaScrip, CSS อัพขึ้นโฮสต์แล้วต้องกด CTRL + F5 เพื่อโหลดไฟล์ใหม่ทุกครั้ง

โดย SONGCHAI SAETERN

แก้ปัญหาเวลาแก้ไข JavaScript, CSS อัพขึ้นโฮสต์แล้วต้องกด CTRL + F5 เพื่อโหลดไฟล์ใหม่ทุกครั้ง

JavaScript CSS ไม่อัพเดต

และแน่นอนว่าผู้ใช้งานจะไม่ปลื้มอย่างแน่นอน
ก็เลยไปหาวิธีมา ซึ่งได้วิธีการมาคือ ให้เปลี่ยนเลขเวอร์ชั่นรันไปเรื่อยๆ

<?php
$ver = '001';//เวลาเปลี่ยนเวอร์ชั่นให้รันไปเรื่อยๆเมื่ออัพเดต
?>

เวลาเรียกใช้ไฟล์ให้แทรกเวอร์ชั่นไปด้วย

<script src="assets/js/utilities.js?v=<?php echo $ver;?>"></script>

แต่!! ไฟล์ไม่ได้มีไฟล์เดียวนี่นา

<script src="assets/js/utilities.js?v=<?php echo $ver;?>"></script>
<script src="assets/js/main.js?v=<?php echo $ver;?>"></script>
<script src="assets/js/home.js?v=<?php echo $ver;?>"></script>
<script src="assets/js/order.js?v=<?php echo $ver;?>"></script>

มันก็ต้องโหลดใหม่ทุกไฟล์ ก็เสียเวลาอยู่นา -_____-;


และอีกอย่าง เราก็ต้องคอยเปลี่ยน $ver = '001'; ให้เป็นเลยใหม่ทุกครั้ง

และแล้วก็ได้เจอบทความจาก Designil แนะนำให้ใช้ filemtime() ช่วยให้ง่ายขึ้น

<script src="assets/js/order.js?v=<?php echo filemtime('assets/js/order.js');?>"></script>

แล้วถ้าใช้กับ CodeIgniter ล่ะ!!

ก็อ้างอิงถึงไฟล์เหมือนตอนเราอัพโหลดไฟล์นั่นแหละครับ

<script src="<?php echo base_url('/assets/js/utilities.js?v=' . filemtime('./assets/js/utilities.js'));?>"></script>

ผลลัพธ์


<script src="http://localhost/project/soap_station/assets/js/utilities.js?v=1519454454"></script>


ทีนี้ไฟล์ไหนอัพเดตก็โหลดแค่ไฟล์นั้น แล้วก็ไม่ต้องมานั่นกด CTRL + F5 ให้รำคาญใจอีกต่อไป


ที่มา 
http://www.thaicreate.com/community/cache-css-javascript-image-webpage.html
https://www.designil.com/css-versioning-technique-cache-auto-update.html


PHP CI MANIA PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม เขียนโปรแกรมง่ายและสะดวกขึ้น
สนใจสั่งซื้อราคาสุดคุ้ม >> http://fastcoding.phpcodemania.com/