איך לספק חוויה משלכם להתקנת האפליקציה

Pete LePage

דפדפנים רבים מאפשרים להפעיל ולקדם את ההתקנה של Progressive Web App (PWA) ישירות בממשק המשתמש. התקנה (נקראת בעבר 'הוספה למסך הבית') מאפשרת למשתמשים להתקין את ה-PWA בנייד או במחשב. התקנת PWA מוסיפה אותה במרכז האפליקציות כדי שהוא יוכל לפעול כמו כל אפליקציה מותקנת אחרת.

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

כאשר שוקלים אם לקדם את ההתקנה, חשוב להביא בחשבון את האופן שבו המשתמשים בדרך כלל להשתמש ב-PWA. לדוגמה, אם קבוצה של משתמשים משתמשת ב-PWA שלכם, פעמים בשבוע, המשתמשים האלה יכולים להפיק תועלת מהנוחות הנוספת להפעיל את האפליקציה ממסך הבית של הטלפון או מתפריט ההתחלה במחשב מערכת ההפעלה. גם אפליקציות מסוימות לפרודוקטיביות ובידור מועילה משטח המסך הנוסף שנוצר על ידי הסרת סרגלי הכלים של הדפדפן חלון במצב standalone או minimal-ui מותקנים.

דרישות מוקדמות

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

קידום ההתקנה

כדי להראות שניתן להתקין את Progressive Web App וכדי לספק תהליך ההתקנה בתוך האפליקציה:

1. האזנה לאירוע beforeinstallprompt.
2. שמירת האירוע beforeinstallprompt כדי שיוכל להפעיל את תהליך ההתקנה מאוחר יותר.
3. להודיע למשתמש שאפשר להתקין את ה-PWA, ולספק לחצן או אפשרות אחרת כדי להתחיל את תהליך ההתקנה בתוך האפליקציה.

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

אם ה-Progressive Web App שלכם עומדת בקריטריונים להתקנה הנדרשים, הדפדפן מפעיל אירוע beforeinstallprompt. שמור הפניה לאירוע, ולעדכן את ממשק המשתמש כדי לציין שהמשתמש יכול להתקין את ה-PWA.

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
  // Optionally, send analytics event that PWA install promo was shown.
  console.log(`'beforeinstallprompt' event was fired.`);
});

תהליך התקנה בתוך האפליקציה

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

buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

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

זיהוי מתי ה-PWA הותקנה

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

window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});

זיהוי האופן שבו אפליקציית PWA הופעלה

שאילתת המדיה display-mode של CSS מציינת איך ה-PWA הושקה, כרטיסייה בדפדפן או כ-PWA מותקנת. כך אפשר להחיל סגנונות בהתאם לאופן שבו האפליקציה הופעלה. לדוגמה, אפשר להגדיר אותו כדי להסתיר תמיד את לחצן ההתקנה ולספק לחצן 'הקודם' כאשר הוא מופעל מותקנת PWA.

מעקב אחרי אופן ההשקה של PWA

כדי לעקוב אחרי האופן שבו המשתמשים מפעילים את ה-PWA, צריך להשתמש ב-matchMedia() כדי לבדוק את שאילתת מדיה display-mode. האפשרות הזו עדיין לא נתמכת ב-Safari ב-iOS, לכן לבדוק את הערך navigator.standalone, שמחזיר ערך בוליאני שמציין הדפדפן פועל במצב עצמאי.

function getPWADisplayMode() {
  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
  if (document.referrer.startsWith('android-app://')) {
    return 'twa';
  } else if (navigator.standalone || isStandalone) {
    return 'standalone';
  }
  return 'browser';
}

מעקב אחרי שינויים במצב התצוגה

כדי לבדוק אם המשתמש משתנה בין standalone ל-browser tab, צריך להאזין ל שינויים בשאילתת המדיה display-mode.

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
  let displayMode = 'browser';
  if (evt.matches) {
    displayMode = 'standalone';
  }
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', displayMode);
});

עדכון ממשק המשתמש על סמך מצב התצוגה הנוכחי

כדי להחיל צבע רקע אחר של PWA כשהיא מופעלת כהתקנה PWA, שימוש ב-CSS מותנה:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

עדכון הסמל והשם של האפליקציה

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