הודעה להתקנת אפליקציה מקורית

ההנחיה להתקנת האפליקציה המקורית מאפשרת לכם לאפשר למשתמשים להתקין את האפליקציה המקורית במכשיר שלהם במהירות ובקלות ישירות מחנות האפליקציות, בלי לצאת מהדפדפן ובלי להציג מעברון מעצבן.

מהם הקריטריונים?

כדי להציג למשתמש את ההנחיה להתקנת האפליקציה המקורית, האתר צריך לעמוד בקריטריונים הבאים:

אירוע beforeinstallprompt יופעל כשהקריטריונים האלה יתקיימו. תוכלו להשתמש בו כדי לבקש מהמשתמש להתקין את האפליקציה המקורית שלכם.

מאפייני מניפסט נדרשים

כדי לבקש מהמשתמש להתקין את האפליקציה המקורית, צריך להוסיף שני מאפיינים למניפסט של אפליקציית האינטרנט: prefer_related_applications ו-related_applications.

"prefer_related_applications": true,
"related_applications": [
    {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
    }
]

המאפיין prefer_related_applications מורה לדפדפן להציג למשתמש את האפליקציה המקורית במקום את אפליקציית האינטרנט. אם לא תגדירו את הערך הזה, או אם תגדירו את הערך false, הדפדפן יציג למשתמש הודעה עם בקשה להתקין את אפליקציית האינטרנט במקום זאת.

related_applications הוא מערך עם רשימת אובייקטים שמספרים לדפדפן על האפליקציה המקורית המועדפת. כל אובייקט חייב לכלול מאפיין platform ומאפיין id. כאשר platform הוא play ו-id הוא מזהה האפליקציה שלכם בחנות Play.

הצגת ההנחיה להתקנה

כדי להציג את תיבת הדו-שיח של ההתקנה, צריך:

  1. מקשיב לאירוע beforeinstallprompt.
  2. מודיעים למשתמש שאפשר להתקין את האפליקציה המקורית באמצעות לחצן או רכיב אחר שייצור אירוע של תנועת משתמש.
  3. כדי להציג את הבקשה, התקשרו אל prompt() באירוע beforeinstallprompt שנשמר.

האזנה ל-beforeinstallprompt

אם הקריטריונים מתקיימים, Chrome יפעיל אירוע beforeinstallprompt. אתם יכולים להשתמש בו כדי לציין שאפשר להתקין את האפליקציה, ואז לבקש מהמשתמש להתקין אותה.

כשהאירוע beforeinstallprompt מופעל, שומרים הפניה לאירוע ומעדכנים את ממשק המשתמש כדי לציין שהמשתמש יכול להתקין את האפליקציה.

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

צריך להודיע למשתמש שאפשר להתקין את האפליקציה

הדרך הטובה ביותר להודיע למשתמש שאפשר להתקין את האפליקציה היא להוסיף לחצן או רכיב אחר לממשק המשתמש. אין להציג מודעה מעברון בדף מלא או אלמנטים אחרים שעשויים להפריע או להסיח את הדעת.

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can add to home screen
  btnAdd.style.display = 'block';
});

הצגת ההנחיה

כדי להציג את בקשת ההתקנה, קוראים לפונקציה prompt() באירוע השמור מתוך תנועת משתמש. תוצג תיבת דו-שיח של חלון שבו תתבקשו להוסיף את האפליקציה למסך הבית.

לאחר מכן, מקשיבים להבטחה שהוחזרה על ידי הנכס userChoice. ה-promise מחזיר אובייקט עם המאפיין outcome אחרי שההנחיה מוצגת והמשתמש משיב לה.

btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

אפשר להפעיל את prompt() באירוע שנדחה רק פעם אחת. אם המשתמש סוגר אותה, צריך להמתין עד שהאירוע beforeinstallprompt יופעל במעבר לדף הבא.

שיקולים מיוחדים לשימוש במדיניות אבטחת תוכן

אם לאתר יש מדיניות אבטחת תוכן מגבילה, חשוב להוסיף את *.googleusercontent.com להנחיה img-src כדי ש-Chrome יוכל להוריד את הסמל המשויך לאפליקציה מחנות Play.

במקרים מסוימים, *.googleusercontent.com עשוי להיות מפורט יותר מהרצוי. אפשר לצמצם את האפשרויות על ידי ניפוי באגים מרחוק במכשיר Android כדי לקבוע את כתובת ה-URL של סמל האפליקציה.