Trang này được dịch bởi Cloud Translation API.

Nhanh chóng hoàn thành công việc bằng lối tắt ứng dụng

Lối tắt ứng dụng cho phép truy cập nhanh vào một số thao tác phổ biến mà người dùng thường xuyên cần thực hiện.

François Beaufort

Bài hát "Jungkee"

Để cải thiện năng suất của người dùng và tạo điều kiện cho việc tương tác lại với các nhiệm vụ chính, nền tảng web hiện hỗ trợ lối tắt ứng dụng. Các API này cho phép nhà phát triển web truy cập nhanh vào một số thao tác phổ biến mà người dùng cần thường xuyên thực hiện.

Bài viết này sẽ hướng dẫn bạn cách xác định lối tắt ứng dụng. Ngoài ra, bạn cũng sẽ tìm hiểu một số phương pháp hay nhất có liên quan.

Giới thiệu về lối tắt ứng dụng

Lối tắt ứng dụng giúp người dùng nhanh chóng bắt đầu các tác vụ phổ biến hoặc được đề xuất trong ứng dụng web của bạn. Việc dễ dàng truy cập vào các tác vụ đó từ bất cứ nơi nào biểu tượng ứng dụng hiển thị sẽ nâng cao năng suất của người dùng cũng như tăng mức độ tương tác của họ với ứng dụng web.

Trình đơn lối tắt ứng dụng được gọi bằng cách nhấp chuột phải vào biểu tượng ứng dụng trong thanh tác vụ (Windows) hoặc đế (macOS) trên màn hình của người dùng hoặc chạm và giữ biểu tượng trình chạy của ứng dụng trên Android.

Ảnh chụp màn hình trình đơn lối tắt ứng dụng đang mở trên Android — Trình đơn lối tắt ứng dụng đã mở trên Android

Ảnh chụp màn hình trình đơn lối tắt ứng dụng đang mở trên Windows — Trình đơn lối tắt ứng dụng đã mở trên Windows

Trình đơn lối tắt ứng dụng chỉ hiển thị cho Ứng dụng web tiến bộ được cài đặt trên máy tính hoặc thiết bị di động của người dùng. Hãy xem phần Cài đặt trong mô-đun "Tìm hiểu PWA" của chúng tôi để tìm hiểu các yêu cầu về khả năng cài đặt.

Mỗi lối tắt ứng dụng thể hiện một ý định của người dùng, mỗi ý định được liên kết với một URL trong phạm vi của ứng dụng web. URL sẽ được mở ra khi người dùng kích hoạt lối tắt ứng dụng. Sau đây là ví dụ về lối tắt ứng dụng:

Các mục điều hướng cấp cao nhất (ví dụ: trang chủ, dòng thời gian, đơn đặt hàng gần đây)
Tìm kiếm
Tác vụ nhập dữ liệu (ví dụ: soạn email hoặc tweet, thêm biên nhận)
Hoạt động (ví dụ: bắt đầu trò chuyện với những người liên hệ phổ biến nhất)

Xác định lối tắt ứng dụng trong tệp kê khai ứng dụng web

Bạn không bắt buộc phải xác định lối tắt ứng dụng trong tệp kê khai ứng dụng web. Tệp JSON cho trình duyệt biết về ứng dụng web của bạn và cách ứng dụng hoạt động khi được cài đặt trên máy tính hoặc thiết bị di động của người dùng. Cụ thể hơn, các giá trị này được khai báo trong thành phần mảng shortcuts. Dưới đây là ví dụ về một tệp kê khai ứng dụng web tiềm năng.

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

Mỗi thành phần của mảng shortcuts là một từ điển chứa ít nhất một name và một url. Các thành viên khác là không bắt buộc.

name

Nhãn mà con người có thể đọc được cho lối tắt ứng dụng khi hiển thị cho người dùng.

short_name (không bắt buộc)

Nhãn mà con người đọc được, dùng trong trường hợp không gian bị giới hạn. Bạn nên cung cấp thuộc tính này, mặc dù đây là tính năng không bắt buộc.

description (không bắt buộc)

Mục đích mà con người có thể đọc được của lối tắt ứng dụng. API này không được sử dụng tại thời điểm viết nhưng có thể sẽ áp dụng công nghệ hỗ trợ trong tương lai.

url

URL mở ra khi người dùng kích hoạt lối tắt ứng dụng. URL này phải tồn tại trong phạm vi của tệp kê khai ứng dụng web. Nếu đó là URL tương đối, URL cơ sở sẽ là URL của tệp kê khai ứng dụng web.

icons (không bắt buộc)

Một mảng các đối tượng tài nguyên hình ảnh. Mỗi đối tượng phải bao gồm một thuộc tính src và sizes. Không giống như các biểu tượng tệp kê khai ứng dụng web, type của hình ảnh là không bắt buộc. Tệp SVG không được hỗ trợ tại thời điểm viết. Hãy dùng PNG.

