Ứng dụng web tiến bộ

Hướng dẫn

Các hướng dẫn PWA cung cấp phần giải thích khái niệm về các khía cạnh khác nhau của PWA. Chúng nhằm giúp bạn hiểu những gì có thể làm với PWA, và cung cấp đủ điểm dẫn để bạn biết cách thực hiện.

PWA là gì?

Giới thiệu về PWA, so sánh chúng với website truyền thống và ứng dụng dành riêng cho nền tảng, đồng thời nêu bật các tính năng chính.

Làm cho PWA có thể cài đặt

Một trong những đặc điểm định nghĩa của PWA là nó có thể được trình duyệt đề xuất cài đặt lên thiết bị. Sau khi cài đặt, PWA xuất hiện với người dùng như một ứng dụng của nền tảng, trở thành một tính năng lâu dài trên thiết bị mà họ có thể khởi chạy trực tiếp từ hệ điều hành như bất kỳ ứng dụng nào khác. Trong hướng dẫn này, chúng ta sẽ tìm hiểu "có thể cài đặt" nghĩa là gì, PWA cần cung cấp gì để có thể cài đặt, và cách bạn tùy biến trải nghiệm cài đặt.

Cài đặt và gỡ cài đặt ứng dụng web

Hướng dẫn này bao quát cách người dùng có thể cài đặt và gỡ cài đặt PWA trên thiết bị của họ.

Hoạt động ngoại tuyến và chạy nền

Trong hướng dẫn này, chúng ta sẽ giới thiệu một bộ công nghệ cho phép PWA mang lại trải nghiệm tốt ngay cả khi thiết bị có kết nối mạng chập chờn và thực hiện các tác vụ trong nền, kể cả khi ứng dụng chính không chạy.

Bộ nhớ đệm

Tổng quan về các API cho phép PWA lưu tài nguyên cục bộ trong bộ nhớ đệm, cùng một số chiến lược phổ biến mà PWA dùng để triển khai chức năng ngoại tuyến.

Thực hành tốt nhất cho PWA

PWA nên thích ứng với các trình duyệt và thiết bị khác nhau, có thể truy cập, hiệu năng tốt, và tích hợp tốt với hệ điều hành. Hướng dẫn này cung cấp một danh sách thực hành tốt nhất để giúp bạn bảo đảm PWA của mình tốt nhất có thể.

Cách thực hiện

Các bài hướng dẫn PWA cung cấp chỉ dẫn chi tiết về cách triển khai các tính năng PWA cụ thể.

Tạo ứng dụng độc lập

Mô tả cách chỉ định rằng một PWA nên được mở trong một cửa sổ riêng khi nó được khởi chạy, thay vì trong một tab trình duyệt.

Xác định biểu tượng ứng dụng của bạn

Mô tả cách định nghĩa bộ biểu tượng của riêng bạn để dùng khi PWA được cài đặt trên thiết bị.

Tùy biến màu ứng dụng của bạn

Mô tả cách đặt màu nền và màu giao diện cho PWA.

Hiển thị huy hiệu

Mô tả cách hiển thị huy hiệu trên biểu tượng của PWA, chẳng hạn để cho người dùng biết rằng họ đã nhận được tin nhắn mới.

Hiển thị các hành động ứng dụng phổ biến như phím tắt

Mô tả cách hiển thị các hành động phổ biến cho PWA có thể được khởi chạy từ menu phím tắt của ứng dụng trong hệ điều hành.

Chia sẻ dữ liệu giữa các ứng dụng

Mô tả cách PWA có thể chia sẻ dữ liệu với nhau bằng cơ chế chia sẻ ứng dụng của hệ điều hành.

Kích hoạt cài đặt từ PWA của bạn

Mô tả cách nhà phát triển có thể cung cấp giao diện riêng để mời người dùng cài đặt PWA của họ.

Liên kết tệp với PWA của bạn

Mô tả cách bạn có thể tạo liên kết giữa các loại tệp và PWA của mình, để khi người dùng nhấp vào tệp, PWA của bạn sẽ được khởi chạy để xử lý nó.

Hướng dẫn thực hành

Xây dựng một PWA từ đầu bằng các Hướng dẫn PWA này, chúng dẫn bạn đi qua các bước từ đầu đến cuối, giải thích cách các tính năng khác nhau của ứng dụng được triển khai trong quá trình đó.

