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

Pete LePage

פורסם: 14 בפברואר 2020

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

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

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

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

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

קידום התקנה

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

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

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

אם אפליקציית האינטרנט המתקדמת עומדת בקריטריונים הנדרשים להתקנה, הדפדפן מפעיל אירוע 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.