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

François Beaufort
François Beaufort
GitHub
Jungkee Song
Jungkee Song
X GitHub

Để cải thiện trải nghiệm người dùng tăng năng suất và hỗ trợ tương tác lại với những nhiệm vụ chính. nền tảng web hiện hỗ trợ lối tắt ứng dụng. Chúng cho phép các nhà phát triển web cung cấp 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.

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 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 công việc phổ biến hoặc được đề xuất trong ứng dụng web. Dễ dàng truy cập vào các công việc đó từ bất cứ nơi nào có biểu tượng ứng dụng nâng cao trải nghiệm của người dùng năng suất cũng như tăng mức độ tương tác của họ với trang 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 trên thanh tác vụ (Windows) hoặc gắn vào đế (macOS) trên màn hình của người dùng hoặc chạm và giữ màn hình của ứng dụng biểu tượng trình chạy trên Android.

Ảnh chụp màn hình trình đơn lối tắt ứng dụng đã 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 đã 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ộ trên máy tính hoặc thiết bị di động của người dùng. Hãy tham khảo phần Cài đặt trong công cụ "Tìm hiểu về ứng dụng web tiến bộ (PWA)" của chúng tôi để tìm hiểu về 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 và mỗi lối tắt này được liên kết với một URL trong phạm vi ứng dụng web của bạn. URL được mở khi người dùng kích hoạt lối tắt cho ứ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, các đơn đặt hàng gần đây)
  • Tìm kiếm
  • Các thao tác 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 các 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

Lối tắt ứng dụng được xác định không bắt buộc trong tệp kê khai ứng dụng web (một tệp JSON mà 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 trên máy tính hoặc thiết bị di động của người dùng. Cụ thể hơn, chúng được khai báo trong thành phần mảng shortcuts. Dưới đây là ví dụ về 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à 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 mà người dùng nhìn thấy.
short_name (không bắt buộc)
Nhãn mà con người đọc được, được dùng trong trường hợp không gian bị giới hạn. Bạn nên mà bạn cung cấp, mặc dù 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. Mã này không được sử dụng tại thời điểm viết bài nhưng có thể tiếp xúc với công nghệ hỗ trợ trong tương lai.
url
URL được mở khi người dùng kích hoạt ứng dụng lối tắt. 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 có thì 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 thuộc tính src và sizes. Không giống như biểu tượng tệp kê khai ứng dụng web, phương thức type hình ảnh là không bắt buộc. Tệp SVG không được hỗ trợ tại thời điểm ghi. Thay vào đó, hãy sử dụng PNG.

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

Để đo lường chất lượng, các biểu tượng phải có kích thước tối thiểu bằng một nửa kích thước lý tưởng của thiết bị trên Android, 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ối thiểu là 72 x 72 pixel. (Thông tin này được lấy từ công thức chuyển đổi đơn vị dp thành đơn vị pixel.)

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

Để xác minh rằng các lối tắt ứng dụng của bạn đã được thiết lập đúng cách, hãy sử dụng ngăn Manifest (Tệp kê khai) trong Bảng điều khiển 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 xuất hiện trong Công cụ cho nhà phát triển

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

Một số người dùng có thể không dùng được ngay lối tắt ứng dụng do Progressive Hạn mức cập nhật ứng dụng web là 1 lần/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 do 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. Chrome và Edge đang bật Ví dụ: Windows giới hạn số lượng lối tắt ứng dụng là 10, trong khi Chrome dành cho Chỉ Android hiển thị 3. Trước Chrome 92 dành cho Android 7, 4 phiên bản được cho phép. Chrome 92 đã thêm một lối tắt vào phần cài đặt trang web, dùng một trong các lối tắt có sẵn cho ứng dụng.

Dùng tên lối tắt ứng dụng riêng biệt

Bạn không nên dựa vào biểu tượng để phân biệt lối tắt ứng dụng vì chúng có thể không luôn hiển thị. Ví dụ: macOS không hỗ trợ các biểu tượng trên thanh Dock ứng dụng 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 thường 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ó trên các nền tảng và phiên bản trong danh sách dưới đây.

Hỗ trợ trình duyệt

  • Chrome: 96.
  • Cạnh: 96.
  • Firefox: không được hỗ trợ.
  • Safari: 17.4.

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ụ đề xuất để tạo ứng dụng Android sử dụng Web đáng tin cậy Activity, đọc lối tắt ứng dụng từ 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. Lưu ý rằng các biểu tượng cho lối tắt trong ứng dụng là bắt buộc và phải có kích thước tối thiểu là 96 x 96 pixel Bong bóng.

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

Dành cho những nhà phát triển tích hợp Hoạt động đáng tin cậy trên web vào thiết bị Android theo cách thủ công , bạn có thể sử dụng các lối tắt ứng dụng Android để triển khai cùng một của Google.

Mẫu

Xem mẫu lối tắt ứng dụng và nguồn của lối tắt ứng dụng.