Cửa hàng ứng dụng là không gian để nhà phát triển giới thiệu ứng dụng trước khi cài đặt, thông qua ảnh chụp màn hình và thông tin dạng văn bản giúp người dùng lựa chọn cài đặt ứng dụng. Giao diện người dùng cài đặt phong phú hơn mang đến không gian tương tự để nhà phát triển ứng dụng web mời người dùng cài đặt ứng dụng, trực tiếp qua trình duyệt. Giao diện người dùng nâng cao này có trong Chrome dành cho môi trường Android và máy tính.
Lời nhắc mặc định
Hãy xem ví dụ bên dưới về trải nghiệm mặc định dù không có đủ bối cảnh.
Giao diện người dùng cài đặt phong phú hơn
Để hộp thoại Cài đặt giao diện người dùng phong phú hơn thay vì lời nhắc nhỏ mặc định thông thường, hãy thêm các trường screenshots và description vào tệp kê khai web của bạn. Hãy xem ví dụ về Squoosh.app dưới đây:
Hộp thoại Cài đặt giao diện người dùng phong phú hơn bao gồm nội dung của các trường description và screenshots trong tệp kê khai web.
Để kích hoạt hộp thoại, bạn chỉ cần thêm ít nhất một ảnh chụp màn hình cho hệ số hình dạng tương ứng. Tuy nhiên, bạn cũng nên thêm nội dung mô tả. Hãy xem thông tin cụ thể về các trường đó dưới đây.
Ảnh chụp màn hình
Ảnh chụp màn hình thực sự thêm phần "phong phú hơn" vào giao diện người dùng cài đặt mới và chúng tôi rất khuyến khích bạn sử dụng những ảnh này. Trong tệp kê khai, bạn thêm thành phần screenshots. Thành phần này chứa một mảng yêu cầu ít nhất một hình ảnh và Chrome sẽ hiển thị tối đa 8 hình ảnh. Bạn có thể xem ví dụ dưới đây.
"screenshots": [
{
"src": "source/image1.gif",
"sizes": "640x320",
"type": "image/gif",
"form_factor": "wide",
"label": "Wonder Widgets"
}
]
Ảnh chụp màn hình phải tuân theo các tiêu chí sau:
- Chiều rộng và chiều cao tối thiểu phải là 320px và tối đa là 3.840px.
- Kích thước tối đa không được dài hơn kích thước tối thiểu gấp 2,3 lần.
- Tất cả ảnh chụp màn hình có giá trị cùng một hệ số hình dạng đều phải có tỷ lệ khung hình giống nhau.
- Chỉ hỗ trợ các định dạng hình ảnh JPEG và PNG.
- Sẽ chỉ có 8 ảnh chụp màn hình được hiển thị. Nếu bạn thêm các cột khác, tác nhân người dùng chỉ cần bỏ qua chúng.
Ngoài ra, bạn cần thêm kích thước và loại hình ảnh để hình ảnh hiển thị chính xác. Xem bản minh hoạ này.
form_factor cho trình duyệt biết liệu ảnh chụp màn hình sẽ hiển thị trên môi trường máy tính (wide) hay thiết bị di động (narrow).
Nội dung mô tả
Thành phần description mô tả ứng dụng trong lời nhắc cài đặt để mời người dùng giữ lại ứng dụng.
Hộp thoại sẽ hiển thị ngay cả khi không có description, nhưng bạn nên làm vậy.
Có giới hạn tối đa được chèn sau 7 dòng văn bản (khoảng 324 ký tự), đồng thời phần mô tả dài hơn sẽ bị cắt bớt và thêm dấu ba chấm (như bạn có thể thấy trong ví dụ này).
{
…
"description": "Compress and compare images with different codecs
right in your browser."
}
Mô tả xuất hiện ở đầu lời nhắc cài đặt.
Bạn có thể nhận thấy trong ảnh chụp màn hình, hộp thoại cài đặt cũng liệt kê nguồn gốc của ứng dụng. Các nguồn gốc quá dài không vừa với giao diện người dùng sẽ bị cắt bớt. Đây còn được gọi là loại bỏ và dùng làm biện pháp bảo mật để bảo vệ người dùng.
Tài liệu đọc thêm
- Giao diện người dùng cài đặt PWA đa dạng hơn
- Giao diện người dùng cài đặt phong phú hơn dành cho máy tính
Bản minh hoạ
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark light" />
<link rel="manifest" href="manifest.json" />
<title>How to add Richer Install UI to your web app</title>
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js');
});
}
</script>
<script type="module" src="script.js"></script> -->
</head>
<body>
<h1>How to add Richer Install UI to your web app</h1>
<ol>
<li>
Install the app by clicking the button below. After the installation,
the button is disabled.
<p>
<button disabled type="button">Install</button>
</p>
</li>
<li>
When you click on install a dialog similar to the ones from app stores
will be displayed.
</li>
<li>
The dialog includes the `description` and `screenshots` set in the app
manifest.
</li>
<li>
Screenshots should be different depending if the app is being installed
on a mobile or desktop device, according to the `form_factor` value set
for the screenshots on the manifest
</li>
</ol>
</body>
</html>JS
// The install button.
const installButton = document.querySelector('button');
// Only relevant for browsers that support installation.
if ('BeforeInstallPromptEvent' in window) {
// Variable to stash the `BeforeInstallPromptEvent`.
let installEvent = null;
// Function that will be run when the app is installed.
const onInstall = () => {
// Disable the install button.
installButton.disabled = true;
// No longer needed.
installEvent = null;
};
window.addEventListener('beforeinstallprompt', (event) => {
// Do not show the install prompt quite yet.
event.preventDefault();
// Stash the `BeforeInstallPromptEvent` for later.
installEvent = event;
// Enable the install button.
installButton.disabled = false;
});
installButton.addEventListener('click', async () => {
// If there is no stashed `BeforeInstallPromptEvent`, return.
if (!installEvent) {
return;
}
// Use the stashed `BeforeInstallPromptEvent` to prompt the user.
installEvent.prompt();
const result = await installEvent.userChoice;
// If the user installs the app, run `onInstall()`.
if (result.outcome === 'accepted') {
onInstall();
}
});
// The user can decide to ignore the install button
// and just use the browser prompt directly. In this case
// likewise run `onInstall()`.
window.addEventListener('appinstalled', () => {
onInstall();
});
}