📖 How the Offline System Works / ระบบออฟไลน์ทำงานอย่างไร
Step 1: Scan & Open / สแกนและเปิด
A facilitator (volunteer, teacher, health worker) shows the QR code at a village, temple, school, or market. Anyone with a smartphone scans it — the browser opens krueng.ai/offline.html (this page).
อาสาสมัคร ครู หรือเจ้าหน้าที่สาธารณสุข แสดง QR Code ที่หมู่บ้าน วัด โรงเรียน หรือตลาด ทุกคนที่มีสมาร์ทโฟนสแกนได้ — เบราว์เซอร์จะเปิดหน้า krueng.ai/offline.html (หน้านี้)
Step 2: One-Time Download / ดาวน์โหลดครั้งเดียว
Tap "Install Course". The Service Worker (sw.js) downloads all 98 files from the CloudFront CDN in batches of 10. A progress bar shows how many files are cached. On 3G, this takes about 1 minute. The files are stored in your phone's Cache Storage — a built-in browser feature that saves web pages for offline use.
- 84 lesson pages — each is a complete standalone HTML file with all CSS, JavaScript, games, quizzes, and interactivity built in
- 12 hero images — one per week, AI-generated illustrations
- 1 syllabus page — course overview with links to all 12 weeks
- 1 offline page — this page, which becomes the app's home screen
If the download fails partway (bad signal), just tap Retry — it picks up where it left off.
กด "ติดตั้งคอร์ส" Service Worker (sw.js) จะดาวน์โหลดไฟล์ทั้งหมด 98 ไฟล์จาก CloudFront CDN ทีละ 10 ไฟล์ แถบความคืบหน้าแสดงจำนวนไฟล์ที่แคชแล้ว บน 3G ใช้เวลาประมาณ 1 นาที ไฟล์จะถูกเก็บใน Cache Storage ของโทรศัพท์ — ฟีเจอร์ของเบราว์เซอร์ที่บันทึกหน้าเว็บสำหรับใช้งานออฟไลน์ หากดาวน์โหลดไม่สำเร็จ (สัญญาณไม่ดี) กด ลองใหม่ — ระบบจะดาวน์โหลดต่อจากที่ค้างไว้
Step 3: Use Offline Forever / ใช้งานออฟไลน์ตลอดไป
Once downloaded, the course works with zero internet. Here's how:
- You tap a lesson page (e.g. Week 3: Space Story)
- Your browser asks the Service Worker for the file
- The Service Worker checks the Cache Storage — found it!
- The page loads instantly from your phone's memory — no network request at all
Every page includes text-to-speech pronunciation (built into the browser), interactive games, flip flashcards, quizzes with scoring, and bilingual Thai/English content. All of this works offline because it's all inside the HTML file itself — no external servers needed.
You can also Add to Home Screen — the course appears as an app icon on your phone. Tap it and it opens full-screen, just like a real app.
เมื่อดาวน์โหลดแล้ว คอร์สทำงานได้โดยไม่ต้องมีอินเทอร์เน็ต: เมื่อคุณเปิดหน้าบทเรียน เบราว์เซอร์จะถาม Service Worker → Service Worker เช็ค Cache Storage → เจอ! → หน้าโหลดทันทีจากหน่วยความจำโทรศัพท์ ไม่มีการเรียกเครือข่ายเลย ทุกหน้ามีฟังก์ชันอ่านออกเสียง เกมอินเทอร์แอคทีฟ แฟลชการ์ดพลิกได้ แบบทดสอบพร้อมคะแนน และเนื้อหาสองภาษาไทย/อังกฤษ ทั้งหมดทำงานออฟไลน์เพราะทุกอย่างอยู่ในไฟล์ HTML เดียว คุณยังสามารถเพิ่มไปยังหน้าจอหลักได้ — คอร์สจะปรากฏเป็นไอคอนแอปบนโทรศัพท์
Sharing / การแชร์
The course can spread from phone to phone without internet:
- QR Code — print it on paper and post it anywhere
- Bluetooth / Wi-Fi Direct — share the cached files between nearby phones
- SD Card — copy the files to a micro SD card and pass it around
- Local hotspot — one phone with the course runs a Wi-Fi hotspot, others connect and download
Cost: Free forever. No app store. No subscription. No account. No tracking. No ads.
คอร์สแพร่กระจายจากโทรศัพท์สู่โทรศัพท์ได้โดยไม่ต้องมีอินเทอร์เน็ต: QR Code พิมพ์บนกระดาษ, Bluetooth/Wi-Fi Direct, SD Card, หรือฮอตสปอตในเครื่อง ฟรีตลอดไป ไม่มี App Store ไม่มีสมัครสมาชิก ไม่มีบัญชี ไม่มีการติดตาม ไม่มีโฆษณา
Course Content / เนื้อหาคอร์ส
12 weeks, 84 pages, 120 vocabulary words
💻 Technology
✈️ Travel
🚀 Space
🌿 Environment
🎵 Music
💪 Health
🍳 Cooking
🎉 Festivals
👩🔬 Jobs
⚽ Sports
🎨 Art
🌟 Future
Each week: Story, Game, Song, Reading, Flashcards, Quiz, Reward — all bilingual Thai/English with text-to-speech.
แต่ละสัปดาห์: เรื่องราว เกม เพลง บทอ่าน แฟลชการ์ด แบบทดสอบ รางวัล — สองภาษาไทย/อังกฤษ พร้อมอ่านออกเสียง
Technical Details / รายละเอียดทางเทคนิค
| Component | What It Does / ทำอะไร |
|---|
| sw.js (Service Worker) | Runs in the background. Intercepts every page request and serves from cache. Downloads files in batches of 10 on install. / ทำงานเบื้องหลัง ดักจับทุกคำขอหน้าเว็บและส่งจากแคช ดาวน์โหลดทีละ 10 ไฟล์ตอนติดตั้ง |
| Cache API | Browser's built-in offline storage. Saves complete web pages on your phone. Persists until you clear browser data. / พื้นที่เก็บข้อมูลออฟไลน์ของเบราว์เซอร์ บันทึกหน้าเว็บบนโทรศัพท์ คงอยู่จนกว่าจะล้างข้อมูล |
| manifest.json | Makes this page installable as a PWA. Adds an app icon to your home screen. Opens full-screen. / ทำให้หน้านี้ติดตั้งเป็น PWA ได้ เพิ่มไอคอนแอปบนหน้าจอหลัก เปิดแบบเต็มจอ |
| Standalone HTML | Each lesson is one HTML file with ALL code inside — no external CSS, JS, or API calls. This is why it works offline. / แต่ละบทเรียนเป็นไฟล์ HTML หนึ่งไฟล์ที่มีโค้ดทั้งหมดอยู่ภายใน — ไม่มี CSS, JS หรือ API ภายนอก นี่คือเหตุผลที่ทำงานออฟไลน์ได้ |
| Web Speech API | Text-to-speech pronunciation built into every phone's browser. Tap any English word to hear it. / อ่านออกเสียงในเบราว์เซอร์ของทุกโทรศัพท์ แตะคำภาษาอังกฤษเพื่อฟัง |