הגדרה כניתנת להתקנה

Pete LePage

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

יש בו גם לחצן התקנה שמוסתר כברירת מחדל.

האזנה לאירוע beforeinstallprompt

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

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

  1. לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
  2. מוסיפים handler של אירועים beforeinstallprompt לאובייקט window.
  3. לשמור את event כמשתנה גלובלי. נזדקק לו מאוחר יותר כדי להראות .
  4. מבטלים את ההסתרה של לחצן ההתקנה.

קוד:

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the mini-infobar from appearing on mobile.
  event.preventDefault();
  console.log('👍', 'beforeinstallprompt', event);
  // Stash the event so it can be triggered later.
  window.deferredPrompt = event;
  // Remove the 'hidden' class from the install button container.
  divInstall.classList.toggle('hidden', false);
});

טיפול בלחיצה על לחצן ההתקנה

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

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

קוד:

butInstall.addEventListener('click', async () => {
  console.log('👍', 'butInstall-clicked');
  const promptEvent = window.deferredPrompt;
  if (!promptEvent) {
    // The deferred prompt isn't available.
    return;
  }
  // Show the install prompt.
  promptEvent.prompt();
  // Log the result
  const result = await promptEvent.userChoice;
  console.log('👍', 'userChoice', result);
  // Reset the deferred prompt variable, since
  // prompt() can only be called once.
  window.deferredPrompt = null;
  // Hide the install button.
  divInstall.classList.toggle('hidden', true);
});

מעקב אחר אירוע ההתקנה

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

  1. מוסיפים handler של אירועים appinstalled לאובייקט window.
  2. לתעד את אירוע ההתקנה ב-Analytics או במנגנון אחר.

קוד:

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

קריאה נוספת

מזל טוב, האפליקציה שלך מותקנת עכשיו.

ריכזנו כאן כמה פעולות נוספות שאפשר לבצע: