Các tính năng nâng cao

Có nhiều tính năng nâng cao có thể cải thiện việc chuyển đổi và sử dụng PWA.

Lối tắt ứng dụng

Lối tắt ứng dụng là danh sách tĩnh gồm các đường liên kết sâu đến PWA của bạn, các đường liên kết này được ghi trong tệp kê khai. Thông số kỹ thuật của tệp kê khai ứng dụng web. Dữ liệu này cho phép bạn xác định danh sách lối tắt đến nhiều phần hoặc tính năng trong PWA, giúp tăng tốc độ di chuyển đến những phần thường được truy cập.

Lối tắt ứng dụng có trên hầu hết các hệ điều hành máy tính và Android có WebAPK. Chúng xuất hiện trong trình đơn theo bối cảnh trên biểu tượng của ứng dụng trên màn hình chính, đế hoặc thanh tác vụ, như trong hình sau:

Lối tắt ứng dụng trong Android và macOS.

Để truy cập vào trình đơn này, người dùng phải nhấp chuột phải hoặc nhấn và giữ biểu tượng của PWA.

Lối tắt được xác định trong thành phần shortcuts của tệp kê khai. Phương thức này nhận một mảng thành phần có các thuộc tính sau:

name
Văn bản mà người dùng nhìn thấy, thường là trong một trình đơn theo bối cảnh.
url
URL mà PWA phải tải khi người dùng khởi động qua lối tắt này. Đó phải là một URL thuộc phạm vi của PWA và phải liên kết sâu đến tính năng mà name hoặc short_name mô tả.
short_name
(Không bắt buộc) Tên ngắn hơn được dùng khi không có đủ chỗ để hiển thị toàn bộ giá trị của trường name.
description
(Không bắt buộc) Nội dung mô tả về các thao tác mà phím tắt này sẽ thực hiện
icons
(Không bắt buộc) Một mảng các đối tượng biểu tượng có các trường src, type, sizes và purpose không bắt buộc, mô tả những hình ảnh nào cần đại diện cho lối tắt

Bạn nên coi Lối tắt ứng dụng là khả năng tối ưu nhất. Điều đó có nghĩa là bạn không thể dựa vào các lối tắt này để xuất hiện một cách nhất quán, và ngay cả khi chúng xuất hiện, bạn cũng không biết có bao nhiêu lối tắt sẽ xuất hiện hoặc liệu nền tảng có bỏ qua các biểu tượng theo quyết định riêng của trình duyệt hay không. Bạn không cần phải thảo luận đầy đủ về mỗi nền tảng, nhưng dưới đây là cách hoạt động của tính năng này trên Android và máy tính. Cách tốt nhất để giải quyết tình trạng bất ổn định này là sắp xếp các mặt hàng theo mức độ ưu tiên.

Mã mẫu sau đây xác định các lối tắt ứng dụng khác nhau mà bạn có thể thử nếu cài đặt ứng dụng trên Android thông qua Chrome hoặc trên máy tính bằng Edge/Chrome.

iOS và iPadOS

Khi xuất bản PWA, có một số tính năng nâng cao có thể cải thiện trải nghiệm cho người dùng trên Safari trên iOS/iPadOS.

Màn hình chờ

Như đã thấy trong chương của Tệp kê khai ứng dụng web, Android tự động tạo màn hình chờ dựa trên các giá trị của tệp kê khai. Đó không phải là trường hợp của iOS và iPadOS. Trong các thiết bị này, bạn nên xác định màn hình chờ trong HTML dưới dạng hình ảnh tĩnh bằng cách sử dụng phần tử <link>.

Những hình ảnh này được gọi là hình ảnh khởi động trên thiết bị Apple và sử dụng thuộc tính rel có giá trị apple-touch-startup-image, như trong:

<link rel="apple-touch-startup-image" href="ios-startup.png">

Thách thức đặt ra là hình ảnh khởi động phải có kích thước chính xác cửa sổ mà PWA của bạn sẽ có khi mở. Vì vậy, các thiết bị iOS và iPadOS khác nhau sẽ cần những hình ảnh khác nhau. Các tình huống khác cần được che phủ trên iPad, chẳng hạn như mở theo hướng ngang/dọc và hiển thị PWA ở chế độ đa nhiệm (chẳng hạn như 1/3, 1/2 hoặc 2/3 màn hình).

Bạn có thể xem danh sách kích thước màn hình iOS và iPadOS mới cập nhật trong Nguyên tắc về giao diện con người của Apple

Bạn có thể đặt các phiên bản khác nhau của hình ảnh khởi chạy bằng truy vấn phương tiện bên trong thuộc tính media:

<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">

Thiết kế mẫu cho hình ảnh khởi động iOS

