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

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

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

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

אירוע 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 של סמל האפליקציה.