Browser Caching

กลไกที่ browser เก็บสำเนาไฟล์ (CSS, JS, รูปภาพ) ไว้ในเครื่องผู้ใช้ เพื่อไม่ต้องโหลดจาก server ใหม่ทุกครั้ง ทำให้เว็บเปิดเร็วขึ้น

วิธีทำงาน

sequenceDiagram
    participant U as 👤 ผู้ใช้
    participant B as 🌐 Browser
    participant S as 🖥️ Server

    Note over U,S: ครั้งแรก — ยังไม่มี cache
    U->>B: เปิด admyhusky.dev
    B->>S: ขอ styles.css
    S-->>B: styles.css (v2.0.1)
    B->>B: เก็บ cache ไว้ในเครื่อง
    B-->>U: แสดงเว็บ ✅

    Note over U,S: ครั้งต่อไป — มี cache แล้ว
    U->>B: เปิด admyhusky.dev
    B->>B: เจอ styles.css ใน cache
    B-->>U: แสดงเว็บทันที ⚡ (ไม่ต้องโหลดใหม่)

ปัญหา: ผู้ใช้ไม่เห็นเวอร์ชันใหม่

พอเราอัปเดตไฟล์บน server แต่ชื่อไฟล์ยังเหมือนเดิม (styles.css) → browser ไม่รู้ว่ามีการเปลี่ยนแปลง → ยังใช้ไฟล์เก่าจาก cache

sequenceDiagram
    participant U as 👤 ผู้ใช้
    participant B as 🌐 Browser
    participant S as 🖥️ Server

    Note over S: dev อัปเดต styles.css (v2.0.2)
    U->>B: เปิด admyhusky.dev
    B->>B: เจอ styles.css ใน cache (v2.0.1)
    B-->>U: แสดงเว็บด้วยไฟล์เก่า ❌
    Note over U: เห็น bug ที่แก้ไปแล้ว!

Cache-Busting — บังคับให้โหลดไฟล์ใหม่

เทคนิคทำให้ browser เห็นไฟล์เป็น URL ใหม่ → โหลดใหม่จาก server

sequenceDiagram
    participant U as 👤 ผู้ใช้
    participant B as 🌐 Browser
    participant S as 🖥️ Server

    Note over S: dev อัปเดต styles.css + เปลี่ยน ?v=2.0.2
    U->>B: เปิด admyhusky.dev
    B->>B: หา styles.css?v=2.0.2 ใน cache
    B->>B: ไม่เจอ! (เคยเก็บแค่ ?v=2.0.1)
    B->>S: ขอ styles.css?v=2.0.2
    S-->>B: styles.css ตัวใหม่ (v2.0.2)
    B->>B: เก็บ cache ใหม่
    B-->>U: แสดงเว็บเวอร์ชันใหม่ ✅

วิธีที่ 1: Query String

ตัวอย่างจริงจาก admyhusky.dev — ก่อนแก้ vs หลังแก้:

<!-- ก่อน — ไม่มี version, IG browser ใช้ cache เก่า -->
<link rel="stylesheet" href="styles.css">
<script src="data.js"></script>
<script type="text/babel" src="sections.jsx"></script>
<script type="text/babel" src="app.jsx"></script>
 
<!-- หลัง — เพิ่ม ?v=2.0.3 ทุกไฟล์ -->
<link rel="stylesheet" href="styles.css?v=2.0.3">
<script src="data.js?v=2.0.3"></script>
<script type="text/babel" src="sections.jsx?v=2.0.3"></script>
<script type="text/babel" src="app.jsx?v=2.0.3"></script>

Browser เห็น styles.css?v=2.0.3 เป็นคนละ URL กับ styles.css → โหลดใหม่ทันที แม้ใน IG in-app browser

วิธีที่ 2: Hash ในชื่อไฟล์

<!-- build tool สร้างชื่อไฟล์ที่มี hash -->
<link rel="stylesheet" href="styles.a3f8b2.css">

ทุกครั้งที่เนื้อหาเปลี่ยน hash จะเปลี่ยนตาม — ใช้กับ build tool เช่น Webpack, Vite

วิธีที่ 3: HTTP Headers

Server กำหนดผ่าน response header:

Cache-Control: max-age=31536000    # cache ได้ 1 ปี
ETag: "abc123"                      # ถ้าเนื้อหาเปลี่ยน ETag จะเปลี่ยน

In-App Browser Cache

app อย่าง Instagram, LINE, Facebook มี browser ในตัว (WebView) ที่มี cache แยกจาก Safari/Chrome

graph TB
    subgraph iPhone["📱 iPhone ของผู้ใช้"]
        S["🧭 Safari<br/>cache ชุด A"]
        IG["📷 IG in-app browser<br/>cache ชุด B"]
        LINE["💬 LINE in-app browser<br/>cache ชุด C"]
    end

    SV["🖥️ Server<br/>admyhusky.dev<br/>styles.css v2.0.2"]

    S -->|"โหลดใหม่ → เห็น v2.0.2 ✅"| SV
    IG -->|"ใช้ cache เก่า → เห็น v2.0.1 ❌"| SV
    LINE -->|"โหลดใหม่ → เห็น v2.0.2 ✅"| SV

    style S fill:#34C759,color:#fff
    style IG fill:#FF3B30,color:#fff
    style LINE fill:#34C759,color:#fff

ตัวอย่างจริง: เปิด admyhusky.dev ผ่านลิงก์ใน IG → เห็น bug เก่า (Claude bubble แตก) แต่พอเปิดใน Safari → เห็นเวอร์ชันใหม่ที่แก้แล้ว เพราะ cache คนละชุดกัน

• ล้าง cache ใน Safari ไม่ได้ล้าง cache ของ IG browser
• แก้ได้โดย force close app หรือใช้ cache-busting จากฝั่ง server

Cache-Busting ทำให้เว็บช้าไหม?

ไม่ — browser ยัง cache ไฟล์ตามปกติ แค่เปลี่ยน version number ตอน deploy ใหม่เท่านั้น

สถานการณ์	สิ่งที่เกิด
เข้าครั้งแรก	โหลดจาก server + เก็บ cache
เข้าครั้งต่อไป (version เดิม)	ใช้จาก cache ไม่โหลดใหม่
Deploy version ใหม่	โหลดใหม่เพราะ URL เปลี่ยน

Key Points

• Browser cache ช่วยให้เว็บเร็วขึ้นโดยเก็บสำเนาไฟล์ไว้ในเครื่อง
• Cache-busting คือการเปลี่ยน URL (เช่น ?v=2.0.2) เพื่อบังคับโหลดใหม่
• In-app browser (IG, LINE) มี cache แยกจาก Safari/Chrome
• Cache-busting ไม่ทำให้เว็บช้า เพราะ cache ยังทำงานปกติ

References

• HTTP Caching — MDN Web Docs — อธิบาย cache ทำงานยังไง, cache-busting pattern, Cache-Control headers
• Prevent unnecessary network requests with the HTTP Cache — web.dev — best practices สำหรับ caching strategy
• Cache-Control Header — MDN Web Docs — รายละเอียด max-age, no-cache, immutable directives

Related

• Responsive Design — การปรับ UI ตามขนาดจอ