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

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.