Ứng dụng web tiến bộ (PWA) mạnh mẽ

Mặc dù một số chức năng của PWA thường được biết đến, chẳng hạn như Notifications API cho phép một ứng dụng web nhận và xuất bản thông báo của nền tảng, nhưng có một số tính năng mới và sắp ra mắt sẽ xuất hiện trên web để tăng cường sức mạnh cho các ứng dụng của bạn. Dự án Web Capabilities của Chromium (còn gọi là Dự án Fugu 🐡) là một nỗ lực nhằm hỗ trợ các tiêu chuẩn web mới, mạnh mẽ, đồng thời duy trì những yếu tố khiến web trở nên độc đáo: đó là tính bảo mật lấy người dùng làm trung tâm, độ ma sát thấp và khả năng tương thích trên nhiều nền tảng.

Thu hẹp khoảng cách về ứng dụng

Hầu hết các chức năng này đều được xây dựng dựa trên việc thu hẹp khoảng cách giữa các ứng dụng truyền thống dành cho máy tính hoặc thiết bị di động và ứng dụng web, trong đó các chức năng chính đầu tiên được cung cấp cho phép ứng dụng web truy cập vào trình chọn danh bạ và chức năng chia sẻ của nền tảng, đồng thời cho phép các PWA đã cài đặt đăng ký làm mục tiêu chia sẻ của nền tảng và hiển thị huy hiệu biểu tượng, cũng như một số chức năng khác.

Mỗi chức năng đều trải qua một quy trình tiêu chuẩn hoá rộng rãi để thu thập ý kiến phản hồi của cộng đồng nhằm định hình API và đảm bảo thiết kế cuối cùng có tính bảo mật, quyền riêng tư và đáng tin cậy. Các chức năng mới được theo dõi trong một trình theo dõi công khai và có thể được chia thành một trong năm danh mục:

ĐÃ ĐƯỢC GỬI

Có thể sử dụng trong phiên bản Chrome ổn định mới nhất. Có thể sử dụng một cách đáng tin cậy, miễn là việc sử dụng được phát hiện đúng cách.

TRONG GIAI ĐOẠN DÙNG THỬ NGUỒN GỐC

Có sẵn dưới dạng thử nghiệm theo nguyên gốc (OT) của Chrome, cho phép nhóm Chrome xác thực các tính năng và API thử nghiệm trong quá trình sử dụng thực tế, đồng thời cho phép bạn cung cấp ý kiến phản hồi về khả năng sử dụng và hiệu quả của API. OT là lựa chọn không bắt buộc và cho phép bạn kiểm thử beta chức năng này với người dùng mà không yêu cầu họ bật bất kỳ cờ đặc biệt nào trong trình duyệt. Các API có thể thay đổi sau một OT và OT chắc chắn sẽ không có sẵn trong một khoảng thời gian trước khi ra mắt, vì vậy, bạn không nên coi OT là một cơ chế ra mắt sớm cho các API mới.

TRONG CHƯƠNG TRÌNH DÙNG THỬ DÀNH CHO NHÀ PHÁT TRIỂN

Có sẵn sau một cờ trong Chrome. Các API này đang trong giai đoạn thử nghiệm và vẫn đang được phát triển. Các API này chưa sẵn sàng để phát hành công khai, có nhiều khả năng vẫn còn lỗi và sẽ thay đổi. Mặc dù có thể dùng thời gian này để tự mình dùng thử các tính năng thử nghiệm, nhưng nhà phát triển không nên hướng dẫn người dùng bật cờ để sử dụng các tính năng của họ.

ĐÃ KHỞI HÀNH VÀO

Quá trình phát triển đã bắt đầu, nhưng hiện không có API nào có thể sử dụng được.

ĐANG CÂN NHẮC

