ทำเว็บด้วย AI ให้ใช้งานได้แม้ไม่มี internet ได้ไหม? ทำ offline ได้แค่ไหน เก็บข้อมูลที่ไหน และสั่ง AI ยังไง

ทำได้ เว็บที่สร้างด้วย Claude Code, Codex หรือ Cursor ใช้งานได้ตอนไม่มี internet โดยไม่ต้องทำเป็น native app แค่ใช้ Service Worker เก็บไฟล์ของเว็บไว้ในเครื่อง แล้วเก็บข้อมูลผู้ใช้ไว้ใน IndexedDB แต่ฟีเจอร์ที่ต้องคุยกับ server เช่น login, จ่ายเงิน หรือเรียก AI API จะใช้ไม่ได้ตอนไม่มีสัญญาณ เพราะฉะนั้นต้องแยกให้ชัดตั้งแต่แรกว่าส่วนไหนทำในเครื่องได้ และส่วนไหนต้องรอเน็ต

บทความนี้จะไล่ตั้งแต่ทำไมต้องทำ offline, offline มีกี่ระดับ, เครื่องมือที่ต้องใช้, ตัวอย่างผลงานคนไทยที่ทำแล้ว, วิธีเขียน prompt สั่ง AI, ไปจนถึงปัญหาที่มือใหม่เจอบ่อยหลัง deploy

ทำไมเว็บบางแบบต้องใช้ได้ตอนไม่มี internet

คนทำเว็บส่วนใหญ่นั่งทำงานในที่ที่ Wi-Fi แรง เลยลืมไปว่าผู้ใช้จริงไม่ได้อยู่ในสภาพแบบนั้นเสมอ ลองนึกถึงคนที่ใช้งานกลางทุ่งนา ในห้างที่ชั้นใต้ดินสัญญาณหาย บนรถไฟ หรือคนที่ใช้ซิมแบบเน็ตจำกัด ถ้าเว็บเปิดแล้วขึ้นหน้าไดโนเสาร์ เขาก็ปิดทิ้งแล้วไม่กลับมาอีก

ตัวอย่างที่เห็นภาพชัดคือ เกษตรกรผู้ช่วย ที่คำนวณสูตรปุ๋ย ทำปฏิทินปลูกและเก็บเกี่ยว คิดต้นทุนกำไร และจัดการข้อมูลวัวควาย โดยระบุไว้ว่าชาวนา ชาวสวน และผู้เลี้ยงวัวใช้งานได้ฟรีแม้ไม่มี internet ซึ่งตรงกับชีวิตจริงของคนที่ทำงานในพื้นที่ที่สัญญาณไม่แน่นอน

อีกตัวอย่างคือ คุ้มสุด เว็บเปรียบเทียบราคาต่อหน่วยเพื่อเลือกสินค้าที่คุ้มกว่า ใช้ได้ทั้งตอนเลือกของใน supermarket และร้านออนไลน์ และทำงานแบบ offline ได้ ลองนึกภาพยืนหน้าชั้นวางในห้างที่เน็ตไม่ค่อยติด ถ้าเว็บต้องโหลดใหม่ทุกครั้งก็คงไม่มีใครใช้

offline มีกี่ระดับ เลือกให้พอดีกับงาน

คำว่า "ใช้ offline ได้" ไม่ได้มีแบบเดียว ยิ่งระดับสูงยิ่งยากและยิ่งมีจุดให้พัง มือใหม่ควรเลือกระดับที่งานต้องใช้จริง ไม่ต้องไปให้สุดตั้งแต่แรก

ถ้างานของคุณเป็นเครื่องมือคำนวณ ระดับ 2 ก็เพียงพอแล้ว ถ้าเป็นสมุดจดส่วนตัวที่ใช้เครื่องเดียว ระดับ 3 ก็ครบ ระดับ 4 ค่อยทำเมื่อมีคนขอจริง เพราะเรื่อง sync คือจุดที่โค้ดจาก AI พังบ่อยที่สุด

ส่วนประกอบที่ทำให้เว็บใช้ได้ตอน offline

