PWA (Progressive Web App, ứng dụng web tiến bộ) là website được “nâng cấp” để cài lên màn hình chính, mở ra như app và chạy được khi mất mạng. Sau bài này bạn biết PWA gồm những mảnh nào và biết nhờ AI dựng một PWA nhỏ.
PWA gồm ba mảnh ghép
- HTTPS
- Kết nối mã hoá. Trình duyệt chỉ cho cài và dùng nhiều tính năng PWA trên địa chỉ HTTPS (localhost trên máy bạn vẫn được dùng khi thử).
- Web App Manifest
- Một file JSON khai báo tên app, màu chủ đạo, biểu tượng, cách mở (toàn màn hình hay trong khung trình duyệt). Giống tấm thẻ căn cước của app.
- Service Worker
- Một đoạn JavaScript chạy nền, đứng giữa trang web và mạng. Nó quyết định mỗi yêu cầu lấy từ mạng hay lấy từ bộ nhớ đã lưu, nhờ vậy app mở được khi offline.
Thiếu Manifest thì trình duyệt không biết đặt tên và biểu tượng cho app. Thiếu Service Worker thì app vẫn cài được nhưng hết mạng là trắng trang.
So với web thường và app native
| Web thường | PWA | App native | |
|---|---|---|---|
| Cài lên màn hình chính | Không | Có | Có |
| Mở khi mất mạng | Thường không | Có, nếu cấu hình | Có |
| Cập nhật | Tức thì khi tải lại | Gần như tức thì | Qua cửa hàng hoặc gói cài |
| Quyền truy cập thiết bị | Hạn chế | Hạn chế | Đầy đủ |
| Phải qua kiểm duyệt cửa hàng | Không | Không | Thường có |
Đây là lý do PWA hay hợp với sổ ghi chú, danh sách việc, công cụ tính toán, app cho khách quen. Chúng cần nhẹ, cần dùng ngay, không cần camera hay cảm biến phức tạp.
Ví dụ: sổ ghi nợ cho tiệm tạp hoá
Cô chủ tiệm cần ghi ai nợ bao nhiêu, đôi khi sóng yếu trong hẻm. Một PWA lưu dữ liệu ngay trên máy, mở được cả khi mất mạng, cài lên màn hình như app thường. Không cần đăng ký kho ứng dụng, không cần chờ duyệt.
Dựng với AI theo cách có kiểm soát
Công cụ thường gặp là Vite (công cụ build front-end) cùng plugin PWA để sinh Manifest và Service Worker. Bạn không cần tự viết tay hết, nhưng phải biết đọc để kiểm tra. Hãy yêu cầu AI làm từng lớp: chức năng trước, PWA sau. Gộp tất cả vào một lệnh thì khi lỗi bạn không biết lỗi nằm ở đâu.
Thử ngay
Mở Claude Code hoặc Cursor trong thư mục dự án trống và đưa yêu cầu sau. Khi xong, chạy lệnh build rồi xem thử bản build chứ không chỉ chế độ phát triển.
Tạo ứng dụng Vite + TypeScript tên "So no tiem tap hoa": nhập tên khách, số tiền, ngày; hiển thị danh sách và tổng nợ từng người.
Bước 1: chỉ làm chức năng, lưu bằng localStorage.
Giải thích cấu trúc thư mục sau khi làm.
Chưa thêm PWA ở bước này.Sau khi chức năng ổn, yêu cầu tiếp: “Thêm vite-plugin-pwa, tạo manifest với tên, màu, biểu tượng 192 và 512 px, bật cache cho file tĩnh. Chỉ cho tôi lệnh build và cách kiểm tra.”
Lưu ý
Đừng để AI “đoán” biểu tượng. Chuẩn bị sẵn ảnh vuông rõ nét và đặt đúng kích cỡ. Biểu tượng mờ khiến app trông kém tin cậy dù code đúng.
Ghi nhớ
- PWA = HTTPS + Manifest + Service Worker.
- PWA hợp sản phẩm nhẹ, cần dùng ngay, không cần quyền thiết bị sâu.
- Làm chức năng trước, thêm lớp PWA sau, để lỗi dễ khoanh vùng.
- Luôn thử trên bản build, không chỉ trên máy phát triển.