Những API mà người dùng đã thể hiện sự quan tâm nhưng chưa bắt đầu triển khai. Nếu một API chưa được bắt đầu, vui lòng đánh dấu sao hoặc thêm các trường hợp sử dụng của bạn vào vấn đề của API đó để giúp nhóm Chromium ưu tiên API này.

Cải thiện PWA

Khi tạo PWA, hãy cân nhắc triển khai các API và phương pháp hay nhất sau đây để cải thiện đáng kể cảm giác khi dùng ứng dụng web của bạn. Dựa trên trường hợp sử dụng chung, ứng dụng của bạn có thể hưởng lợi từ một hoặc nhiều API để cải thiện trải nghiệm tổng thể của người dùng. Các API được đánh dấu bằng 🔮 đang trong giai đoạn dùng thử nguồn gốc, các API được đánh dấu bằng 🚩 đang trong giai đoạn dùng thử của nhà phát triển, các API được đánh dấu bằng 📱 hiện ổn định trên thiết bị di động và đã bắt đầu triển khai trên máy tính, còn mọi API khác được đề cập đều ổn định (mặc dù có thể không có trên tất cả các nền tảng). Chỉ những API có trong phiên bản ổn định, beta (được đánh dấu bằng β) hoặc canary (được đánh dấu bằng α) hiện tại của Chrome mới được đưa vào; danh sách này sẽ được cập nhật thường xuyên để phản ánh các API đang được phát hành.

Cài đặt ứng dụng

Nếu bạn muốn ứng dụng web của mình xuất hiện cùng với các ứng dụng đã cài đặt khác (chẳng hạn như trong thanh tác vụ, trình chạy, màn hình và trình chuyển đổi ứng dụng), hãy cân nhắc triển khai các API sau để PWA của bạn có thể cài đặt. Bạn có thể chọn tham gia lớp học lập trình này.

  • Tệp kê khai ứng dụng web – Cung cấp thông tin về ứng dụng web của bạn cho trình duyệt và hệ điều hành, chẳng hạn như tên, biểu trưng, URL để khởi động ứng dụng và cách hiển thị ứng dụng web.
  • Service Worker và Cache Storage API – Cho phép ứng dụng web của bạn tạo một máy chủ proxy và kiểm soát cách xử lý bộ nhớ đệm của trình duyệt. Một trình chạy dịch vụ phản ứng với sự kiện fetch của trình duyệt và có thể phản hồi yêu cầu tìm nạp cho URL bắt đầu được chỉ định trong tệp kê khai ứng dụng web bằng nội dung khi không có mạng là một yêu cầu để có thể cài đặt.
  • Chạy khi đăng nhập 🚩β – Cho phép bạn định cấu hình PWA để tự động khởi chạy khi người dùng đăng nhập.
  • Lối tắt đến biểu tượng ứng dụng – Cung cấp lối tắt đến các URL cụ thể bằng ứng dụng web của bạn (ví dụ: bắt đầu trò chuyện, tải ảnh lên, v.v.) từ trình đơn theo bối cảnh của biểu tượng ứng dụng đã cài đặt (tức là nhấn và giữ trên thiết bị di động, nhấp chuột phải trên máy tính) trên các nền tảng được hỗ trợ.
  • getInstalledRelatedApps – Cho phép ứng dụng web của bạn kiểm tra xem PWA, ứng dụng Android hoặc ứng dụng Windows (UWP) đã được cài đặt hay chưa.

Thích ứng và dễ tiếp cận

Nếu muốn người dùng có thể sử dụng ứng dụng web của bạn trên nhiều thiết bị và có nhiều nhu cầu về thể chất và/hoặc tinh thần, bạn nên cân nhắc triển khai những điều sau:

  • Thiết kế thích ứng – Đảm bảo ứng dụng web của bạn mang lại trải nghiệm hữu ích (hoặc ít nhất là không bị lỗi) cho các kích thước màn hình từ nhỏ đến lớn để người dùng trên nhiều thiết bị và vị trí cửa sổ có thể sử dụng ứng dụng của bạn.
  • Nguyên tắc WCAG 2.0 – Đảm bảo rằng ứng dụng web của bạn có thể sử dụng được đối với những người có nhiều khả năng về thể chất và tinh thần, chứ không chỉ những người có thần kinh bình thường và có thể chất bình thường. Ngoài ra, hãy xem Những điều nên và không nên làm khi thiết kế để hỗ trợ tiếp cận của Chính phủ Vương quốc Anh.

