BÀI 18: BIẾN TODO APP THÀNH PWA (Progressive Web App)

Bài học này sẽ giúp bạn nâng cấp Todo App thành một ứng dụng Progressive Web App (PWA) – có thể cài như app trên điện thoại, chạy offline, và trải nghiệm như native app.

Mục tiêu:

• Cài plugin vite-plugin-pwa
• Thêm file manifest.json
• Thêm icon, splash screen
• Hoạt động offline, có thể install như app

Phần 1: Cài đặt plugin PWA cho Vite

Chạy lệnh:

📋 Copynpm install vite-plugin-pwa --save-dev

Phần 2: Cấu hình Vite để hỗ trợ PWA

vite.config.js

📋 Copyimport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.svg', 'robots.txt', 'apple-touch-icon.png'],
      manifest: {
        name: 'Vue Todo App',
        short_name: 'TodoApp',
        description: 'Ứng dụng quản lý công việc bằng Vue + Pinia',
        theme_color: '#2b8a3e',
        background_color: '#ffffff',
        display: 'standalone',
        start_url: '/',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ]
})

Phần 3: Thêm các file vào thư mục public/

Tạo thư mục public/ nếu chưa có và đặt vào:

📋 Copynpm run build
npx serve dist

Truy cập vào http://localhost:5000 bạn sẽ thấy popup như:

“Install TodoApp?”
và bạn có thể cài ứng dụng như mobile app, chạy offline (có Service Worker), và khởi động nhanh hơn.

1. Tùy chỉnh icon, màu sắc cho phù hợp thương hiệu riêng
2. Hiển thị banner “Bạn có muốn cài ứng dụng?” khi người dùng online
3. Tạo offline.html hiển thị khi mạng mất hoàn toàn