PWA là gì? Progressive Web App cho người mới
PWA (Progressive Web App) là ứng dụng web được xây dựng bằng công nghệ web tiêu chuẩn (HTML, CSS, JavaScript) nhưng mang lại trải nghiệm giống như ứng dụng native trên điện thoại và máy tính bảng. PWA kết hợp ưu điểm của web (truy cập qua URL, không cần cài đặt từ store) và ưu điểm của native app (hoạt động offline, push notification, icon trên màn hình chính).
Khái niệm PWA được Google giới thiệu năm 2015, nhưng đến nay đã trở thành tiêu chuan that su cho các ứng dụng web hiện đại. Twitter, Pinterest, Starbucks, Uber, Tinder là những tên tuổi lớn đã áp dụng PWA và ghi nhận tăng trưởng đáng kể về engagement và conversion.
3 trụ cột cốt lõi của PWA
1. Service Worker — “trái tim” của PWA
Service Worker là script JavaScript chạy ngầm, tách biệt khỏi main thread, đóng vai trò proxy giữa ứng dụng và mạng. Nó cho phép:
- Cache strategy: Cache-first, network-first, stale-while-revalidate
- Offline support: Phục vụ nội dung đã cache khi mất kết nối
- Background sync: Đồng bộ dữ liệu khi có mạng trở lại
- Push notification: Nhận thông báo ngay cả khi tab đóng
Service Worker chạy trên HTTPS (hoặc localhost) và có lifecycle riêng: install → activate → fetch. Khi install, nó cache các static asset (HTML, CSS, JS, images) thông qua Cache API.
2. Web App Manifest — “hồ sơ” để cài đặt
File manifest.json cung cấp metadata cho browser biết cách hiển thị app khi cài đặt:
name,short_name: Tên hiển thịstart_url: URL mở khi launch từ icondisplay: standalone, minimal-ui, fullscreenicons: Mảng icon các size (72×72 đến 512×512) cho splash screen, home screentheme_color,background_color: Màu giao diện
3. HTTPS — Bắt buộc
Service Worker chỉ đăng ký được trên origin an toàn (HTTPS). Đây là yêu cầu bảo mật vì SW có quyền intercept mọi request, truy cập cache, gửi push notification.
Tại sao nên dùng PWA?
| Lợi ích | Mô tả |
|---|---|
| Không qua App Store | Triển khai tức thì, không review, không phí 30%, cập nhật tự động |
| Cross-platform | Một codebase chạy iOS, Android, Windows, macOS, Linux |
| Offline-first | Hoạt động không cần mạng, critical cho vùng kết nối kém |
| Kích thước nhỏ | Chỉ vài MB so với hàng chục MB native app |
| SEO friendly | Là web, được Google index bình thường |
| Chia sẻ qua link | Gửi URL thay vì nhờ người download app |
Các API then chốt cho PWA
| API | Chức năng | Browser support |
|---|---|---|
Service Worker |
Cache, offline, background sync, push | Tất cả browser hiện đại |
Cache API |
Lưu trữ request/response | Chrome 40+, Firefox 39+, Safari 11+ |
Web App Manifest |
Metadata cài đặt app | Chrome 39+, Edge 17+, Safari 16.4+ |
Push API |
Nhận push từ server | Chrome 42+, Firefox 44+, Safari 16.4+ |
Background Sync |
Đồng bộ khi online | Chrome 49+, Edge 79+ |
File System Access API |
Đọc/ghi file local | Chrome 86+, Edge 86+ |
Contact Picker API |
Chọn contact từ address book | Chrome 80+, Edge 80+ |
Case study thực tế
- Twitter Lite: Giảm 70% data usage, tăng 65% pages/session, tăng 20% bounce rate thấp hơn
- Pinterest: Tăng 60% engagement, tăng 44% ad revenue, time on site tăng 40%
- Starbucks: Đơn đặt hàng online tăng 2x, app web chỉ 600KB vs 148MB iOS app
- Uber: Web app 50KB gzip, load <3s trên 2G, hoạt động offline
- Tinder: Giảm 90% bundle size, load time từ 11.9s xuống 4.6s
Hạn chế của PWA
- iOS Safari: Hỗ trợ chậm (push notification chỉ từ iOS 16.4, 2023), không có background sync, giới hạn storage 50MB
- Hardware access: Chưa truy cập được Bluetooth, NFC, USB, camera nâng cao (đang cải thiện qua Project Fugu)
- App Store visibility: Không xuất hiện trên App Store/Play Store (có thể đóng gói qua TWA/Bubblewrap)
- Background execution: Bị hạn chế so với native app
Công cụ xây dựng PWA
- Workbox (Google): Thư viện tạo SW tự động, cache strategies có sẵn
- Vite PWA Plugin: Tích hợp Workbox vào Vite, zero-config
- Next.js PWA:
next-pwahoặc@ducanh2912/next-pwa - PWA Builder (Microsoft): Tool online tạo manifest, SW, package cho Store
- Lighthouse: Audit PWA checklist trong Chrome DevTools
Kết luận
PWA là giải pháp cân bằng giữa chi phí phát triển, khả năng tiếp cận và trải nghiệm người dùng. Với sự hỗ trợ ngày càng tốt từ các browser (đặc biệt là Safari iOS), PWA đang trở thành lựa chọn mặc định cho nhiều loại ứng dụng: e-commerce, news, social, productivity tools. Nếu bạn xây dựng web app năm 2025, PWA nên nằm trong roadmap ngay từ đầu.
