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

Pete LePage

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

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

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

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

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

קידום ההתקנה

כדי להראות שאפשר להתקין את אפליקציית ה-PWA שלכם, ולספק תהליך התקנה מותאם אישית באפליקציה:

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.

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

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

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

// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
  // Log display mode change to analytics
  console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});

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

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

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

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

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