Việc xác định hình ảnh khởi động là một công việc khó khăn, vì vậy, chúng tôi có một số công cụ để tạo và định cấu hình tự động:

  • Tính năng tạo tĩnh sẽ tích hợp với hệ thống xây dựng của bạn, tạo tất cả các hình ảnh tĩnh PNG và cung cấp cho bạn mã HTML có các phần tử <link> để chèn vào tài liệu của bạn. Trình tạo thành phần PWA là một ví dụ về loại công cụ này.
  • Trình tạo phía máy khách, một công cụ JavaScript có thể nhúng một hoặc nhiều phiên bản base64 của hình ảnh khởi động vào các phần tử chèn <link> dựa trên loại thiết bị và kích thước màn hình hiện tại. Bạn có thể sử dụng canvas trong bộ nhớ, kết xuất hình ảnh và chuyển đổi hình ảnh đó thành URI data: có tệp PNG. Thư viện Tương thích PWA là một thư viện phía máy khách dễ sử dụng. Thư viện này thực hiện việc này bằng cách sao chép màn hình chạy điển hình của Android.

Phát hiện PWA trên các nền tảng di động của Apple

Mặc dù bạn nên sử dụng tính năng Tăng cường tăng tiến và phát hiện tính năng trong PWA, nhưng có một số trường hợp hiếm gặp mà chúng tôi cần biết liệu người dùng có đang ở trong PWA trên các nền tảng dành cho thiết bị di động của Apple hay không, chẳng hạn như khi bạn muốn cung cấp hướng dẫn cài đặt hay thêm đường liên kết đến các ứng dụng dành riêng cho nền tảng chỉ dành cho iOS.

Để tránh đọc chuỗi tác nhân người dùng, hãy kiểm tra thuộc tính standalone của đối tượng navigator. Đây là thuộc tính không chuẩn và chỉ có trên công cụ WebKit trên iOS và iPadOS.

  • Nếu navigator.standalone là undefined, điều đó có nghĩa là người dùng không sử dụng thiết bị iPadOS hoặc iOS.
  • Nếu navigator.standalone là false, tức là người dùng đã mở PWA trong trình duyệt và đang sử dụng PWA đó.
  • Nếu navigator.standalone là true, điều đó có nghĩa là người dùng đã mở PWA trên màn hình chính và đang sử dụng trải nghiệm PWA độc lập.

Hỗ trợ toàn màn hình

Trên Safari trên iOS và iPad, chỉ display: standalone được hỗ trợ làm chế độ hiển thị cho biểu tượng của PWA. Mặc dù display: fullscreen không được hỗ trợ như trên các thiết bị Android, nhưng bạn có thể sử dụng một thẻ meta không theo chuẩn để chuyển PWA của bạn sang chế độ toàn màn hình.

Trong hình ảnh tiếp theo, bạn có thể thấy ở bên trái một thiết kế độc lập mặc định với màu giao diện, còn ở bên phải là PWA có chế độ iOS toàn màn hình cho phép bạn hiển thị nội dung phía sau thanh trạng thái.

Một hành vi mặc định độc lập (bên trái) và màn hình toàn màn hình iOS (bên phải).

Nếu bạn thêm thẻ sau vào HTML, PWA của bạn trên iOS và iPadOS sẽ chuyển sang chế độ toàn màn hình, nhưng khác với Android.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Ở chế độ này, thanh trạng thái của thiết bị (phần trên cùng nơi bạn nhìn thấy đồng hồ, mức pin và các biểu tượng thông báo) vẫn hiển thị nhưng sẽ hiển thị ở phía trên nội dung của bạn trên nền trong suốt.

Khi sử dụng chế độ này, hãy cẩn thận với thiết kế của bạn vì hệ điều hành sẽ luôn hiển thị các biểu tượng màu trắng, vì vậy bạn nên luôn tương phản hình nền ở đầu màn hình với nội dung sáng màu. Ngoài ra, bạn phải sử dụng các biến môi trường CSS để hiển thị nội dung trong vùng an toàn, như bạn thấy trong Chương thiết kế ứng dụng.

Theo mặc định, 0px trên cùng của khung nhìn nằm dưới thanh trạng thái; nếu bạn thêm một thẻ meta màu đen mờ, 0px trên cùng của khung nhìn sẽ khớp với phần trên cùng của màn hình

Độ tin cậy của việc cài đặt

Safari trên iOS và iPadOS trước phiên bản 15.4 chỉ tải tệp kê khai từ mạng khi người dùng mở trang chia sẻ (bằng cách sử dụng biểu tượng chia sẻ trong trình duyệt) chứ không tải khi trang tải. Do đó, tại thời điểm đó, Safari sẽ không kiểm tra xem trang web của bạn có phải là PWA hay không. Điều này có thể dẫn đến trường hợp không tải được tệp kê khai hoặc mất quá nhiều thời gian và Safari sẽ bỏ qua tệp kê khai.

Khi Safari không thể tải tệp kê khai đúng lúc, việc nhấn "Thêm vào Màn hình chính" sẽ đặt một biểu tượng trên màn hình chính nhưng không mang lại trải nghiệm ứng dụng; đó sẽ chỉ là lối tắt đến thẻ Safari.

Tài nguyên