Login

Progressive Web App (PWA) là gì? Web chạy như ứng dụng

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Có những website bạn có thể thêm vào màn hình chính, mở như ứng dụng, thậm chí dùng khi mất mạng. Đó là PWA (Progressive Web App). Với lập trình viên web, đây là cách mang trải nghiệm gần ứng dụng di động mà không cần học thêm ngôn ngữ mới hay qua cửa hàng ứng dụng.

PWA là gì?

PWA là website được xây dựng với một số công nghệ cho phép nó cài đặt được, chạy toàn màn hình, tải nhanh và hoạt động tốt khi mạng yếu. Nó vẫn là web, chỉ được "nâng cấp dần" (progressive) trên những trình duyệt hỗ trợ, còn trình duyệt cũ vẫn dùng được như trang bình thường.

Ba trụ cột chính

  1. HTTPS: bắt buộc để đảm bảo an toàn và sử dụng được service worker.
  2. Web App Manifest: file JSON mô tả tên ứng dụng, biểu tượng, màu sắc, cách hiển thị.
  3. Service Worker: đoạn JavaScript chạy nền, đứng giữa trang và mạng, cho phép lưu đệm và xử lý ngoại tuyến.

Web App Manifest

Ví dụ file manifest.webmanifest tối giản:

{
  "name": "Ghi chú nhanh",
  "short_name": "Ghi chú",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Liên kết nó trong HTML bằng <link rel="manifest" href="/manifest.webmanifest">.

Service Worker cơ bản

Đăng ký service worker trong trang:

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

Và file sw.js lưu đệm vài tài nguyên cốt lõi, ưu tiên bản đã lưu khi mất mạng:

const CACHE = "v1";
const FILES = ["/", "/style.css", "/app.js"];

self.addEventListener("install", (e) => {
  e.waitUntil(caches.open(CACHE).then((c) => c.addAll(FILES)));
});

self.addEventListener("fetch", (e) => {
  e.respondWith(
    caches.match(e.request).then((cached) => cached || fetch(e.request))
  );
});

Chiến lược "cache trước, mạng sau" này phù hợp với tài nguyên tĩnh. Với dữ liệu thay đổi thường xuyên, bạn cần chiến lược khác như "mạng trước, cache dự phòng".

Lợi ích

  • Một mã nguồn chạy trên mọi nền tảng có trình duyệt hiện đại.
  • Không cần qua kiểm duyệt cửa hàng ứng dụng để cập nhật.
  • Tải nhanh hơn nhờ lưu đệm, dùng được khi mạng chập chờn.
  • Dung lượng cài đặt nhỏ so với ứng dụng gốc.

Hạn chế

  • Quyền truy cập phần cứng và hệ thống hạn chế hơn ứng dụng gốc, khác nhau giữa các nền tảng.
  • Mức hỗ trợ tính năng như thông báo đẩy khác nhau theo trình duyệt và hệ điều hành, nên cần kiểm tra bảng tương thích hiện hành.
  • Khả năng được tìm thấy qua cửa hàng ứng dụng kém hơn.
  • Quản lý bộ nhớ đệm không cẩn thận dễ khiến người dùng thấy nội dung cũ.

Kiểm tra chất lượng

Công cụ Lighthouse trong Chrome DevTools có mục kiểm tra PWA và hiệu năng, giúp bạn biết còn thiếu gì. Hãy thử trên điện thoại thật và bật chế độ máy bay để xem trải nghiệm ngoại tuyến.

Danh sách kiểm tra trước khi phát hành PWA

  • Trang chạy hoàn toàn trên HTTPS.
  • Manifest có đủ tên, biểu tượng nhiều kích thước và start_url đúng.
  • Service worker lưu đệm các tài nguyên cốt lõi và có chiến lược cập nhật phiên bản.
  • Có trang dự phòng hiển thị thân thiện khi người dùng ngoại tuyến.
  • Giao diện thích ứng tốt trên màn hình điện thoại và có thể chạm dễ dàng.
  • Đã chạy Lighthouse và thử trên thiết bị thật.

Đi hết danh sách này, trang của bạn đã đạt phần lớn trải nghiệm mà người dùng kỳ vọng ở một ứng dụng cài đặt được.

Kết luận

PWA là bước nâng cấp hợp lý cho nhiều website: ít công sức, trải nghiệm tốt hơn, tiếp cận nhiều nền tảng. Bạn có thể bắt đầu bằng cách thêm manifest, sau đó từng bước thêm service worker khi đã hiểu rõ chiến lược lưu đệm.

Muốn nắm HTML, CSS, JavaScript chắc tay trước khi làm PWA, mời bạn xem khóa học web tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment