AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

Phát triển PWA (Progressive Web App)

Hướng dẫn trọn bộ xây dựng PWA: service worker, chiến lược cache, hỗ trợ offline và Workbox, kèm mã mẫu và checklist.

Lập trìnhTrung cấp★ 473⑂ 52Điểm AI 9/10Cập nhật lần cuối: 9 thg 11, 2026

Làm được gì

  • Web App Manifest: ví dụ đầy đủ từ trường bắt buộc đến screenshots, shortcuts, share_target, file_handlers kèm checklist.
  • Mẫu service worker: vòng đời install → activate → fetch, dọn cache cũ, mã đăng ký dùng ngay được.
  • Chọn chiến lược cache: bảng ánh xạ Cache First / Network First / Stale While Revalidate / Network Only / Cache Only theo từng loại tài nguyên, kèm code.
  • Workbox & công cụ build: cấu hình vite-plugin-pwa, next-pwa, template CRA và cách tự viết service worker bằng Workbox.
  • Tính năng giống app gốc: prompt cài đặt, phát hiện chế độ standalone, push notification, background sync.
  • Kiểm thử: lệnh Lighthouse CLI, checklist thủ công về khả năng cài đặt, offline, hiệu năng (FCP/LCP/CLS) và bảng lỗi thường gặp ↔ cách sửa.

Phù hợp với ai

  • Lập trình viên front-end muốn biến web hiện có thành ứng dụng cài đặt được
  • Nhóm làm sản phẩm phải chạy ổn ở nơi mạng chập chờn (tàu điện, nhà xưởng, vùng sóng yếu)
  • Người đang gặp lỗi "đã deploy nhưng người dùng vẫn thấy bản cũ" do cache service worker

Ví dụ sử dụng

  1. Biến app Vite + React thành PWA: thêm plugin VitePWA với runtimeCaching (API dùng NetworkFirst, ảnh dùng CacheFirst) để có hỗ trợ offline.
  2. Gửi form khi offline: dùng BackgroundSyncPlugin của Workbox xếp hàng POST /api/submit và tự gửi lại khi có mạng.
  3. Tối ưu luồng cài đặt: bắt sự kiện beforeinstallprompt để hiện nút cài đặt riêng, và kiểm tra display-mode: standalone để đổi giao diện khi đã cài.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/pending/alinaqi/pwa-development/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên AI Skill Mart.
Copy thư mục pending/alinaqi/pwa-development từ repo GitHub aiskillstore/marketplace vào ~/.claude/skills/pwa-development/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore && mkdir -p ~/.claude/skills && cp -r /tmp/aiskillstore/pending/alinaqi/pwa-development ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở Terminal.
  2. Tải kho về: git clone https://github.com/aiskillstore/marketplace.git /tmp/aiskillstore
  3. Tạo thư mục skills: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r /tmp/aiskillstore/pending/alinaqi/pwa-development ~/.claude/skills/
  5. Kiểm tra bằng ls ~/.claude/skills/pwa-development xem có SKILL.md không.
  6. Khởi động lại Claude Code.
  7. Skill này tự kích hoạt (user-invocable: false): hãy mở/sửa sw.js, service-worker.js, manifest.json, workbox-config.* hoặc yêu cầu "thêm hỗ trợ offline".
  8. (Tuỳ chọn) Nếu dùng ví dụ Workbox, cài thêm trong dự án: npm install vite-plugin-pwa -D.
Xem mã nguồn trên GitHub ↗