Technical SEO

Progressive Web App (PWA)

Ứng dụng web tuân thủ tiêu chuẩn kỹ thuật (service worker, manifest.json, HTTPS) để cung cấp trải nghiệm giống ứng dụng native.

3 lượt xem Cập nhật: 28/05/2026

Progressive Web App (PWA) là gì?

Progressive Web App (PWA) là ứng dụng web được xây dựng theo tiêu chuẩn kỹ thuật hiện đại, cho phép hoạt động như một ứng dụng di động thật — nhưng chạy trực tiếp trên trình duyệt. PWA không cần tải qua kho ứng dụng (App Store hay CH Play), mà người dùng truy cập qua URL. Để đạt trạng thái PWA, trang web phải đáp ứng ba điều kiện bắt buộc: chạy trên giao thức HTTPS, có tệp manifest.json hợp lệ và tích hợp Service Worker để quản lý cache, tải offline và đẩy thông báo.

Tại sao quan trọng trong SEO?

PWA không trực tiếp là yếu tố xếp hạng của Google, nhưng ảnh hưởng mạnh đến các tín hiệu xếp hạng gián tiếp — đặc biệt là trải nghiệm người dùng (UX) và hiệu năng. Các nghiên cứu từ Google và HTTP Archive cho thấy trang PWA thường có chỉ số Core Web Vitals cao hơn: thời gian tải đầu tiên (FCP) giảm trung bình 30–50%, tỷ lệ thoát giảm 15–25%, và thời gian tương tác tăng rõ rệt. Ngoài ra, PWA hỗ trợ indexing sâu hơn nhờ khả năng hoạt động offline và prefetch tài nguyên — giúp bot Google thu thập dữ liệu ổn định hơn trên mạng yếu hoặc thiết bị cũ.

Quan trọng hơn: PWA giúp giữ chân người dùng. Khi người dùng cài PWA vào màn hình chính, họ có thể quay lại bằng một lần chạm — thay vì nhập lại URL hoặc tìm trong lịch sử. Điều này làm tăng tần suất truy cập, thời gian ở lại và tỷ lệ chuyển đổi — tất cả đều là tín hiệu hành vi tích cực mà Google dùng để đánh giá chất lượng trang.

Cách hoạt động

PWA hoạt động dựa trên ba thành phần nền tảng:

Service Worker: Một script chạy nền, độc lập với trang web. Nó chặn và điều khiển yêu cầu mạng (fetch), lưu cache thông minh, hỗ trợ offline và gửi thông báo đẩy.
Web App Manifest: Tệp JSON (manifest.json) chứa thông tin hiển thị như tên ứng dụng, biểu tượng, màu chủ đạo, hướng màn hình và cách mở (standalone, fullscreen…). Đây là cơ sở để trình duyệt đề xuất 'Cài đặt' lên màn hình chính.
HTTPS bắt buộc: Đảm bảo tính toàn vẹn và bảo mật dữ liệu. Service Worker chỉ được đăng ký trên môi trường an toàn — tức là localhost hoặc domain có chứng chỉ SSL hợp lệ.

Service Worker không tự động kích hoạt mọi thứ — nó cần được đăng ký đúng cách trong JavaScript phía client, sau đó được cài đặt và kích hoạt qua chu kỳ life-cycle riêng (install → waiting → active).

Hướng dẫn thực hiện

Để triển khai PWA đúng chuẩn, thực hiện tuần tự các bước sau:

Bật HTTPS: Kiểm tra chứng chỉ SSL đang hoạt động (không hết hạn, không cảnh báo trình duyệt). Dùng công cụ như SSL Labs Test để xác minh.
Tạo manifest.json: Đặt tệp tại gốc miền (ví dụ: https://example.com/manifest.json). Nội dung tối thiểu gồm name, short_name, icons (ít nhất 192x192 và 512x512 px, định dạng PNG), start_url, display: 'standalone'.

Viết và đăng ký Service Worker: Tạo file sw.js ở gốc, rồi đăng ký trong HTML bằng đoạn mã:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered'));
  });
}