Tạo PWA đầu tiên của bạn

Hướng dẫn cấp độ mới bắt đầu này dẫn qua việc tạo một PWA để theo dõi chu kỳ kinh nguyệt. Bài học bao gồm phần đi qua HTML, CSS, và JavaScript cần thiết để tạo một web app hoạt động đầy đủ, thiết lập môi trường kiểm thử, và giải thích đầy đủ hướng dẫn người học cách nâng cấp web app thành PWA; bao gồm phát triển và kiểm tra manifest, thêm service worker, và dùng service worker để xóa các cache cũ.

Tìm hiểu sâu về PWA

Hướng dẫn cấp độ trung cấp này dẫn qua việc tạo một PWA liệt kê thông tin về các trò chơi nộp cho hạng mục A-Frame trong cuộc thi js13kGames 2017. Hướng dẫn này bao gồm toàn bộ kiến thức cơ bản để tạo PWA, với các tính năng bổ sung, bao gồm thông báo, push, và hiệu năng ứng dụng.

Tham khảo

Tham khảo PWA của chúng tôi liệt kê tất cả các tính năng trên MDN mà bạn sẽ cần để xây dựng PWA.

Manifest ứng dụng web

Các thành phần manifest ứng dụng web

Nhà phát triển có thể dùng các thành phần của web app manifest để mô tả PWA, tùy biến diện mạo của nó, và tích hợp sâu hơn vào hệ điều hành.

API Service Worker

Giao tiếp với ứng dụng

Các API sau có thể được service worker dùng để giao tiếp với PWA client mà nó phục vụ:

Client.postMessage()

Cho phép service worker gửi một thông điệp tới PWA client của nó.

Broadcast Channel API

Cho phép service worker và PWA client của nó thiết lập một kênh giao tiếp hai chiều cơ bản.

Hoạt động ngoại tuyến

Các API sau có thể được service worker dùng để làm cho ứng dụng hoạt động ngoại tuyến:

Cache

Cơ chế lưu trữ lâu dài cho các cặp HTTP request/response dùng để lưu các tài nguyên có thể tái sử dụng khi ứng dụng ngoại tuyến.

Clients

Một giao diện dùng để truy cập các tài liệu được service worker kiểm soát.

FetchEvent

Một sự kiện được phát trong service worker với mọi yêu cầu HTTP do PWA client thực hiện. Sự kiện này có thể được dùng để gửi yêu cầu tới máy chủ như bình thường và lưu phản hồi cho lần sau, hoặc chặn yêu cầu và phản hồi ngay bằng một phản hồi đã được lưu trong bộ nhớ đệm trước đó.

Hoạt động nền

Các API sau có thể được service worker dùng để thực hiện tác vụ trong nền, kể cả khi ứng dụng không chạy:

Background Synchronization API

Cách trì hoãn tác vụ để chạy trong service worker khi có kết nối mạng ổn định.

Web Periodic Background Synchronization API

Cách đăng ký tác vụ để chạy trong service worker theo các khoảng thời gian định kỳ khi có kết nối mạng.

Background Fetch API

Phương thức để service worker quản lý các lượt tải xuống có thể mất nhiều thời gian, chẳng hạn tệp video hoặc âm thanh.

Các Web API khác

IndexedDB

API lưu trữ phía client cho lượng lớn dữ liệu có cấu trúc, bao gồm cả tệp.

Badging API

Cách đặt huy hiệu trên biểu tượng ứng dụng, cung cấp một dạng thông báo ít gây xao nhãng.

Notifications API

Cách gửi thông báo được hiển thị ở cấp hệ điều hành.

Web Share API

Cơ chế để chia sẻ văn bản, liên kết, tệp và nội dung khác sang các ứng dụng khác mà người dùng chọn trên thiết bị của họ.

Window Controls Overlay API

API dành cho PWA được cài đặt trên hệ điều hành desktop, cho phép ẩn thanh tiêu đề cửa sổ mặc định, để ứng dụng có thể hiển thị trên toàn bộ vùng cửa sổ.

Xem thêm

• Progressive web apps trên web.dev
• Learn PWA trên web.dev
• Progressive web apps trên learn.microsoft.com (2023)