App cài được mới chỉ là nửa đường. Bài này giúp bạn kiểm tra app thật sự chạy khi mất mạng, hiểu giới hạn của dữ liệu lưu trong trình duyệt, rồi đưa nó lên một địa chỉ công khai.

Kiểm tra ngoại tuyến cho đúng

Mở bản build, cài app, rồi tắt mạng và mở lại. Trong công cụ dành cho nhà phát triển của Chrome có mục Application, nơi bạn xem Manifest đã đọc đúng chưa, Service Worker đã kích hoạt chưa, và có thể bật chế độ Offline để thử nhanh. Hãy thử cả ba tình huống: mở lần đầu có mạng, mở lại khi mất mạng, và mở sau khi bạn đã cập nhật phiên bản mới.

Lỗi hay gặp

Người dùng mở app, thấy giao diện cũ mãi dù bạn đã sửa. Nguyên nhân: Service Worker đang giữ bản cũ. Hãy quy định rõ chiến lược cập nhật (báo “có bản mới, tải lại”) thay vì để người dùng tự đoán.

Dữ liệu nằm ở đâu

Dữ liệu lưu bằng localStorage hay IndexedDB nằm trong trình duyệt của từng máy. Điều đó tiện, nhưng có ba hệ quả bạn phải nói thật với người dùng.

Ưu điểm lưu cục bộ

  • Chạy ngay, không cần tài khoản
  • Không cần máy chủ, ít chi phí
  • Mở nhanh, dùng được offline

Hạn chế

  • Xoá dữ liệu trình duyệt là mất sạch
  • Điện thoại và laptop không tự thấy dữ liệu của nhau
  • Dung lượng có giới hạn, tuỳ trình duyệt

Có ba hướng xử lý, chọn theo mức quan trọng của dữ liệu. Với dữ liệu quan trọng như sổ nợ, đồng bộ lên đám mây (ví dụ Supabase) là hướng nên cân nhắc, kèm đăng nhập và quy tắc phân quyền. Với sản phẩm nhỏ, hãy thêm nút Xuất và Nhập file sao lưu để người dùng tự giữ một bản. Với dữ liệu chỉ để tạm, lưu cục bộ là đủ nhưng phải ghi rõ trên màn hình.

Ví dụ

Một giáo viên dạy thêm dùng PWA điểm danh. Cô thêm nút “Xuất file sao lưu” cuối mỗi tuần và gửi file vào email riêng. Khi đổi điện thoại, cô nhập file là xong, không phải dựng máy chủ nào.

Triển khai và kiểm tra chất lượng

GitHub Pages, Netlify, Vercel hoặc Cloudflare Pages đều cho bạn địa chỉ HTTPS, đủ cho PWA. Quy trình chung là đẩy mã lên GitHub, nối kho mã với nền tảng, mỗi lần đẩy thay đổi thì bản mới tự phát hành. Trên Android, Chrome gợi ý “Cài đặt ứng dụng”. Trên iPhone, bạn mở bằng Safari rồi chọn Chia sẻ, Thêm vào Màn hình chính; cách hiển thị có thể khác Android nên phải thử trên máy thật.

Cuối cùng, chạy Lighthouse (có sẵn trong công cụ nhà phát triển của Chrome) để xem điểm hiệu năng, khả năng truy cập và PWA. Đừng chạy theo điểm tuyệt đối. Hãy đọc từng gợi ý và sửa những điều ảnh hưởng người dùng thật, như chữ quá nhỏ hay nút bấm sát nhau.

BuildTạo bản production
Xem thửChạy bản build ở máy
Đẩy lên hostGitHub Pages, Netlify, Vercel, Cloudflare Pages
Thử trên máy thậtAndroid và iPhone, cả khi tắt mạng
Đo bằng LighthouseSửa các điểm ảnh hưởng người dùng

Thử ngay

Kiểm tra PWA của bạn theo danh sách này và ghi lại kết quả từng dòng.

1. Mở Chrome DevTools > Application > Manifest: tên, biểu tượng có hiện đúng?
2. Application > Service Workers: trạng thái activated?
3. Bật Offline rồi tải lại trang: app còn mở được?
4. Cài app, đóng hẳn, mở lại từ màn hình chính.
5. Chạy Lighthouse, đọc 3 gợi ý đầu và sửa 1 gợi ý.

Ghi nhớ

  • Phải thử ngoại tuyến thật: mở lần đầu, mở lại khi mất mạng, mở sau khi cập nhật.
  • Dữ liệu cục bộ mất khi xoá dữ liệu trình duyệt; dữ liệu quan trọng cần sao lưu hoặc đồng bộ.
  • Các host HTTPS có gói miễn phí đủ để chạy thử PWA.
  • iPhone và Android hiển thị khác nhau, nhớ thử trên cả hai.
Bài trướcBài sau