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

Pete LePage

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

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

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

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

לפני שמתחילים, חשוב לוודא שה-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.

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.