PWA là gì và hướng dẫn cấu hình Progressive Web App chuẩn

Progressive Web App (PWA) là thuật ngữ do Alex Russell và Frances Berriman đặt ra năm 2015 để gọi các ứng dụng web dùng tính năng trình duyệt hiện đại nhằm chạy mượt, đáng tin cậy và cài được vào thiết bị như một ứng dụng thực thụ.

PWA không phụ thuộc vào App Store hay Google Play. Bạn cập nhật bằng cách deploy lại website, và ứng dụng vẫn mở được khi không có mạng nhờ Service Worker.

Trái tim của PWA: vòng đời Service Worker

Service Worker là một đoạn JavaScript chạy trong luồng nền (background thread), tách khỏi luồng giao diện của trình duyệt. Nó đóng vai trò proxy mạng giữa ứng dụng và internet: bạn chặn các request HTTP và quyết định trả dữ liệu từ đâu.

Vòng đời của một Service Worker có 4 trạng thái chính:

• ◆Installing (đang cài đặt): chạy khi trình duyệt phát hiện file sw.js mới. Đây là lúc nên tạo cache đầu tiên và lưu các file tĩnh (HTML, CSS, JS) của app shell.
• ◆Waiting (đang chờ): worker mới đã cài xong nhưng chờ đến khi mọi tab đang dùng phiên bản cũ được đóng, trừ khi bạn gọi skipWaiting.
• ◆Activating (đang kích hoạt): chạy sau khi cài xong hoặc khi có tín hiệu skipWaiting. Thường dùng để xóa các cache cũ.
• ◆Active (đang hoạt động): điều khiển mọi trang nằm trong phạm vi (scope) của worker và xử lý các sự kiện fetch, push và sync.

Bốn chiến lược caching

Chiến lược cache quyết định tốc độ và độ tươi của dữ liệu. Bốn chiến lược phổ biến nhất:

Cache First: trả về từ cache nếu có, chỉ gọi mạng khi cache không có. Phù hợp với asset tĩnh như CSS, JS, ảnh, nhất là khi tên file có mã hash.

Stale-While-Revalidate: trả ngay bản trong cache, đồng thời tải bản mới từ mạng để cập nhật cache cho lần sau. Phù hợp với nội dung cho phép cũ đi một chút, như avatar hay danh sách bài viết.

Network First: ưu tiên dữ liệu mới từ mạng, mất kết nối mới dùng bản trong cache. Phù hợp với API dữ liệu động và tin tức.

Cache Only: chỉ đọc từ cache, không bao giờ gọi mạng. Phù hợp với tài nguyên đã được precache lúc cài đặt, như trang thông báo offline.

Cấu hình manifest.json và tích hợp hệ điều hành

File manifest.json cho hệ điều hành biết ứng dụng của bạn là gì. Ngoài các thuộc tính cơ bản như name, theme_color và display: "standalone", manifest còn khai báo hai tích hợp sâu hơn:

{
  "name": "AkiTao App",
  "short_name": "AkiTao",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "theme_color": "#070b14",
  "background_color": "#070b14",
  "share_target": {
    "action": "/share-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "files": [{ "name": "media", "accept": ["audio/mpeg", "audio/wav"] }]
    }
  },
  "file_handlers": [
    {
      "action": "/open",
      "accept": { "audio/mpeg": [".mp3"], "audio/wav": [".wav"] }
    }
  ]
}

iOS Safari: cài được, nhưng có điều kiện

Từ iOS và iPadOS 16.4, Safari đọc Web App Manifest cho web app trên Màn hình chính, với điều kiện display là standalone hoặc fullscreen. Trước bản 16.4, Safari không đọc manifest.

Kiểm tra và triển khai

Dùng tab Application của Chrome DevTools để kiểm tra PWA: xem trạng thái Service Worker, nội dung Cache Storage, giả lập mất mạng (Offline) và kiểm tra manifest.