วิธีสร้าง Progressive Web App (PWA) ด้วย Vue.js ให้ทำงานออฟไลน์อย่างปลอดภัย

บทความนี้จะอธิบายวิธีสร้าง Progressive Web App (PWA) ด้วย Vue.js ให้ทำงานแบบออฟไลน์อย่างปลอดภัย คุณจะได้เรียนรู้ขั้นตอนตั้งค่าโครงการ การเพิ่ม Service Worker การจัดการแคช และมาตรการรักษาความปลอดภัยของข้อมูลที่ใช้งานในสภาพออฟไลน์

Overview — Overview

PWA คือเว็บแอปพลิเคชันที่ทำงานคล้ายแอปพื้นโต๊ะ มีคุณสมบัติสำคัญคือสามารถทำงานได้แม้ไม่มีการเชื่อมต่ออินเทอร์เน็ต และให้ประสบการณ์ผู้ใช้ราบรื่นเหมือนแอปดั้งเดิม

• Vue.js เป็นเฟรมเวิร์กที่ง่ายต่อการผสานกับ PWA ผ่าน plugin
• Service Worker คือตัวกลางจัดการเครือข่ายและแคชในเบราว์เซอร์
• ความปลอดภัยของข้อมูลออฟไลน์ต้องพิจารณาการเข้ารหัสและการตรวจสอบความถูกต้อง

**Tip: อย่าเก็บข้อมูลสำคัญ (เช่น token, รหัสผ่าน) ไว้โดยตรงในแคช ควรใช้ IndexedDB พร้อมการเข้ารหัส AES หรือ RSA ก่อนบันทึก

Setup Environment — Setup

เริ่มต้นด้วยการเตรียมเครื่องมือพัฒนาให้พร้อมก่อนเขียนโค้ด

• ติดตั้ง Node.js เวอร์ชั่นล่าสุด (แนะนำ LTS)
• ตรวจสอบว่ามี npm หรือ yarn พร้อมใช้งาน
• สร้างไดเรกทอรีสำหรับโปรเจคใหม่และเปิดเทอร์มินัลในโฟลเดอร์นั้น

Install Vue CLI and PWA Plugin — Install

Vue CLI ทำให้การตั้งค่าโครงสร้างโปรเจคเป็นเรื่องง่าย รวมถึงเพิ่ม plugin สำหรับ PWA ได้ทันที

• ติดตั้ง Vue CLI ด้วยคำสั่ง `npm install -g @vue/cli`
• สร้างโปรเจคใหม่ด้วย preset ที่รวม PWA: `vue create my-pwa-app` เลือก “Manually select features” “Progressive Web App”
• ยืนยันการสร้างไฟล์ `manifest.json` และ `service-worker.js` อัตโนมัติ

Configure Service Worker — Service Worker Configuration

Service Worker ควบคุมการทำงานออฟไลน์และแคชของแอป เราต้องปรับแต่งให้สอดคล้องกับความต้องการเฉพาะ

• แก้ไขไฟล์ `vue.config.js` เพิ่มส่วน `pwa` เพื่อกำหนดชื่อแอป, ธีมสี, และไอคอน
• ตั้งค่า workboxOptions ให้ใช้กลยุทธ์ `StaleWhileRevalidate` สำหรับหน้า HTML และ CSS ที่เปลี่ยนบ่อย
• กำหนด exclude เพื่อละเว้นไฟล์ที่ไม่ต้องการแคช เช่น ไฟล์ `.map` หรือข้อมูลส่วนบุคคล

Implement Offline Caching — Offline Caching

เพื่อให้ผู้ใช้สามารถใช้งานได้แม้ไม่มีอินเทอร์เน็ต เราต้องกำหนดสิ่งที่ควรเก็บไว้ในแคช

• สร้างไฟล์ `src/registerServiceWorker.js` แล้วเรียก `register()` ใน `main.js`
• ใช้ workbox-routing เพื่อตั้งค่า route สำหรับ API ที่ต้องการทำ cache แบบ “NetworkFirst” หรือ “CacheFirst” ตามความสำคัญ
• เพิ่ม runtimeCaching ใน `vue.config.js` เช่น

```js runtimeCaching: [ { urlPattern: new RegExp('/api/.*'), handler: 'NetworkFirst', options: { cacheName: 'api-cache', expiration: { maxEntries: 50, maxAgeSeconds: 86400 }, }, }, ] ```

• เก็บข้อมูลที่ดึงมาจาก API ลงใน IndexedDB เพื่อให้สามารถเรียกใช้งานต่อเนื่องเมื่อ offline

Secure Offline Data — Secure Data Handling

การทำงานออฟไลน์เพิ่มความเสี่ยงต่อการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต เราจำเป็นต้องเข้ารหัสและตรวจสอบสิทธิ์อย่างเคร่งครัด

• ใช้ crypto-js หรือ Web Crypto API เพื่อเข้ารหัสข้อมูลก่อนบันทึกลง IndexedDB
• เก็บคีย์การเข้ารหัสไว้ใน Secure Storage ของเบราว์เซอร์ (เช่น `window.sessionStorage` ที่ถูกเข้ารหัสด้วย master key)
• ตรวจสอบ JWT token ก่อนทำคำขอ API ทั้งออนไลน์และออฟไลน์; หาก token หมดอายุ ให้แสดงข้อความบังคับให้ผู้ใช้เข้าสู่ระบบใหม่

**Tip: อย่าลืมเรียก `self.skipWaiting()` และ `clients.claim()` ใน Service Worker หลังอัปเดตไฟล์ เพื่อป้องกันการใช้เวอร์ชันเก่าที่ไม่มีการเข้ารหัส

Test Offline Functionality — Testing

ตรวจสอบว่าทุกฟีเจอร์ทำงานได้จริงเมื่อไม่มีเครือข่าย

• เปิด Chrome DevTools Application Service Workers แล้วเลือก “Offline” เพื่อจำลองสภาพออฟไลน์
• ตรวจสอบว่า UI แสดงข้อมูลจาก IndexedDB อย่างถูกต้องและไม่มีข้อผิดพลาดในคอนโซล
• ใช้ Lighthouse (Audits) เพื่อตรวจวัดคะแนน PWA รวมถึงความปลอดภัยของแอป

Deploy to Production — Deployment

เมื่อทดสอบผ่านแล้ว ขั้นตอนสุดท้ายคือการเผยแพร่บนเซิร์ฟเวอร์จริง

• สร้างไฟล์บิลด์ด้วย `npm run build` หรือ `yarn build` ไฟล์ที่ได้จะอยู่ในโฟลเดอร์ `dist/`
• อัปโหลดไฟล์ไปยัง CDN หรือ Static Hosting เช่น Netlify, Vercel, Firebase Hosting เพื่อให้การกระจายแคชทำงานเร็วที่สุด
• ตรวจสอบว่า HTTP header `Service-Worker-Allowed: /` ถูกตั้งค่าอย่างถูกต้องบนเซิร์ฟเวอร์

Summary — Summary

สรุปขั้นตอนสำคัญที่ควรจำเมื่อสร้าง PWA ด้วย Vue.js เพื่อรองรับการใช้งานออฟไลน์อย่างปลอดภัย

• เตรียมสภาพแวดล้อมด้วย Node, npm และ Vue CLI
• ใช้ plugin PWA ของ Vue ทำให้ Service Worker และ manifest ถูกสร้างโดยอัตโนมัติ
• ปรับแต่ง Workbox ให้เหมาะกับประเภทของทรัพยากร (HTML, API, รูปภาพ)
• เก็บข้อมูลสำคัญใน IndexedDB พร้อมการเข้ารหัสเพื่อความปลอดภัย
• ทดสอบแบบ offline ด้วย DevTools และ Lighthouse ก่อนเผยแพร่
• Deploy ไปยัง CDN หรือบริการโฮสติ้งที่สนับสนุน HTTPS อย่างเต็มรูปแบบ

ทำตามขั้นตอนเหล่านี้ คุณจะได้ PWA ที่ทำงานออฟไลน์อย่างราบรื่นและรักษาความปลอดภัยของข้อมูลผู้ใช้ได้อย่างเข้มงวด.