Cách dùng Tạo PWA Manifest & Service Worker
- Nhập tên ứng dụng, tên ngắn hiển thị trên màn hình chính (tối đa 12 ký tự), mô tả và start URL.
- Chọn chế độ hiển thị (standalone để có cửa sổ giống ứng dụng) cùng màu chủ đề và màu nền dùng cho thanh tiêu đề và màn hình chờ.
- Đặt vị trí thư mục icon (192 và 512 px, kèm một icon maskable), giữ service worker offline được bật và chọn chiến lược bộ nhớ đệm phù hợp với site của bạn.
- Tải file ZIP, đặt các file vào thư mục gốc của site, thêm các thẻ
<head>rồi kiểm tra trong Chrome DevTools → Application → Manifest.
Điều gì khiến một site có thể cài đặt
- Được phục vụ qua HTTPS.
- Có web app manifest với
namehoặcshort_name,start_url, chế độdisplaykhácbrowser, và icon có kích thước tối thiểu 192 px và 512 px. - Có liên kết manifest trong
<head>của trang. Chrome không còn bắt buộc service worker để cài đặt, nhưng bạn cần nó để hoạt động offline.
Các chiến lược bộ nhớ đệm của service worker
| Chiến lược | Cách phản hồi | Phù hợp với |
|---|---|---|
| Network first (mạng trước) | Thử lấy từ mạng, khi offline thì dùng bộ nhớ đệm | Trang HTML (luôn dùng cho HTML ở đây) |
| Stale-while-revalidate | Trả về ngay từ bộ nhớ đệm, cập nhật bộ nhớ đệm ở nền | CSS, JS, ảnh thỉnh thoảng thay đổi |
| Cache first (bộ nhớ đệm trước) | Dùng bộ nhớ đệm và chỉ lấy từ mạng khi không có | File có mã hash hoặc phiên bản trong tên |
Tăng phiên bản bộ nhớ đệm khi deploy, để service worker mới xóa các cache cũ khi kích hoạt. Khi không có gì trong cache và mạng bị ngắt, khách truy cập sẽ thấy offline.html.
Cũng được tìm dưới tên: tạo pwa manifest, web app manifest generator, manifest.json generator, tạo service worker, pwa generator, làm website cài được, service worker offline, công cụ tạo webmanifest.
Các công cụ dùng kèm tốt với Tạo PWA Manifest & Service Worker
- Tạo Icon Ứng Dụng — Thả một ảnh vuông và nhận đủ mọi kích thước icon ứng dụng cần dùng — một thư mục AppIcon.appiconset sẵn sàng cho Xcode, các thư mục mipmap Android với adaptive icon, icon Play Store và icon web/PWA — gói gọn trong một tệp ZIP.
- Tạo Favicon — Tạo bộ favicon đầy đủ từ logo, một chữ cái hoặc một emoji: favicon.ico nhiều kích thước, Apple touch icon, icon Android/PWA, webclip cho Webflow, web manifest và các thẻ HTML để dán vào trang.
- Công cụ tạo Meta Tag — Điền một biểu mẫu và nhận ngay một <head> đầy đủ, hợp lệ: tiêu đề, mô tả, canonical, robots, Open Graph, thẻ X/Twitter, màu theme và icon.
- Trình tạo file Deep Link — Tạo hai file giúp liên kết từ website mở thẳng vào app của bạn: apple-app-site-association cho iOS Universal Links và assetlinks.json cho Android App Links.
Câu hỏi thường gặp
manifest.json hay manifest.webmanifest?
Cả hai đều dùng được. Phần mở rộng được khuyến nghị theo đặc tả là .webmanifest (phục vụ với application/manifest+json). .json cũng ổn miễn là trỏ đúng tới file.
Maskable icon là gì?
Là icon có thêm khoảng đệm (vùng an toàn ở giữa 80%) để Android có thể cắt thành hình tròn, squircle hoặc hình dạng khác mà không làm mất logo của bạn.
Vì sao PWA của tôi không hiện nút cài đặt?
Kiểm tra Chrome DevTools → Application → Manifest để tìm lỗi. Thường gặp nhất là thiếu icon 192 hoặc 512 px, start_url hoặc scope sai, display đặt là browser, hoặc trang không được phục vụ qua HTTPS.
Làm sao cập nhật PWA sau khi deploy?
Đổi phiên bản bộ nhớ đệm trong sw.js. Trình duyệt sẽ cài service worker mới, xóa cache cũ và tiếp quản (skipWaiting và clients.claim), nên người dùng nhận file mới ở lần truy cập tiếp theo.
Tôi có thể cài Tạo PWA Manifest & Service Worker như một ứng dụng web và dùng khi không có mạng không?
Có. Tạo PWA Manifest & Service Worker là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.