browser

A 1-post collection

A Fresh Approach to Deal with Browser's Caching

เว็บบราวเซอร์สมัยใหม่ถูกสร้างมาให้พยายาม แคช ข้อมูลที่เป็น static เช่น CSS, Javascript หรือแม้แต่รูปภาพ (มักไม่ cache ไฟล์ html) เพื่อให้การโหลดครั้งต่อไปทำได้เร็วขึ้นแน่นอนว่าก็เป็นเรื่องดี​ แต่ก็ย่อมมีข้อเสียตามมาคือ เมื่อเราแก้ไขเว็บ (แก้ทั้ง html, js, css) แล้วอัพโหลดผลการแก้ไขไปยังเซิฟเวอร์อาจจะทำให้ผู้ใช้เข้าไปใช้เว็บไม่ได้ หรือเข้าได้แต่ผลการแสดงไม่ถูกต้อง เนื่องก็ด้วย html ได้อันใหม่แต่ว่า js กับ css อาจจะยังได้ของที่อยู่ใน cache อยู่ ซึ่งแท้จริงแล้วผู้ใช้สามารถแก้ปัญหานี้ได้ด้วยการ refresh หน้าจอเพียงเท่านั้น browser ก็จะขอข้อมูลสดใหม่จาก server ซึ่งก็จะแก้ปัญหานี้ได้ แต่การแสดงหน้าเว็บที่ ไม่พร้อมใช้งาน ก็เป็นสิ่งที่รับไม่ได้เช่นกัน

เท่าที่ทราบเราไม่สามารถ บังคับ ให้ browser รีเฟรช ข้อมูลที่ cache จากคำสั่งทาง server โดยตรงได้ เพราะว่าสิทธิ์การแคชเป็นของ browser (และการ cache เป็นเรื่องดี เราก็ไม่อยากปิดระบบนี้) เช่น การโหลดไฟล์ สมมติ app.js ซึ่งได้ถูก cache ไว้ก่อนแล้ว ถ้า cache ยังไม่หมดอายุ browser จะไม่ถามไปยัง server ด้วยซ้ำว่าอันนี้เป็นของล่าสุดหรือเปล่า ? เพราะฉะนั้นในเมื่อ browser ไม่ถาม เราก็หมดสิทธิ์สั่งการ

แต่เดี๋ยวก่อน... เพราะว่ามีสิ่งหนึ่งที่ browser มักไม่ cache คือไฟล์ html นั่นเอง และการไม่ถูก cache ของ html นี่เองที่นำไปสู่การแก้ปัญหานี้! การแก้ปัญหาคือการใส่ query string ต่อท้าย resource ที่เราต้องการโหลดเช่น แทนที่จะเรียกแค่ app.js เราก็ต่อท้าย query string ไปด้วยเช่น app.js?version=10 ซึ่งแท้จริ

อ่านต่อ »