Kiếm tiền và phân phối

  • Web Payments – Giao diện linh hoạt, tiêu chuẩn cho các khoản thanh toán trực tuyến, được thiết kế để hoạt động trên mọi trình duyệt hoặc thiết bị và với mọi nhà cung cấp dịch vụ thanh toán hoặc phương thức thanh toán.
  • Digital Goods API 🔮 – Giao diện linh hoạt, tiêu chuẩn để truy vấn và quản lý giao dịch mua hàng trong ứng dụng từ các ứng dụng web, bao gồm cả việc hỗ trợ các loại giao dịch mua phổ biến như giao dịch mua một lần, giao dịch mua lặp lại (chẳng hạn như đá quý/tiền tệ trong trò chơi) và gói thuê bao. Hoạt động cùng với Web Payments.
  • Hoạt động trên web đáng tin cậy – Tạo một ứng dụng Android cho PWA để ứng dụng đó có thể được liệt kê để tải xuống trong các cửa hàng tương thích, chẳng hạn như Google Play.

Quyền truy cập vào bảng nhớ tạm

  • Bảng nhớ tạm không đồng bộ – Đọc và ghi văn bản cũng như hình ảnh vào bảng nhớ tạm của người dùng, đồng thời theo dõi các sự kiện sao chép và dán của người dùng.

Thông báo

Nếu ứng dụng web của bạn cần thông báo cho người dùng (ví dụ: ứng dụng trò chuyện hoặc ứng dụng đang xử lý mã hoá ở chế độ nền), bạn có thể cân nhắc triển khai các API sau:

  • Thông báo đẩy trên web – Sau khi người dùng chọn nhận, cho phép ứng dụng web của bạn gửi thông báo đẩy cho họ.
  • API Gán huy hiệu – Cho phép ứng dụng web đã cài đặt của bạn đặt một huy hiệu trên toàn ứng dụng cho biểu tượng ứng dụng, có thể kèm theo một con số.
  • Điều kiện kích hoạt thông báo 🔮 – Gửi thông báo cho người dùng khi một điều kiện kích hoạt được đáp ứng, chẳng hạn như dựa trên thời gian hoặc vị trí (ví dụ: thông báo về sự kiện trên lịch)

Chia sẻ ý định và xử lý giao thức

  • Đăng ký giao thức URL 🚩α – Cho phép các ứng dụng web tự đăng ký làm trình xử lý của các giao thức/lược đồ URL tuỳ chỉnh bằng cách sử dụng tệp kê khai cài đặt của chúng.
  • Web Share – Sử dụng giao diện người dùng chia sẻ hệ thống tích hợp trên các thiết bị được hỗ trợ để chia sẻ URL, văn bản và tệp với các ứng dụng đã cài đặt khác trên thiết bị của họ. Bạn không cần cài đặt ứng dụng.
  • Web Share Target – Cho phép PWA đã cài đặt xuất hiện trong giao diện người dùng chia sẻ hệ thống tích hợp trên các thiết bị được hỗ trợ để người dùng có thể chia sẻ văn bản và tệp cho ứng dụng của bạn từ các ứng dụng khác.

