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

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

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

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

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

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

כדי לבקש מהמשתמש להתקין את אפליקציית ה-Native, עליך להוסיף שני מאפיינים למניפסט של אפליקציית האינטרנט, 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. ההבטחה מחזירה אובייקט עם מאפיין 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 של סמל האפליקציה.