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

องค์ประกอบหลัก + ตัวอย่างโค้ด

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”