Nếu bạn muốn biểu tượng có độ hoàn hảo về điểm ảnh, hãy cung cấp các biểu tượng đó theo gia số 48 dp (tức là biểu tượng 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 pixel). Nếu không, bạn nên sử dụng một biểu tượng duy nhất có kích thước 192 x 192 pixel.

Để đo lường chất lượng, các biểu tượng phải có kích thước ít nhất bằng một nửa kích thước lý tưởng của thiết bị trên Android, là 48 dp. Ví dụ: để hiển thị trên màn hình xxhdpi, biểu tượng phải có kích thước ít nhất là 72 x 72 pixel. (Công thức này suy ra từ công thức chuyển đổi đơn vị dp cho đơn vị pixel.)

Kiểm thử lối tắt ứng dụng

Để xác minh rằng bạn đã thiết lập lối tắt ứng dụng đúng cách, hãy sử dụng ngăn Manifest (Tệp kê khai) trong bảng Application (Ứng dụng) của Công cụ cho nhà phát triển.

Ảnh chụp màn hình lối tắt ứng dụng trong Công cụ cho nhà phát triển — Lối tắt ứng dụng hiển thị trong Công cụ cho nhà phát triển

Ngăn này cung cấp phiên bản nhiều thuộc tính của tệp kê khai mà con người có thể đọc được, bao gồm cả lối tắt ứng dụng. Công cụ này giúp bạn dễ dàng xác minh rằng tất cả các biểu tượng lối tắt (nếu được cung cấp) đang tải đúng cách.

Lối tắt ứng dụng có thể không được cung cấp ngay cho một số người dùng vì chúng tôi giới hạn việc cập nhật Ứng dụng web tiến bộ là một lần mỗi ngày. Tìm hiểu thêm về cách Chrome xử lý các bản cập nhật cho tệp kê khai ứng dụng web.

Các phương pháp hay nhất

Sắp xếp lối tắt ứng dụng theo mức độ ưu tiên

Lối tắt hiển thị theo thứ tự mà bạn xác định trong tệp kê khai. Bạn nên sắp xếp các lối tắt ứng dụng theo mức độ ưu tiên vì giới hạn về số lượng lối tắt ứng dụng được hiển thị sẽ khác nhau tuỳ theo nền tảng. Chẳng hạn, Chrome và Edge trên Windows giới hạn số lượng lối tắt ứng dụng là 10 trong khi Chrome dành cho Android chỉ hiển thị 3. 4 trước Chrome 92 dành cho Android 7 được cho phép. Chrome 92 đã thêm một lối tắt vào phần cài đặt trang web, sử dụng một trong các khe cắm lối tắt có sẵn cho ứng dụng.

Sử dụng tên lối tắt riêng biệt cho ứng dụng

Bạn không nên dựa vào biểu tượng để phân biệt các lối tắt ứng dụng vì các lối tắt đó có thể không phải lúc nào cũng hiển thị. Ví dụ: macOS không hỗ trợ các biểu tượng trong trình đơn lối tắt ở đế. Sử dụng tên riêng biệt cho mỗi lối tắt ứng dụng.

Đo lường mức sử dụng lối tắt ứng dụng

Bạn nên chú thích các mục nhập url của lối tắt ứng dụng như cách bạn làm với start_url cho mục đích phân tích (ví dụ: url: "/my-shortcut?utm_source=homescreen").

Hỗ trợ trình duyệt

Lối tắt ứng dụng có sẵn trên các nền tảng và phiên bản được liệt kê dưới đây.

Hỗ trợ trình duyệt

Nguồn

Ảnh chụp màn hình trình đơn lối tắt ứng dụng đang mở trên ChromeOS — Trình đơn lối tắt ứng dụng đã mở trên ChromeOS

Hỗ trợ Hoạt động đáng tin cậy trên web

Bubblewrap, công cụ được đề xuất để xây dựng ứng dụng Android sử dụng Hoạt động đáng tin cậy trên web, đọc lối tắt ứng dụng trong tệp kê khai ứng dụng web và tự động tạo cấu hình tương ứng cho ứng dụng Android. Xin lưu ý rằng các biểu tượng cho lối tắt ứng dụng là bắt buộc và phải có kích thước tối thiểu 96 x 96 pixel trong Bubblewrap.

PWABuilder là một công cụ tuyệt vời giúp dễ dàng chuyển Ứng dụng web tiến bộ thành Hoạt động đáng tin cậy trên web, hỗ trợ lối tắt ứng dụng nhưng bạn cần lưu ý một số lưu ý.

Đối với các nhà phát triển tích hợp Hoạt động đáng tin cậy trên web theo cách thủ công vào ứng dụng Android, có thể dùng lối tắt trong ứng dụng Android để triển khai các hành vi tương tự.

Mẫu

Hãy xem mẫu lối tắt ứng dụng và nguồn của lối tắt đó.

Các đường liên kết hữu ích

MDN
Thông số kỹ thuật
Mẫu lối tắt ứng dụng | Nguồn mẫu về lối tắt ứng dụng
Thành phần nhấp nháy: UI>Browser>WebAppInstalls