[ Log On ]
ทำยังไงให้ browser ไม่ Cache ไฟล์ CSS กับ JavaScript ?

บางเว็บไซต์ (หรือแม้แต่ในบางกรณี) ที่มีเหตุให้ต้องเปลี่ยนแปลง CSS และ/หรือ JavaScript บ่อยๆ นั้น มักจะเจอกับปัญหาว่าทำไมเวลา upload ขึ้นไปบน server แล้ว แต่พอแสดงผลบนเครื่องอื่นๆ (โดยเฉพาะเครื่องลูกค้า) กลับยังไม่พบการเปลี่ยนแปลง.. นั่นเป็นเพราะ browser ในเครื่องนั้นได้ทำการ cache ไฟล์เหล่านั้นเอาไว้แล้วเพื่อความรวดเร็วในการโหลดเว็บไซต์นั่นเอง หรือบางครั้งเองก็อาจจะเป็นเพราะเครื่องนั้นเรียกผ่าน proxy server ซึ่งได้ cache เอาไว้ก็เป็นได้เช่นกัน

ทางแก้ล่ะมีมั้ย?

มีอยู่แล้ว ทำไมจะไม่มี มันแก้ได้ทั้ง 2 ทางครับ คือ ทางฝั่ง client และ web hosting หรือ server

การแก้ทางฝั่ง client สามารถทำได้หลายวิธี คือ

  1. กด Ctrl+F5 หรือ Shift+F5 บน  Google Chrome เพื่อทำการเรียกข้อมูลทั้งหมดจาก web server โดยตรง ไม่ผ่าน cache
  2. เข้าไปเคลียร์ค่า cache ใน browser นั้นๆ
  3. เข้าไปตั้งค่า settings ของ browser ให้ "ไม่จำ cache" เป็นการถาวร

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

เพราะฉะนั้น เรามาแก้ที่ฝั่ง server กันดีกว่าครับ ซึ่งการแก้ที่ฝั่ง server นั้นสามารถทำได้หลายวิธี วิธีการง่ายๆ คือ ระบุ Pragma No-Cache ไว้ในส่วน <HEAD> tag ของ HTML แต่บางครั้งมันก็ไม่ได้ผลเท่าไหร่นักครับ วิธีที่ดีที่สุด (เท่าที่ผมเคยใช้) คือ การกำหนด phantom querystring ต่อท้ายการเรียกใช้ CSS และ JS ครับ/

<link rel="stylesheet" type="text/css" href="/content/core.css?{วันและเวลา}" />

และ

<script src="/scripts/core.js?{วันและเวลา}" />

ส่วนเรื่องการจะเขียนโค้ดให้เจน {วันและเวลา} นั้นก็สุดแล้วแต่ภาษาที่คุณใช้เขียน หรือจะ hardcode เอาเลยก็ได้ครับ แล้วแต่ความพึงพอใจหรือนโยบายการทำงานของทีม

Happy Coding ครับ :)