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

Pete LePage

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

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

האזנה לאירוע 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. מוסיפים טיפול באירוע לחיצה על לחצן ההתקנה.
  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;
});

קריאה נוספת

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

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