1. Progressive Web App (PWA) คืออะไร?

Progressive Web App (PWA) เป็นแอปพลิเคชันที่รวมข้อดีของเว็บไซต์และแอปพลิเคชันมือถือเข้าด้วยกัน โดยมีคุณสมบัติเด่นเช่น:

• ทำงานได้แม้ไม่มีอินเทอร์เน็ต (Offline)
• ติดตั้งแอปพลิเคชันลงบนอุปกรณ์ของผู้ใช้ได้
• มีการแจ้งเตือนแบบ Push Notification
• โหลดหน้าเว็บได้รวดเร็ว (Fast Loading)

2. การเริ่มต้นพัฒนา PWA ด้วย Vue.js

Vue CLI รองรับการสร้าง PWA ได้อย่างง่ายดายผ่าน Plugin @vue/cli-plugin-pwa

การติดตั้ง PWA Plugin

vue add pwa

การตั้งค่าในไฟล์ vue.config.js

module.exports = {
  pwa: {
    name: 'My Vue PWA',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    manifestOptions: {
      short_name: 'VuePWA',
      start_url: '/',
      display: 'standalone',
      background_color: '#ffffff'
    }
  }
};

3. การสร้างไฟล์ Manifest และ Service Worker

3.1 ไฟล์ Manifest

ไฟล์ manifest.json เป็นไฟล์ที่บอกข้อมูลเกี่ยวกับแอปพลิเคชัน เช่น ชื่อ, ไอคอน, และการตั้งค่าเริ่มต้น

ตัวอย่างไฟล์ manifest.json

{
  "name": "My Vue PWA",
  "short_name": "VuePWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4DBA87",
  "icons": [
    {
      "src": "/img/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3.2 Service Worker

Service Worker เป็นไฟล์ JavaScript ที่ทำงานใน Background เพื่อจัดการ Cache และการทำงาน Offline

การเพิ่ม Logic ใน Service Worker

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/css/style.css',
        '/js/app.js'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

4. การเพิ่ม Push Notification

Push Notification เป็นหนึ่งในฟีเจอร์เด่นของ PWA ที่ช่วยให้ผู้ใช้ได้รับการแจ้งเตือนแม้ไม่ได้เปิดแอปพลิเคชันอยู่

การขออนุญาตจากผู้ใช้

Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    console.log('Notification permission granted.');
  }
});

การส่ง Notification

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.ready.then((registration) => {
    registration.showNotification('Hello Vue PWA!', {
      body: 'This is a notification from your Vue.js PWA.',
      icon: '/img/icons/icon-192x192.png'
    });
  });
}

5. การทดสอบ PWA

5.1 Lighthouse

ใช้ Lighthouse ใน Chrome DevTools เพื่อตรวจสอบว่าแอปพลิเคชันของคุณผ่านเกณฑ์ PWA หรือไม่

• เปิด DevTools
• ไปที่แท็บ “Lighthouse”
• เลือก “Progressive Web App”
• คลิก “Generate report”

5.2 การทดสอบ Offline

• ปิดการเชื่อมต่ออินเทอร์เน็ต (Offline Mode)
• โหลดแอปพลิเคชันเพื่อดูว่า Cache ทำงานได้หรือไม่

6. การ Deploy PWA

การ Deploy PWA สามารถทำได้เหมือนกับการ Deploy แอปพลิเคชัน Vue.js ทั่วไป โดยต้องแน่ใจว่าไฟล์ manifest.json และ Service Worker ถูกตั้งค่าอย่างถูกต้อง

ตัวอย่างการ Deploy บน Netlify

1. สร้าง Production Build:
   bash npm run build
2. อัปโหลดโฟลเดอร์ dist/ ไปยัง Netlify
3. ตรวจสอบการทำงาน PWA ผ่าน Chrome DevTools

7. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการพัฒนาแอปพลิเคชัน Vue.js แบบ PWA รวมถึงการตั้งค่า Plugin, การสร้างไฟล์ Manifest และ Service Worker, การเพิ่ม Push Notification, และการทดสอบ PWA

ในบทถัดไป เราจะศึกษาการรวม Vue.js กับระบบ Backend เพื่อพัฒนา Full Stack Application!