ไม่ต้องจำรายละเอียดทางเทคนิคทั้งหมด แต่ควรรู้ชื่อไว้ เพื่อจะได้สั่ง AI ได้ตรงและอ่านคำตอบของมันรู้เรื่อง

Service Worker

คือ script ที่ browser รันแยกจากหน้าเว็บ ทำหน้าที่ดักทุก request ที่เว็บขอออกไป ถ้าไม่มีเน็ตก็หยิบไฟล์ที่ cache ไว้มาตอบแทน นี่คือหัวใจของระดับ 1 และ 2 ข้อสำคัญคือ Service Worker ทำงานได้เฉพาะบน HTTPS หรือ localhost เท่านั้น ข่าวดีคือ hosting ที่คนทำเว็บด้วย AI นิยมใช้ อย่าง Vercel, Cloudflare Pages, Netlify และ GitHub Pages ให้ HTTPS มาให้อยู่แล้ว

Web App Manifest

ไฟล์ JSON ที่บอกชื่อแอป ไอคอน และสีธีม ทำให้ผู้ใช้กด "เพิ่มไปที่หน้าจอโฮม" ได้ เว็บที่มี manifest กับ Service Worker ครบเรียกว่า PWA ซึ่งเปิดขึ้นมาเหมือนแอปทั่วไป ไม่มีแถบ URL

ที่เก็บข้อมูลในเครื่อง

ตรงนี้คนสับสนบ่อยที่สุด เพราะ browser มีที่เก็บข้อมูลหลายแบบ ใช้ผิดแบบเมื่อไรจะเจอปัญหาตอนข้อมูลเยอะขึ้น

กฎง่าย ๆ คือ ตั้งค่าเก็บ localStorage, ข้อมูลที่ผู้ใช้จดเก็บ IndexedDB, ไฟล์ของเว็บปล่อยให้ Service Worker จัดการใน Cache Storage

ทำงานบนเครื่องผู้ใช้ได้ประโยชน์มากกว่าแค่ offline

แนวคิดเดียวกันนี้ยังช่วยเรื่องความเป็นส่วนตัวด้วย SimpleTool รวมเครื่องมือทั่วไปอย่างแปลงเขตเวลา เปรียบเทียบไฟล์ Excel ดึงตารางจาก PDF และขยายภาพด้วย AI โดยประมวลผลบน client side ไม่ส่งไฟล์ขึ้น server เพื่อรักษาความเป็นส่วนตัว

เมื่องานหลักเกิดขึ้นใน browser ของผู้ใช้เอง มีข้อดีตามมาหลายข้อ ไม่ต้องจ่ายค่า server ประมวลผล ไม่ต้องกังวลว่าไฟล์ลูกค้าจะหลุด และพอทำงานในเครื่องได้แล้ว การต่อยอดให้ใช้ offline ก็เหลืออีกนิดเดียว คือเพิ่ม Service Worker ให้ cache ไฟล์ของเว็บไว้

ถ้าคุณกำลังทำเว็บรวมข้อมูลที่คนต้องใช้ในสถานการณ์ฉุกเฉิน อย่างแนวเดียวกับ FireflyBridge ที่รวบรวมหมายเลขฉุกเฉิน ศูนย์พักพิง และช่องทางช่วยเหลือช่วงน้ำท่วม ลองคิดเผื่อไว้ว่าผู้ใช้อาจเปิดเว็บตอนที่สัญญาณมือถือไม่ดี การทำให้หน้าเบอร์โทรสำคัญเปิดได้แม้ไม่มีเน็ตเป็นงานระดับ 1 ที่ใช้แรงไม่มาก แต่มีประโยชน์มากในวันที่จำเป็น

สั่ง AI ทำเว็บ offline ยังไงให้ได้ผล

ปัญหาที่เจอบ่อยคือพิมพ์สั้น ๆ ว่า "ทำให้ใช้ offline ได้" แล้ว AI ก็ใส่ Service Worker แบบ cache ทุกอย่างแบบไม่คิด ผลคือเว็บเปิดได้ตอน offline ก็จริง แต่พอ deploy เวอร์ชันใหม่ผู้ใช้กลับยังเห็นของเก่าอยู่ ให้บอก AI ให้ละเอียดตามโครงนี้