Mở và lưu tệp

  • File Handling API 🚩 – Cho phép ứng dụng web đã cài đặt đăng ký với hệ điều hành khả năng xử lý (đọc/truyền phát trực tuyến/chỉnh sửa) các tệp có loại MIME và/hoặc đuôi tệp nhất định, chẳng hạn như cho phép các tệp đó xuất hiện trong danh sách "Mở bằng ứng dụng..." của trình đơn theo bối cảnh.
  • File System Access API – Quyền truy cập mạnh mẽ vào hệ thống tệp của người dùng theo từng phiên, cho phép thực hiện các hoạt động tương tác sau đây (nếu ứng dụng của bạn cần)
    • Đọc tệp từ hệ thống tệp cục bộ – Hiển thị một bộ chọn tệp và cho phép người dùng chọn một hoặc nhiều tệp (không bắt buộc) để mở, bao gồm cả việc giới hạn các loại tệp được phép theo loại MIME và phần mở rộng.
    • Lưu các thay đổi vào tệp đang mở – Lưu trực tiếp các thay đổi vào một tệp được mở bằng FSA mà không nhắc người dùng chọn vị trí lưu tệp hoặc tải bản sao xuống.
    • Tạo một tệp mới trên hệ thống tệp cục bộ – Cho phép người dùng tạo một tệp mới (không bắt buộc) có đuôi tệp mặc định trên hệ thống tệp cục bộ của họ. Sau đó, ứng dụng của bạn có quyền truy cập để lưu vào tệp đó.
    • Các tệp đã mở gần đây – Các trình xử lý tệp được tạo bằng FSA có thể được lưu trữ trong IndexedDB, cho phép bạn hiện danh sách các tệp đã dùng gần đây giữa các phiên người dùng (mặc dù quyền chỉnh sửa vẫn không duy trì giữa các phiên)
    • Đọc, ghi và thao tác với một thư mục – Cho phép người dùng chọn một thư mục trên hệ thống tệp cục bộ của họ mà ứng dụng của bạn có thể đọc nội dung, tạo, đọc và xoá tệp cũng như thư mục con trong đó, đồng thời xác định đường dẫn tệp tương đối.
  • Luồng nén – Nén hoặc giải nén bằng thuật toán nén gzip và deflate.

Quản lý cửa sổ

  • API chế độ toàn màn hình – Cho phép người dùng chuyển một phần tử trong ứng dụng web của bạn (ví dụ: video) sang chế độ toàn màn hình
  • Cross-Screen Window Placement API 🔮 – Cho phép ứng dụng web của bạn nhận thông tin về các màn hình được kết nối và định vị các cửa sổ tương ứng với những màn hình đó, cho phép ứng dụng web có nhiều cửa sổ và nhiều màn hình.
  • Chế độ hiển thị ứng dụng theo thẻ 🚩 – Cho phép ứng dụng web đã cài đặt của bạn hiển thị trong một hoặc nhiều thẻ, chứ không chỉ trong một cửa sổ.

Tích hợp sâu hơn với hệ điều hành

  • Local Fonts API 🔮 – Cho phép ứng dụng web của bạn liệt kê các phông chữ được cài đặt cục bộ và yêu cầu quyền truy cập vào vùng chứa SFNT cấp thấp (dựa trên byte) bao gồm toàn bộ dữ liệu phông chữ, cho phép ứng dụng của bạn kết xuất tuỳ chỉnh các phông chữ được cài đặt cục bộ.
  • Wake Lock – Cho phép ứng dụng web của bạn ngăn màn hình chuyển sang chế độ ngủ, nhờ đó ứng dụng web có thể thực hiện các tác vụ dài hạn mà không sợ bị gián đoạn (tức là chuyển mã tệp hoặc giữ nguyên công thức trong khi nấu ăn)
  • Phát hiện trạng thái không hoạt động 🔮 – Cho phép ứng dụng web của bạn phát hiện thời điểm người dùng không sử dụng thiết bị một cách chủ động.

Mở rộng dịch vụ hỗ trợ ngoại tuyến

