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

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

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

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

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

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

  1. לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.
  2. מוסיפים לטפל באירועים מסוג 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() בטיפול בקליק על לחצן ההתקנה, כי צריך לבצע קריאה ל-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;
});

קריאה נוספת

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

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