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

פיט לה פייג'

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

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

האזנה לאירוע 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. רישום אירוע ההתקנה בניתוח או במנגנון אחר.

קוד:

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

קריאה נוספת

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

יש עוד כמה דברים שאפשר לעשות:

• זיהוי אם האפליקציה מופעלת ממסך הבית
• הצגת ההודעה של מערכת ההפעלה להתקנת אפליקציה