חנויות אפליקציות מספקות למפתחים מקום להציג את האפליקציות שלהם לפני ההתקנה, עם צילומי מסך ופרטי טקסט שעוזרים למשתמש לבחור בהתקנת האפליקציה. ממשק משתמש עשיר יותר להתקנה מספק מרחב דומה שבו מפתחי אפליקציות אינטרנט יכולים להזמין את המשתמשים להתקין את האפליקציה שלהם, ישירות מהדפדפן. ממשק משתמש משופר זה זמין בסביבות Chrome ל-Android ולמחשבים.
בקשת ברירת מחדל
בדוגמה שלמטה ניתן לראות את חוויית ברירת המחדל, שלא מספקת מספיק הקשר.
ממשק התקנה עשיר יותר
כדי לקבל את תיבת הדו-שיח 'ממשק משתמש עשיר יותר של התקנה' במקום את ההנחיה הרגילה הקטנה, מוסיפים את השדות screenshots ו-description למניפסט האינטרנט. כדאי לראות את הדוגמה של Squoosh.app בהמשך:
תיבת הדו-שיח של ממשק המשתמש העשיר יותר להתקנה מורכבת מהתוכן של השדות description ו-screenshots שבמניפסט האינטרנט.
כדי להפעיל את תיבת הדו-שיח, צריך להוסיף לפחות צילום מסך אחד לגורם הצורה המתאים, אבל מומלץ להוסיף גם את התיאור. בהמשך תוכלו למצוא את כל הפרטים על השדות האלה.
צילומי מסך
צילומי המסך מוסיפים את החלק 'העשיר' יותר לממשק המשתמש החדש של ההתקנה, ואנחנו ממליצים מאוד להשתמש בהם. במניפסט עליך להוסיף את החבר screenshots, שמקבל מערך שדורש לפחות תמונה אחת ו-Chrome יציג עד שמונה. למטה מוצגת דוגמה.
"screenshots": [
{
"src": "source/image1.gif",
"sizes": "640x320",
"type": "image/gif",
"form_factor": "wide",
"label": "Wonder Widgets"
}
]
צילומי המסך צריכים לעמוד בקריטריונים הבאים:
- הרוחב והגובה חייבים להיות לפחות 320 פיקסלים ולא יותר מ-3,840 פיקסלים.
- המאפיין המקסימלי לא יכול להיות ארוך מפי 2.3 מהמאפיין המינימלי.
- לכל צילומי המסך עם אותו גורם צורה חייבים להיות יחסי גובה-רוחב זהים.
- יש תמיכה רק בפורמטים של תמונות JPEG ו-PNG.
- יוצגו רק שמונה צילומי מסך. אם מוסיפים אפשרויות נוספות, סוכן המשתמש פשוט מתעלם מהן.
בנוסף, צריך לציין את הגודל והסוג של התמונה כדי שהיא תעובד כמו שצריך. לצפייה בהדגמה.
ה-form_factor מורה לדפדפן אם צילום המסך צריך להופיע בסביבות מחשב (wide) או בסביבות ניידות (narrow).
תיאור
המשתמש description מתאר את האפליקציה בבקשת ההתקנה כדי להזמין את המשתמש להשאיר את האפליקציה.
תיבת הדו-שיח תוצג גם בלי description, אבל אנחנו ממליצים לעשות זאת.
אפשר להזין ערך מקסימלי אחרי 7 שורות טקסט (בערך 324 תווים), ותיאורים ארוכים יותר נחתכים ומצורפות שלוש נקודות (כפי שאפשר לראות בדוגמה הזו).
{
…
"description": "Compress and compare images with different codecs
right in your browser."
}
התיאור יופיע בחלק העליון של בקשת ההתקנה.
ייתכן שמבחינים בכך שבצילומי המסך שבתיבות הדו-שיח להתקנה מופיע גם מקור האפליקציה. מקורות שהם ארוכים מדי ולא מתאימים לממשק המשתמש נחתכים. זה נקרא גם שחרור (eliding) ומשמש כאמצעי אבטחה להגנה על משתמשים.
קריאה נוספת
הדגמה (דמו)
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();
});
}