Xử lý cache chiến lược: Trong sw.js, dùng caches.open() và cache.addAll() để lưu tài nguyên tĩnh (HTML, CSS, JS, hình nền). Với nội dung động, áp dụng chiến lược Stale-While-Revalidate hoặc Network-First tùy mục đích.
Kiểm tra bằng Lighthouse: Chạy kiểm thử trên Chrome DevTools → tab Lighthouse → chọn ‘Progressive Web App’. Đạt 90+ điểm mới đảm bảo đủ điều kiện cơ bản.

Lỗi thường gặp

Dưới đây là những sự cố phổ biến khi triển khai PWA và cách khắc phục:

Lỗi	Nguồn gốc	Cách sửa
Service Worker không đăng ký	File `sw.js` trả về 404 hoặc không nằm ở gốc miền	Đảm bảo `sw.js` có thể truy cập trực tiếp qua URL và trả về status 200. Kiểm tra đường dẫn trong `navigator.serviceWorker.register()`.
Manifest không hiển thị nút ‘Cài đặt’	Thiếu thẻ `<link rel='manifest'>` trong <head>, hoặc `manifest.json` có lỗi cú pháp / thiếu icon 192px	Thêm thẻ link đúng vị trí; kiểm tra manifest bằng Manifest Validator.
Offline không hoạt động	Service Worker chưa cache HTML chính hoặc cache bị ghi đè bởi chiến lược sai	Dùng `cache-first` cho tài nguyên tĩnh; đảm bảo `self.__WB_MANIFEST` (nếu dùng Workbox) bao gồm `index.html`.
Thông báo đẩy không hiện	Chưa xin quyền (`Notification.requestPermission()`), hoặc chưa có `push` event handler trong SW	Kích hoạt quyền trước khi gửi; kiểm tra `self.addEventListener('push', ...)` trong `sw.js`.

Ví dụ thực tế

Nhiều thương hiệu lớn đã áp dụng PWA và ghi nhận cải thiện rõ rệt:

Twitter Lite: Giảm thời gian tải 60%, tăng tỷ lệ tương tác 75% trên thiết bị低端 (Android 4.x), và tăng 20% lượt đăng ký.
Flipkart (Ấn Độ): Tỷ lệ chuyển đổi trên mobile tăng 70%, thời gian tải trung bình giảm còn 2,5s dù mạng 2G.
Trang tin VnExpress (phiên bản PWA thử nghiệm 2022): Tỷ lệ thoát giảm 22%, thời gian đọc bài tăng 34% trên thiết bị Android.

Lưu ý: Hiệu quả phụ thuộc vào cách triển khai — không phải cứ bật PWA là tự động tăng doanh thu. Cần đo lường trước – sau bằng Google Analytics 4 và Search Console.

Câu hỏi thường gặp

PWA có ảnh hưởng đến ranking Google không?

Không phải yếu tố xếp hạng trực tiếp, nhưng PWA cải thiện các tín hiệu gián tiếp như tốc độ, khả năng truy cập offline, tỷ lệ thoát và thời gian ở lại — tất cả đều nằm trong hệ thống đánh giá trải nghiệm người dùng của Google. Vì vậy, PWA góp phần nâng cao vị trí tổng thể trên kết quả tìm kiếm.

Có cần PWA cho website desktop không?

Có thể, nhưng ưu tiên thấp hơn. Trên desktop, lợi ích chính của PWA là cài đặt nhanh, chạy offline và thông báo đẩy — tuy nhiên người dùng ít dùng tính năng này so với mobile. Nếu đối tượng chủ lực là người dùng di động (chiếm >65% lưu lượng), nên tập trung triển khai PWA trước.

Website WordPress có triển khai PWA được không?

Có. Nhiều plugin như Super PWA, WP PWA hoặc Instantify hỗ trợ tạo manifest và đăng ký Service Worker. Tuy nhiên, plugin không tự động xử lý cache thông minh hay tối ưu offline — cần kiểm tra thủ công từng chức năng. Với site cao cấp, nên dùng giải pháp tùy chỉnh hoặc framework như Next.js + Workbox.