Overview

What OfflineNotes is

OfflineNotes คือ แอปโน้ตที่มองเครือข่ายเป็นของเสริม คุณเขียนโน้ต markdown แล้ว save ลง IndexedDB บนเครื่องคุณทันที และทุกอย่างยังทำงานต่อได้แม้ปิด Wi-Fi — ทั้งค้นหา แก้ไข สร้างใหม่ พอเน็ตกลับมา โน้ตของคุณจะ sync ข้ามอุปกรณ์ และการแก้ไขที่คุณทำบนสองอุปกรณ์ตอนที่ทั้งคู่ offline จะ merge กันโดยไม่มี conflict

ท่อนสุดท้ายนั่นคือส่วนที่ยาก และเป็นเหตุผลที่โปรเจกต์นี้มีอยู่ แอปส่วนใหญ่เป็นแบบ server-first: server ถือความจริง, client เป็นแค่หน้าต่างมองเข้าไป และ “offline” คือ error state OfflineNotes เป็นแบบ local-first: client ถือความจริง, เครือข่ายเป็นแค่ความสะดวกเบื้องหลัง และการ offline คือกรณี ปกติ ไม่ใช่ความล้มเหลว การทำให้เรื่องนี้ได้ผล — โดยเฉพาะการ merge การแก้ไขพร้อมกันจากหลายอุปกรณ์โดยไม่มีตัวกลางคอยตัดสิน — คือหน้าที่ของ CRDT (Conflict-free Replicated Data Type) และเป็นเหตุผลที่ merge engine เขียนด้วย Rust แล้ว compile เป็น WASM: เพราะคือ logic ที่ใช้ร่วมกัน ถูกต้อง และ portable ที่รันเหมือนกันในทุก client

จุดสำคัญของโปรเจกต์ไม่ใช่ตัวโน้ต — แต่คือ local-first: IndexedDB เป็น source of truth, WASM CRDT สำหรับ merge แบบ conflict-free, Service Worker สำหรับ offline ของจริง และ sync server บาง ๆ ที่ส่งต่อการเปลี่ยนแปลงโดยไม่ได้เป็นเจ้าของข้อมูล

ฟีเจอร์ที่มี

• Offline-first — สร้าง แก้ไข ลบ และเปิดดูโน้ต markdown ได้โดยไม่ต้องมีเครือข่ายเลย
• IndexedDB storage — ทุกโน้ตและ change-log ในเครื่อง persist อยู่บนอุปกรณ์
• Rust→WASM CRDT — LWW register สำหรับ field ของโน้ต และ sequence CRDT สำหรับ body ช่วย merge การแก้ไขพร้อมกันแบบ conflict-free
• Installable PWA — Service Worker precache app shell ไว้; OfflineNotes ติดตั้งและเปิดได้เหมือนแอป native
• Cross-device sync — server บาง ๆ ส่งต่อ CRDT op ของแต่ละโน้ต; อุปกรณ์ push และ pull
• Background Sync — การแก้ไขที่ทำตอน offline จะ sync อัตโนมัติทันทีที่คุณกลับมา online

แผนที่คอร์ส

แต่ละ build module ดัดแปลงคอร์สใน Learn Hub มาเป็นส่วนหนึ่งของ OfflineNotes

โมดูล	สิ่งที่คุณสร้าง	คอร์สใน Learn Hub ที่อ้างอิง
1 · Setup & Tooling	Astro + TS + toolchain แบบ Rust→WASM	TypeScript / Rust
2 · App Shell	Astro shell และ Web Components ชุดแรก	Web Components / Astro
3 · IndexedDB Foundation	IndexedDB store ที่มี type	Browser Storage
4 · The Notes UI	โน้ตในรูปของ Web Components	Web Components
5 · Rust→WASM Toolchain	Rust ที่ compile เป็น WASM แล้วเรียกจาก TS	Rust / WASM
6 · A CRDT in Rust	merge engine แบบ conflict-free	Rust
7 · Wiring the WASM Core	Edit → CRDT op → IndexedDB	Rust / Browser Storage
8 · Service Worker	offline ของจริง + PWA ที่ติดตั้งได้	Browser Storage / PWA
9 · The Sync Server	Hono relay บาง ๆ สำหรับ CRDT op	Node
10 · Push & Pull Sync	sync ฝั่ง client + WASM merge	Browser Storage
11 · Background Sync	sync แบบเลื่อนออกไปและ retry อัตโนมัติ	PWA
12 · Conflict-free Merge	การ merge การแก้ไข offline พร้อมกัน	Rust / CRDTs
13 · Deployment	ปล่อย PWA และ sync server ขึ้น production	Docker / CI

ตรวจสอบผล

คุณพร้อมไปต่อเมื่อตอบสิ่งเหล่านี้ด้วยคำพูดของคุณเองได้:

• “local-first” หมายความว่าอะไร และต่างจากแอป server-first ทั่วไปที่แปะ offline mode เพิ่มเข้าไปตรงไหน?
• ทำไมการ merge การแก้ไข offline พร้อมกันถึงต้องใช้ CRDT แทนที่จะเป็น last-write-wins และทำไม CRDT ถึงเขียนด้วย Rust/WASM?
• สามฟีเจอร์ไหนที่ประกอบเป็นแกนหลักของ OfflineNotes และแนวคิดไหนบ้างที่ตั้งใจตัดออกไป?

ต่อไป architecture จะแสดงว่าแต่ละชิ้นประกอบร่างกันอย่างไร