Nếu muốn ứng dụng web hoạt động hiệu quả hơn nữa khi không có mạng, bạn có thể cân nhắc triển khai các API sau:

  • Đồng bộ hoá trong nền – Khi ở chế độ ngoại tuyến, hãy xếp hàng các yêu cầu cần có kết nối rồi đồng bộ hoá dữ liệu của ứng dụng web trong nền khi có mạng, thay vì không xử lý yêu cầu ngoại tuyến. Ví dụ: cho phép gửi thư hoặc đồng bộ hoá các thay đổi gia tăng đối với một tài liệu khi có mạng trở lại.
  • Đồng bộ hoá định kỳ ở chế độ nền – Cho phép ứng dụng web đã cài đặt và thường dùng có trình chạy dịch vụ được kích hoạt định kỳ (dựa trên khoảng thời gian tối thiểu đã trôi qua) và chạy, chẳng hạn như để cập nhật bộ nhớ đệm, cho phép nội dung luôn mới khi người dùng mở ứng dụng.
  • Content Indexing API – Cho phép ứng dụng web của bạn cho trình duyệt biết nội dung nào có sẵn ở chế độ ngoại tuyến để trình duyệt có thể hiển thị nội dung đó cho người dùng.
  • Tìm nạp ở chế độ nền – Cho phép tìm nạp ở chế độ nền trong thời gian dài, chẳng hạn như tải phim xuống hoặc tải video và hình ảnh lên mà không lo bị chấm dứt worker dịch vụ.

Phát trực tuyến, mã hoá và giải mã nội dung nghe nhìn

Nếu ứng dụng web của bạn phát các tệp nội dung nghe nhìn (chẳng hạn như tệp video hoặc tệp âm thanh), bạn nên cân nhắc triển khai các API sau:

  • Phát trực tuyến thích ứng – Cho phép luồng video chuyển đổi giữa các tốc độ bit dựa trên hiệu suất mạng
  • Hình trong hình – Cho phép người dùng chuyển video ra khỏi ứng dụng web của bạn vào một cửa sổ luôn ở trên cùng, sau đó có thể di chuyển và đổi kích thước cửa sổ này một cách độc lập
  • Media Session API – Cho phép người dùng điều khiển việc phát nội dung nghe nhìn cho ứng dụng web của bạn bằng chức năng phần mềm ở cấp độ phần cứng và hệ điều hành (chẳng hạn như nút phát/tạm dừng/dừng trên bàn phím hoặc trên màn hình khoá), cũng như điều khiển thông báo nội dung nghe nhìn ở cấp độ hệ điều hành (chẳng hạn như tiêu đề, nghệ sĩ, album và ảnh bìa)
  • Chromecast API – Cho phép người dùng truyền nội dung nghe nhìn đến một thiết bị nhận Chromecast hiện có, chẳng hạn như phát video từ ứng dụng web của bạn trên TV của họ.
  • Web Codecs 🔮 – Quyền truy cập vào bộ mã hoá và giải mã nội dung nghe nhìn bằng phần cứng và phần mềm tích hợp sẵn, hữu ích cho cả các trường hợp sử dụng theo thời gian thực như phát trực tiếp có độ trễ thấp và mã hoá, giải mã cũng như chuyển mã tệp.

Hỗ trợ nhiều thiết bị đầu vào hơn

Hỗ trợ thiết bị ngoại vi nâng cao

  • Web USB – Cho phép ứng dụng web truy cập vào các thiết bị USB không theo tiêu chuẩn (tức là bàn phím và chuột) từ ứng dụng của bạn
  • Serial API 🔮 – Thêm một API để giao tiếp với các thiết bị phần cứng qua cổng nối tiếp thực hoặc ảo.

Danh sách kiểm tra PWA

Bạn đã sẵn sàng bắt đầu nâng cao PWA bằng những API mạnh mẽ mới này chưa? Chọn một trong các trường hợp sử dụng bên dưới để xem một bộ API được đề xuất để sử dụng, hoặc tạo danh sách kiểm tra của riêng bạn và cố gắng hoàn thành danh sách đó!