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

Pete LePage

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

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

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

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

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

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

קוד:

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

קריאה נוספת

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

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

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