July 5, 2025
Progressive Web App (PWA): เว็บที่ทำงานเหมือนแอปในอนาคต
Progressive Web App (PWA) คือเว็บไซต์ที่ทำงาน “เหมือนแอป” สามารถติดตั้งบนหน้าจอ ทำงานออฟไลน์บางส่วน และรองรับพุชโนติฟิเคชัน โดยใช้ HTTPS, Service Worker และ Web App Manifest ประสบการณ์ใช้งานที่เร็วและลื่นไหล พร้อมต้นทุนพัฒนาที่ต่ำกว่าหลายแพลตฟอร์ม.
Progressive Web App (PWA) คืออะไร? ประโยชน์ วิธีทำ และเช็กลิสต์โปรดักชัน (2025)
สรุปสั้น PWA ประกอบด้วย 3 เสาหลัก: HTTPS เพื่อความปลอดภัย, Service Worker สำหรับแคช/ออฟไลน์/แบ็กกราวด์ และ Web App Manifest สำหรับการติดตั้งและกำหนดไอคอน/ธีม/โหมดแสดงผล (standalone).
ตาราง: PWA vs เว็บไซต์ทั่วไป vs Native App
| มิติ | PWA | เว็บไซต์ทั่วไป | Native App |
|---|---|---|---|
| ติดตั้งบนจอ (Add to Home Screen) | ได้ (ผ่าน Manifest + เกณฑ์บราวเซอร์) | ไม่ได้ | ได้ (ผ่านสโตร์) |
| ออฟไลน์/แคช | ได้ (Service Worker) | จำกัด | ได้ (เต็มรูปแบบ) |
| พุชโนติฟิเคชัน | ได้บนแพลตฟอร์มที่รองรับ Web Push | ไม่ได้ | ได้ |
| การเผยแพร่/อัปเดต | ปล่อยเองบนเว็บ อัปเดตทันที | ปล่อยเองบนเว็บ | ต้องผ่านสโตร์/รีวิว |
| ต้นทุนดูแลหลายแพลตฟอร์ม | โค้ดเบสเดียว | โค้ดเบสเดียว | หลายโค้ดเบส |
องค์ประกอบหลัก + ตัวอย่างโค้ด
1) Web App Manifest – ระบุชื่อแอป ไอคอน สี ธีม และโหมดแสดงผล
{
"name": "Acme Shop",
"short_name": "Acme",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0ea5e9",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
2) Service Worker – แคชไฟล์หลัก + หน้าสำรองออฟไลน์
// sw.js (ตัวอย่างง่าย)
const CACHE_NAME = 'acme-v1';
const ASSETS = ['/', '/offline.html', '/styles.css', '/app.js'];
self.addEventListener('install', e => {
e.waitUntil(caches.open(CACHE_NAME).then(c => c.addAll(ASSETS)));
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(r => r || fetch(e.request).catch(() => caches.match('/offline.html')))
);
});
self.addEventListener('activate', e => {
e.waitUntil(
caches.keys().then(keys => Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))))
);
});
3) การลงทะเบียน Service Worker (วางในหน้าเว็บ)
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js'));
}
</script>
เช็กลิสต์ “ติดตั้งได้ + ผ่าน Lighthouse”
| รายการตรวจ | ต้องทำอะไร | ผลลัพธ์ที่คาดหวัง |
|---|
