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 lượt chuyển đổi và mức 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 viết trong tệp kê khai. Thông số kỹ thuật của Tệp kê khai ứng dụng web. Tệp này cho phép bạn xác định danh sách lối tắt đến các phần hoặc tính năng khác nhau trong PWA, giúp tăng tốc việc điều hướng đến các 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. Các lối tắt này xuất hiện trong trình đơn theo bối cảnh trên biểu tượng của ứng dụng trong màn hình chính, thanh dock 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 các thành phần có các thuộc tính sau:

name
Văn bản sẽ hiển thị cho người dùng, thường là trong trình đơn theo bối cảnh.
url
URL mà PWA sẽ tải khi người dùng khởi động thông qua lối tắt này. Đây phải là một URL trong phạm vi 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 đủ 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ề chức năng của lối tắt này
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 sẽ đại diện cho lối tắt

Bạn nên coi lối tắt ứng dụng là một tính năng có thể thực hiện được. Đ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 các lối tắt này 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 hay không vì điều này tuỳ thuộc vào trình duyệt. Chúng tôi không thể thảo luận đầy đủ về từng nền tảng, nhưng dưới đây là một số thông tin về 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 vấn đề không chắc chắn này là sắp xếp các mục theo mức độ ưu tiên.

Mẫu mã 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 bằng Chrome hoặc trên máy tính bằng Edge hoặc 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 Tệp kê khai ứng dụng web, Android sẽ 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ác phần tử <link>.

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

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

Thách thức là hình ảnh khởi động phải có kích thước cửa sổ chính xác mà PWA của bạn sẽ có khi mở. Do đó, các thiết bị iOS và iPadOS khác nhau sẽ cần hình ảnh khác nhau. Bạn cần xem xét thêm nhiều trường hợp 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 mới nhất về kích thước màn hình iOS và iPadOS tại Nguyên tắc giao diện người dùng của Apple

Bạn có thể đặt nhiều phiên bản hình ảnh khởi chạy bằng truy vấn nội dung nghe nhì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">

Mẫu thiết kế 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 tích hợp với hệ thống xây dựng của bạn, tạo mọi hình ảnh tĩnh PNG và cung cấp cho bạn mã HTML có các phần tử <link> để đưa vào tài liệu. Trình tạo tài sản PWA là một ví dụ về công cụ như vậ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ử được chèn <link> dựa trên loại và kích thước màn hình của thiết bị 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: bằng tệp PNG. Thư viện PWA Compat là một thư viện phía máy khách dễ sử dụng, thực hiện việc này bằng cách sao chép màn hình khởi chạy thông thường 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 Cải tiến dần và phát hiện tính năng trong PWA, nhưng có thể có một số trường hợp đặc biệt mà chúng ta cần biết liệu người dùng có đang ở trong PWA trên các nền tảng 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 hoặc 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à một thuộc tính không chuẩn và chỉ có sẵn trên công cụ WebKit trên iOS và iPadOS.

  • Nếu navigator.standalone là undefined, thì tức 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, thì tức là người dùng đã mở PWA từ màn hình chính và đang trải nghiệm PWA độc lập.

Hỗ trợ chế độ 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 PWA.

Trong hình ảnh tiếp theo, bạn có thể thấy ở bên trái là một thiết kế độc lập mặc định có màu giao diện, còn ở bên phải là một 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.

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

Nếu bạn thêm thẻ sau vào HTML, PWA 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 thấy đồng hồ, mức pin và biểu tượng thông báo) vẫn hiển thị nhưng được kết xuất trên nội dung của bạn với 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 có màu trắng. Vì vậy, bạn phải luôn tạo độ tương phản cho nền ở đầu màn hình bằng nội dung sáng. Ngoài ra, bạn cần sử dụng các biến môi trường CSS để hiển thị nội dung trong khu vực an toàn, như đã thấy trong Chương Thiết kế ứng dụng.

0px trên cùng của khung nhìn nằm bên dưới thanh trạng thái theo mặc định; nếu bạn thêm thẻ meta mờ màu đen, 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 quá trình cài đặt

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

Khi trình duyệt không thể tải tệp kê khai đúng giờ, thao tác nhấn vào "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 cung cấp trải nghiệm ứng dụng; đó chỉ là một lối tắt đến một thẻ trình duyệt.

Tài nguyên