```
เว็บนี้ต้องใช้งาน offline ได้ระดับ 3 (บันทึกข้อมูลในเครื่อง ไม่ต้อง sync)

1. ส่วนที่ต้องใช้ได้ตอนไม่มีเน็ต: หน้าหลัก หน้าบันทึก หน้าสรุปยอด
2. ส่วนที่ใช้ได้เฉพาะตอนมีเน็ต: ปุ่มถาม AI ให้ซ่อนหรือขึ้นข้อความว่าต้องต่อ internet
3. เก็บข้อมูลผู้ใช้ใน IndexedDB ผ่าน Dexie ห้ามใช้ localStorage กับข้อมูลรายการ
4. Service Worker: ไฟล์ของเว็บใช้แบบ cache first แต่ต้องมีระบบเช็กเวอร์ชันใหม่
5. ทำ manifest พร้อมไอคอน 192 และ 512 px ให้เพิ่มลงหน้าจอโฮมได้
6. มีปุ่ม export ข้อมูลเป็นไฟล์ JSON และ import กลับได้ เผื่อผู้ใช้เปลี่ยนเครื่อง
7. อธิบายวิธีทดสอบ offline ใน Chrome DevTools หลังทำเสร็จ

ถ้าโปรเจกต์ใช้ Next.js ให้บอก AI ด้วยว่าใช้ Next.js เวอร์ชันไหนและใช้ App Router หรือไม่ เพราะวิธีใส่ Service Worker ต่างกัน ส่วนโปรเจกต์ที่ใช้ Vite มี vite-plugin-pwa ที่ AI ส่วนใหญ่รู้จักดีและตั้งค่าได้เร็ว ถ้าเป็น HTML ล้วนก็เขียน Service Worker เองไม่กี่สิบบรรทัดได้เลย

ทดสอบให้แน่ใจก่อนบอกว่า "ใช้ offline ได้"

อย่าเชื่อ AI ที่ตอบว่า "เรียบร้อยแล้ว ใช้ offline ได้" โดยที่คุณยังไม่ได้ลองเอง ให้ทดสอบตามลำดับนี้

1. เปิดเว็บที่ deploy แล้วหนึ่งครั้งตอนมีเน็ต เพื่อให้ Service Worker ติดตั้ง
2. เปิด Chrome DevTools ไปที่แท็บ Application ดูว่ามี Service Worker สถานะ activated และมีไฟล์อยู่ใน Cache Storage
3. ไปที่แท็บ Network เลือก Offline แล้วกด reload ดูว่าหน้าเว็บยังขึ้นครบ
4. ลองบันทึกข้อมูลตอน offline ปิดแท็บ เปิดใหม่ ดูว่าข้อมูลยังอยู่
5. ทดสอบบนมือถือจริงด้วยการเปิดโหมดเครื่องบิน ทั้ง Android และ iPhone เพราะพฤติกรรมไม่เหมือนกัน
6. deploy เวอร์ชันใหม่ที่แก้ข้อความสักจุด แล้วดูว่าผู้ใช้เก่าได้เห็นของใหม่จริงไหม

ข้อ 6 คือข้อที่คนข้ามบ่อยที่สุด และเป็นต้นเหตุของปัญหาที่ผู้ใช้แจ้งว่า "แก้แล้วทำไมยังเหมือนเดิม"

ปัญหาที่มือใหม่เจอบ่อยหลังเปิดใช้จริง

เว็บค้างเวอร์ชันเก่า

เกิดจาก Service Worker cache ไฟล์ไว้แล้วไม่ยอมโหลดใหม่ แก้ได้ด้วยการใส่เลขเวอร์ชันใน cache name ทุกครั้งที่ deploy และมีแถบแจ้งให้ผู้ใช้กดอัปเดต ถ้าเจอแล้ว ให้สั่ง AI ว่า "เพิ่มระบบตรวจ Service Worker เวอร์ชันใหม่ และขึ้นแถบให้ผู้ใช้กดโหลดหน้าใหม่" จะตรงจุดกว่าการพิมพ์ว่า "เว็บไม่อัปเดต"

ข้อมูลหายแบบไม่รู้ตัว

ข้อมูลใน browser ไม่ได้ถาวรร้อยเปอร์เซ็นต์ ผู้ใช้ล้างข้อมูล browser เมื่อไรก็หายหมด บางระบบอย่าง Safari บน iPhone ยังอาจลบข้อมูลของเว็บที่ไม่ได้เปิดใช้นาน ทางป้องกันคือมีปุ่ม export ข้อมูลออกเป็นไฟล์ ขอสิทธิ์ persistent storage ผ่าน navigator.storage.persist() และบอกผู้ใช้ตรง ๆ ว่าข้อมูลเก็บอยู่ในเครื่องนี้เท่านั้น

sync แล้วข้อมูลชนกัน

ถ้าทำถึงระดับ 4 จะเจอคำถามว่า ถ้าแก้ข้อมูลเดียวกันบนสองเครื่องตอน offline แล้วกลับมามีเน็ตพร้อมกัน จะเอาของเครื่องไหน AI มักเขียนแบบเอาตัวล่าสุดทับไปเลย ซึ่งอาจทำให้ข้อมูลอีกฝั่งหาย ถ้างานคุณยังไม่จำเป็นต้องใช้หลายเครื่อง อย่าเพิ่งทำระดับนี้

ฟีเจอร์ AI กับระบบจ่ายเงินใช้ไม่ได้

ส่วนที่ต้องเรียก Claude หรือ Gemini API ต้องผ่าน server เสมอ เพราะต้องซ่อน API key ไว้ฝั่ง server ตอน offline จึงใช้ไม่ได้แน่นอน วิธีที่ดีคือออกแบบให้ฟีเจอร์หลักทำงานได้โดยไม่ต้องพึ่ง AI แล้วให้ AI เป็นส่วนเสริมที่ขึ้นมาเมื่อมีเน็ต อย่าให้หน้าเว็บทั้งหน้าค้างเพราะเรียก API ไม่สำเร็จ

ไฟล์ font และรูปจากภายนอกไม่ถูก cache

เว็บภาษาไทยที่ดึง font จาก Google Fonts อาจกลายเป็นตัวอักษรหน้าตาแปลก ๆ ตอน offline ถ้า Service Worker ไม่ได้ cache ไฟล์ font ไว้ ทางที่ง่ายที่สุดคือดาวน์โหลด font มาไว้ในโปรเจกต์เอง แล้วให้ AI ใส่ไว้ในรายการไฟล์ที่ต้อง cache

เมื่อไรไม่ต้องทำ offline

ไม่ใช่ทุกเว็บที่ต้องทำ ถ้างานของคุณเป็นข้อมูลที่เปลี่ยนตลอดเวลา เช่น ผลการแข่งขันสด ราคาหุ้น หรือระบบจองคิวที่ต้องรู้ว่าช่องไหนว่างตอนนี้ การแสดงข้อมูลเก่าตอน offline อาจทำให้ผู้ใช้เข้าใจผิดมากกว่าเดิม กรณีนี้ทำแค่หน้าแจ้งว่า "ไม่มีการเชื่อมต่อ ลองใหม่อีกครั้ง" ให้ดูดีก็พอแล้ว

สรุปง่าย ๆ ถ้างานของคุณคือเครื่องมือคำนวณ สมุดจด หรือข้อมูลอ้างอิงที่ไม่ค่อยเปลี่ยน ทำ offline คุ้มเสมอ เริ่มจากระดับต่ำที่สุดที่ตอบโจทย์ ทดสอบด้วยโหมดเครื่องบินบนมือถือจริง และอย่าลืมวางระบบอัปเดตเวอร์ชันตั้งแต่วันแรก ถ้าอยากเห็นไอเดียเพิ่ม ลองเปิดดูผลงานที่คนไทยสร้างด้วย AI บนแอปเทพ แล้วสังเกตว่าเว็บไหนออกแบบมาให้ใช้ได้ในสถานการณ์ที่สัญญาณไม่ดี