การพัฒนาแอปพลิเคชัน Vue.js แบบ Progressive Web App (PWA)

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!