Offline-First หรือ Local-First คือแนวคิดการพัฒนาแอปที่ เก็บข้อมูลไว้บนอุปกรณ์ของผู้ใช้เป็นหลัก และสามารถใช้งานได้ลื่นไหลแม้ไม่มีอินเทอร์เน็ตครับ โดยข้อมูลจะถูกซิงก์กับเซิร์ฟเวอร์แบบเบื้องหลังอัตโนมัติ เช่น การใช้ฐานข้อมูลอย่าง RxDB ที่จัดเก็บข้อมูลใน IndexedDB และทำการ replication ไป-กลับกับ backend โดยที่ผู้ใช้ไม่ต้องรอนั่นเอง
.
หัวใจสำคัญ:
“ฐานข้อมูลบนอุปกรณ์ผู้ใช้” คือศูนย์กลางของ state ทั้งหมด ไม่ใช่ backend อีกต่อไป
.
1. ทำไม Offline-First ยังสำคัญ แม้อินเทอร์เน็ตทุกวันนี้แรงขึ้นมาก?
หลายคนเข้าใจผิดว่า Offline-First มีประโยชน์แค่ตอน “เน็ตล่ม” แต่ความจริงแล้วจุดแข็งของแนวคิดนี้คือ ประสบการณ์การใช้งาน (UX) ที่ดีกว่าแบบดั้งเดิมอย่างชัดเจน แม้ผู้ใช้จะออนไลน์อยู่ตลอดเวลาก็ตาม
แอปทั่วไปต้องรอ request/response ซึ่งมี latency ไม่แน่นอน ผู้ใช้จึงต้องเจอ loading spinner อยู่ตลอด แต่บน Offline-First จะทำดังนี้
– ดำเนินการกับฐานข้อมูลแบบ local
– เร็วแทบจะทันที
– UI อัปเดตทันทีเหมือนเซิร์ฟเวอร์ตอบแล้ว
.
2. Multi-Tab ใช้งานได้สมบูรณ์
หลายเว็บไซต์ยัง sync state ระหว่าง tab ไม่ถูกต้อง เช่น เข้าระบบใน tab หนึ่ง แต่ tab อื่นๆ ไม่รู้เรื่อง
แต่บน Offline-First จะมีประโยชน์ ดังนี้
– มี state เดียวกันทุก tab
– ใช้ IndexedDB เป็นศูนย์กลาง
– ข้อมูลอัปเดตทุก tab แบบเรียลไทม์
.
3. Latency สำคัญกว่าความเร็วเน็ต และแก้ยากกว่า
แม้ bandwidth ทุกวันนี้จะดีขึ้น แต่ latency ยังลดได้ยาก เพราะติดข้อจำกัดทางฟิสิกส์ เช่น ความเร็วแสงและระยะห่างระหว่างทวีป
Offline-First ทำให้:
– โหลดข้อมูลครั้งแรกมาเก็บในเครื่อง
– หลังจากนั้นการ query เป็น zero-latency เพราะทำบน local database
.
4. Realtime UI “ฟรี”
แอปแบบดั้งเดิมต้องเขียน WebSocket, channel, subscription เพื่อให้ข้อมูลสดใหม่ แต่บน Offline-First มีขั้นตอน ดังนี้
– ระบบ replication ทำอยู่แล้ว
– ถ้าใช้ RxDB ก็มีฟีเจอร์ changestream + data subscriptions
– UI อัปเดตอัตโนมัติเมื่อข้อมูลหลังบ้านเปลี่ยน
เขียนง่ายขึ้นมาก และ realtime มาฟรี ๆ
.
5. สเกลตาม “ปริมาณข้อมูล” ไม่ใช่จำนวนการคลิกของผู้ใช้
แอปทั่วไป:
– ผู้ใช้คลิกเยอะ = server รับโหลดเยอะ
Offline-First:
– ผู้ใช้คลิกกี่ครั้งก็ทำงานบนเครื่องแบบ local
– server ทำงานตามจำนวนข้อมูลที่ต้อง sync เท่านั้น
ประหยัด cost และสเกลง่ายขึ้นมาก
.
6. เหมาะกับแอปรันนาน ๆ
แอปสมัยใหม่ เช่น Chat, Email, PWA, Hybrid App
– เปิดทั้งวัน
– ใช้นานกว่าสมัยเว็บดั้งเดิม
Offline-First จึงได้เปรียบเพราะ
– interaction เร็วมาก
– initial load ไม่ใช่เรื่องใหญ่เท่าเมื่อก่อน
.
7. เราอาจไม่ต้องสร้าง REST API จำนวนมาก
แทนที่จะสร้าง route, controller, swagger, client code จำนวนมหาศาล
Offline-First มีประโยชน์ ดังนี้
– replicate ข้อมูลทั้งหมดที่จำเป็น
– query เองจาก local database
– sync อัตโนมัติแบบ realtime
– อาจไม่ต้องใช้ Redux เลยก็ได้
แอปทั่วไปต้องแยก global state และเขียน boilerplate เยอะ เช่น Redux
บน Offline-First:
– ข้อมูลทั้งหมดอยู่ใน local DB
– เป็น single source of truth เดียวกันทุก tab และทุกแหล่งข้อมูล
– UI อ่านจาก database โดยตรง
– ลดความซับซ้อนของ state management มาก