Mobile Web Application with PWA
หลักสูตร Mobile Web Application with PWA เป็นการอบรมสร้างเว็บแอปบนมือถือแบบ Mobile-first ด้วย CSS สมัยใหม่ แล้วทำเป็น Progressive Web App ที่ติดตั้งได้และใช้งาน Offline ได้ เหมาะกับนักพัฒนาเว็บและทีมไอทีที่มีพื้นฐาน HTML, CSS และ JavaScript จบแล้วได้แอป PWA ที่ใช้บนมือถือจริงได้
- ระยะเวลา12 ชั่วโมง · 2 วัน
- รูปแบบออนไซต์ / ออนไลน์สด
- รอบถัดไปเปิดตามคำขอ
- ใบรับรองมี Certificate
ภาพรวมหลักสูตร
ผู้ใช้ส่วนใหญ่เข้าเว็บจากมือถือ และหลายองค์กรต้องการแอปสำหรับพนักงานหรือลูกค้าโดยไม่อยากพัฒนาแอปแยกสำหรับ Android และ iOS Progressive Web App หรือ PWA คือเว็บแอปที่ออกแบบให้ใช้บนมือถือได้ดี ติดตั้งลงหน้าจอหลักได้ ทำงานได้แม้สัญญาณไม่ดี และส่งการแจ้งเตือนได้ในเบราว์เซอร์ที่รองรับ โดยใช้ HTML, CSS และ JavaScript ชุดเดียว จึงเป็นทางเลือกที่ประหยัดและอัปเดตได้ทันทีโดยไม่ต้องผ่าน Store
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ที่เริ่มจากการออกแบบเว็บแอปแบบ Mobile-first ด้วย CSS สมัยใหม่ ทั้ง Viewport, Grid, Container Queries ฟอร์ม Touch และ Animation แล้วต่อด้วยการทำ PWA ตั้งแต่ Web App Manifest, Service Worker, การทำงานแบบ Offline, Vite PWA กับ Workbox และการเรียกใช้ความสามารถของอุปกรณ์ผ่าน Web API ปิดท้ายด้วย Workshop แอป PWA ที่ติดตั้งและทดสอบบนมือถือจริง (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Intermediate)
สิ่งที่คุณจะได้รับ
- เข้าใจหลักการสร้างเว็บแอปบนมือถือ และเลือกระหว่าง PWA กับแอปแบบ Native ได้
- ออกแบบหน้าจอแบบ Mobile-first ด้วย Viewport, Grid และ Container Queries ได้
- สร้างฟอร์มและการโต้ตอบแบบ Touch ที่ใช้งานง่ายบนมือถือได้
- สร้าง Web App Manifest และ Service Worker ให้เว็บติดตั้งได้และทำงานแบบ Offline ได้
- ใช้ Vite PWA กับ Workbox และเรียกใช้ความสามารถของอุปกรณ์ผ่าน Web API ได้
- ทดสอบ ดีบัก และนำ PWA ขึ้นใช้งานบน HTTPS ได้
หลักสูตรนี้เหมาะสำหรับ
- ผู้ที่สนใจสร้าง Web Application ที่ใช้งานบนมือถือได้ทุกระบบ
- นักพัฒนาเว็บที่ต้องการทำเว็บให้ติดตั้งเป็นแอปและใช้งานแบบ Offline ได้
- ทีมไอทีที่ต้องการแอปภายในองค์กรโดยไม่พัฒนาแอปแยกตามระบบปฏิบัติการ
- ผู้ที่ผ่านหลักสูตร HTML5 และ CSS มาแล้วและต้องการต่อยอด
พื้นฐานของผู้เข้าอบรม
- มีความรู้ HTML และ CSS เป็นอย่างดี หรือผ่านหลักสูตร HTML5 และ CSS มาแล้ว
- เขียน JavaScript เบื้องต้นได้ เช่น ฟังก์ชัน Event และ fetch
- มีประสบการณ์ทำเว็บไซต์มาพอสมควร
หัวข้อการฝึกอบรม
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Mobile Web Application เนื้อหาเขียนใหม่ให้ Progressive Web App และ Responsive แบบ Mobile-first เป็นแกนหลัก อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และ Workshop ตลอดหลักสูตร ระดับ Intermediate ผู้เรียนจะได้ออกแบบหน้าจอมือถือด้วย Viewport, Grid และ Container Queries ทำฟอร์มและการโต้ตอบแบบ Touch สร้าง Web App Manifest และ Service Worker ใช้ Vite PWA กับ Workbox เรียกใช้ความสามารถของอุปกรณ์ผ่าน Web API แล้วติดตั้งและทดสอบแอปบนมือถือจริง พร้อมรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ
Day 1 เว็บแอปบนมือถือแบบ Mobile-first
Section 1: Lab: Mobile Web Application และ PWA วันนี้
- เว็บแอป PWA และแอปแบบ Native ต่างกันอย่างไร และเลือกอย่างไร
- ตัวอย่าง PWA ที่ใช้งานจริงและสิ่งที่แต่ละเบราว์เซอร์รองรับ
- สร้างโปรเจกต์ด้วย Vite และจำลองมือถือด้วย Device Mode ใน DevTools
- Remote Debug บน Android ด้วย Chrome และบน iPhone ด้วย Safari
- Lab: เปิดเว็บแอปตัวอย่างบนมือถือจริงของตัวเอง
Section 2: Lab: Viewport และ Layout แบบ Mobile-first
- Viewport Meta Tag และผลต่อการแสดงผลบนมือถือ
- หน่วย dvh, svh และ lvh แทนปัญหา 100vh บนมือถือ
- Safe Area สำหรับจอที่มีรอยบากด้วย env(safe-area-inset-*)
- Media Queries แบบ Range Syntax และการวาง Breakpoint
- Lab: โครงหน้าแอปที่มีแถบเมนูล่างแบบติดขอบจอ
Section 3: Lab: Responsive Component ด้วย CSS สมัยใหม่
- Flexbox และ Grid สำหรับหน้าจอแอป
- Container Queries และหน่วย cqi สำหรับ Component ที่ปรับตัวเอง
- ขนาดตัวอักษรและระยะห่างแบบยืดหยุ่นด้วย clamp()
- รูปภาพ Responsive ด้วย srcset, sizes และ Lazy Loading
- Lab: การ์ดสินค้าและรายการที่ใช้ได้ทุกขนาดจอ
Section 4: Lab: ฟอร์มบนมือถือ
- เลือก type และ inputmode ให้แป้นพิมพ์ตรงกับข้อมูล
- autocomplete และ enterkeyhint ให้กรอกได้เร็วขึ้น
- ขนาดปุ่มและช่องที่แตะง่าย และข้อความแจ้งเตือนที่อ่านง่าย
- ตรวจข้อมูลด้วย HTML และส่งฟอร์มด้วย fetch
- Lab: ฟอร์มลงทะเบียนที่กรอกได้สะดวกด้วยมือเดียว
Section 5: Lab: Touch, Gesture และ Animation
- Pointer Events และ touch-action สำหรับแตะและลาก
- Scroll Snap สำหรับสไลด์และแท็บแบบปัด
- รองรับการหมุนจอด้วย Media Query orientation
- Transition, Transform และ @keyframes ที่ลื่นบนมือถือ
- Lab: เมนูปัดเปิดและการเปลี่ยนหน้าที่เคารพ prefers-reduced-motion
Day 2 Progressive Web App ที่ติดตั้งได้และใช้ Offline ได้
Section 6: Lab: Web App Manifest และการติดตั้ง
- สมาชิกสำคัญของ Manifest: name, short_name, start_url, display และ icons
- ไอคอนขนาด 192 และ 512 พิกเซล และไอคอนแบบ maskable
- theme_color, Splash Screen และการแสดงผลแบบ standalone
- การติดตั้งบน Android และเดสก์ท็อป และการเพิ่มลงหน้าจอหลักบน iOS
- Lab: ทำเว็บแอปให้ติดตั้งได้และตรวจในแท็บ Application ของ DevTools
Section 7: Lab: Service Worker และการทำงานแบบ Offline
- วงจรชีวิต Service Worker: register, install, activate และ fetch
- Cache API และการเก็บไฟล์ที่จำเป็นไว้ล่วงหน้า
- กลยุทธ์ Cache First, Network First และ Stale While Revalidate
- หน้า Offline สำรองและการอัปเดตเวอร์ชันใหม่
- Lab: แอปที่เปิดได้แม้ปิดอินเทอร์เน็ต
Section 8: Lab: PWA ด้วย Vite PWA และ Workbox
- ติดตั้ง vite-plugin-pwa และตั้งค่า Manifest ในไฟล์เดียว
- Precache ไฟล์ที่ Build แล้วโดยอัตโนมัติ
- Runtime Caching สำหรับ API และรูปภาพ
- registerType แบบ autoUpdate และแบบแจ้งให้ผู้ใช้กดอัปเดต
- Lab: ย้ายแอปจาก Service Worker ที่เขียนเองมาใช้ Workbox
Section 9: Lab: ความสามารถของอุปกรณ์ผ่าน Web API
- Geolocation และการขอสิทธิ์จากผู้ใช้อย่างเหมาะสม
- ถ่ายภาพหรือเลือกรูปจากกล้อง และแชร์ด้วย Web Share API
- เก็บข้อมูลในเครื่องด้วย IndexedDB สำหรับใช้ Offline
- Notification และ Web Push พร้อมข้อจำกัดของแต่ละระบบ
- Lab: แอปบันทึกการเข้างานพร้อมรูปถ่ายและตำแหน่ง
Section 10: Workshop: แอป PWA ที่ติดตั้งได้จริง
- รวมหน้าจอ ฟอร์ม Offline และความสามารถของอุปกรณ์เป็นแอปเดียว
- ตรวจ Manifest และ Service Worker ด้วย DevTools และวัดคุณภาพด้วย Lighthouse
- เผยแพร่บน HTTPS ด้วย GitHub Pages หรือ Netlify
- ติดตั้งและทดสอบบนมือถือจริงทั้ง Android และ iOS
- ภาพรวมการห่อ PWA เป็นแอปบน Store ด้วย Capacitor และนำเสนอผลงาน
รอบอบรมและรูปแบบการอบรม
สำหรับบุคคล — รอบอบรมทั่วไป
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
สำหรับองค์กร — In-house / Private Training
- ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
- เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
- ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ
วิทยากรผู้สอน
คำถามที่พบบ่อย
Viewport meta tag คืออะไร ทำไมเว็บบนมือถือต้องมี
Viewport meta tag คือแท็ก meta ชื่อ viewport ในส่วน head ที่บอกเบราว์เซอร์บนมือถือให้วางหน้าเว็บกว้างเท่าจอจริง โดยทั่วไปกำหนดเป็น width=device-width และ initial-scale=1 ถ้าไม่ใส่ เบราว์เซอร์มือถือจะจำลองจอกว้างแบบเดสก์ท็อปแล้วย่อทั้งหน้าลงมา ทำให้ตัวอักษรเล็กจนอ่านยาก และ Media Queries ไม่ตอบสนองตามขนาดจอจริง นอกจากนี้ควรใช้หน่วย dvh แทน 100vh เมื่อต้องการความสูงเต็มจอ เพราะแถบของเบราว์เซอร์บนมือถือยืดหดได้
PWA คืออะไร ต่างจากแอปที่ดาวน์โหลดจาก Store อย่างไร
PWA หรือ Progressive Web App คือเว็บแอปที่มี Web App Manifest และ Service Worker ทำให้ติดตั้งลงหน้าจอหลัก เปิดแบบเต็มจอเหมือนแอป และทำงานได้แม้สัญญาณไม่ดี โดยเผยแพร่ผ่านเว็บที่เป็น HTTPS และอัปเดตได้ทันทีโดยไม่ต้องรออนุมัติจาก Store ส่วนแอปแบบ Native เข้าถึงความสามารถของเครื่องได้มากกว่าและอยู่ใน Store ได้ งานที่ต้องการฟีเจอร์เฉพาะของเครื่องหรือต้องขึ้น Store อาจห่อเว็บแอปด้วย Capacitor หรือพัฒนาแบบ Native แทน
Service Worker ช่วยให้เว็บใช้งาน Offline ได้อย่างไร
Service Worker คือสคริปต์ที่เบราว์เซอร์รันแยกจากหน้าเว็บ และดักคำขอทุกครั้งที่หน้าเว็บโหลดไฟล์หรือเรียก API เมื่อติดตั้งครั้งแรกจะเก็บไฟล์ที่จำเป็นไว้ใน Cache API เมื่อไม่มีอินเทอร์เน็ตจึงตอบจาก Cache แทนได้ เราเลือกกลยุทธ์ได้ เช่น Cache First สำหรับไฟล์ที่ไม่ค่อยเปลี่ยน และ Network First สำหรับข้อมูลที่ต้องสดใหม่ ส่วนข้อมูลที่ผู้ใช้บันทึกขณะ Offline เก็บไว้ใน IndexedDB ได้ ในงานจริงนิยมใช้ Workbox ผ่าน Vite PWA เพื่อลดโค้ดที่ต้องเขียนเอง
หลักสูตร Mobile Web Application with PWA เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน
เหมาะกับผู้ที่สนใจสร้าง Web Application ให้ใช้งานได้บนมือถือทุกระบบ นักพัฒนาเว็บที่อยากทำเว็บให้ติดตั้งเป็นแอปและใช้งาน Offline ได้ และทีมไอทีที่ต้องการแอปภายในองค์กร ควรมีความรู้ HTML และ CSS เป็นอย่างดี เขียน JavaScript เบื้องต้นได้ และมีประสบการณ์ทำเว็บไซต์มาพอสมควร เพราะหลักสูตรต่อยอดจากพื้นฐานเหล่านี้โดยตรง
เรียนจบหลักสูตร Mobile Web Application with PWA แล้วทำอะไรได้บ้าง
ออกแบบหน้าจอแบบ Mobile-first ด้วย Viewport, หน่วย dvh, Grid และ Container Queries ทำฟอร์มที่กรอกง่ายบนมือถือ รองรับ Touch, Gesture และการหมุนจอ สร้าง Web App Manifest และ Service Worker ให้เว็บติดตั้งได้และใช้งาน Offline ได้ ใช้ Vite PWA กับ Workbox เรียกใช้ตำแหน่ง กล้อง การแชร์ และการแจ้งเตือนผ่าน Web API และเผยแพร่ PWA บน HTTPS แล้วทดสอบบนมือถือจริงได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้
เรียน Mobile Web Application with PWA ต้องใช้เครื่องมืออะไรบ้าง
ใช้ Visual Studio Code, Google Chrome พร้อม DevTools และ Node.js รุ่น LTS สำหรับสร้างโปรเจกต์ด้วย Vite และ vite-plugin-pwa ควรมีสมาร์ตโฟน Android หรือ iPhone ของตัวเองสำหรับติดตั้งและทดสอบ และบัญชี GitHub สำหรับเผยแพร่บน HTTPS แบบใช้ฟรี การดีบักบน iPhone ผ่าน Safari ต้องใช้เครื่อง Mac ส่วนการห่อ PWA เป็นแอปบน Store ด้วย Capacitor เป็นภาพรวมในหลักสูตรนี้ และการ Build แอป iOS ต้องใช้ Mac กับ Xcode