Lời nhắc mặc định
Hãy xem ví dụ bên dưới để biết phiên bản mặc định chưa cung cấp đủ ngữ cảnh.
Giao diện người dùng Cài đặt phong phú hơn
Để nhận hộp thoại Giao diện người dùng Cài đặt 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 bên dưới:
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 kiểu dáng thiết bị 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ể của các trường đó ở bên dưới.
Ảnh chụp màn hình
Ảnh chụp màn hình thực sự mang lại giá trị "phong phú hơn" vào giao diện người dùng cài đặt mới và chúng tôi khuyên bạn nên sử dụng chúng. Trong tệp kê khai, bạn thêm thành phần screenshots. Thao tác này sẽ lấy một mảng yêu cầu ít nhất 1 hình ảnh và Chrome sẽ hiển thị tối đa 8 hình ảnh. Dưới đây là ví dụ minh hoạ.
"screenshots": [
{
"src": "source/image1.png",
"sizes": "640x320",
"type": "image/png",
"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.
- Phương diện tối đa không được dài hơn 2,3 lần so với phương diện tối thiểu.
- Tất cả ảnh chụp màn hình có giá trị cùng hệ số hình dạng 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 nhiều thành phần khác, tác nhân người dùng sẽ chỉ bỏ qua các thành phần đó.
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ẽ xuất hiện trên môi trường máy tính (wide) hay thiết bị di động (narrow).
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 tiếp tục dùng ứng dụng.
Hộp thoại vẫn sẽ xuất hiện ngay cả khi không có description, nhưng bạn nên làm vậy.
Giới hạn tối đa bắt đầu sau 7 dòng văn bản (khoảng 324 ký tự), các đoạn mô tả dài hơn được cắt ngắn 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."
}
Nội dung mô tả xuất hiện ở đầu lời nhắc cài đặt.
Trên ảnh chụp màn hình, có thể bạn đã nhận thấy các 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 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 gọi là eliding và được 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();
});
}