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 của bạn.

Lối tắt ứng dụng

Lối tắt ứng dụng là danh sách tĩnh chứa các đường liên kết sâu đến PWA của bạn và được ghi trong tệp kê khai. Thông số kỹ thuật của Tệp kê khai ứng dụng web. Chế độ này giú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 bạn nhanh chóng di chuyển đến những phần mà bạn hay truy cập.

Lối tắt ứng dụng có trên hầu hết 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 trên 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. Hàm này sẽ lấy một mảng các 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 sẽ tải khi người dùng khởi động thông qua lối tắt này. Đó phải là một URL thuộc phạm vi PWA của bạn 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) Mô tả chức năng của phím 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à khả năng cố gắng tối đa. Đ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. Nếu có một cuộc thảo luận đầy đủ về mỗi nền tảng thì nằm ngoài phạm vi, nhưng bạn có thể tìm hiểu về cách hoạt động của ứng dụng này trên Android và máy tính ở bên dưới. Cách tốt nhất để giải quyết tình trạng không chắc chắn 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 phím tắt cho ứng dụng mà bạn có thể dùng thử nếu cài đặt ứng dụng trên Android với 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 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 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 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 cửa sổ chính xác mà PWA của bạn sẽ mở khi mở. Vì vậy, các thiết bị iOS và iPadOS khác nhau sẽ cần các hình ảnh khác nhau. Cần bảo vệ nhiều tình huống hơn trên iPad, chẳng hạn như các lỗ mở theo chiều 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 cập nhật các kích thước màn hình của iOS và iPadOS tại Nguyên tắc về giao diện người dùng của Apple

Bạn có thể đặt các phiên bản khác nhau của hình ảnh chạy bằng một 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">

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à 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 thành phần của ứng dụng web tiến bộ (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 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 PWA Compat 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 khởi chạy thông thường của Android.

Phát hiện PWA trên 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 tiến trình và phát hiện tính năng trong PWA của mình, nhưng có thể 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 sử dụng 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 hiện không sử dụng thiết bị iPadOS hay iOS.
  • Nếu navigator.standalone là false, thì 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ợ toàn màn hình

Trong Safari trên iOS và iPad, chỉ display: standalone mới đượ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 thiết bị Android, nhưng bạn có thể sử dụng một thẻ meta không 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 trái, bạn có thể thấy một thiết kế độc lập mặc định có màu giao diện và ở bên phải là PWA có chế độ toàn màn hình iOS cho phép bạn hiển thị nội dung phía sau thanh trạng thái.

Chế độ mặc định độc lập (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 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ị (vị trí 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 hiển thị ở đầu nội dung 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 màu trắng, vì vậy bạn phải luôn tương phản phần đầu màn hình với nội dung sáng. Ngoài ra, điều quan trọng là bạn phải sử dụng biến môi trường CSS để hiển thị nội dung trong vùng an toàn, như đã 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 thẻ meta trong suốt 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à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 tính chia sẻ – bằng cách sử dụng biểu tượng chia sẻ trong trình duyệt – chứ không phải khi trang tải. Do đó, Safari 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 trường hợp tệp kê khai không tải được hoặc mất quá nhiều thời gian, nên Safari sẽ bỏ qua tệp đó.

Khi Safari không thể tải tệp kê khai đúng giờ, hãy nhấn "Thêm vào Màn hình chính" đặ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; đó sẽ chỉ là lối tắt đến thẻ Safari.

Tài nguyên