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

Pete LePage

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

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

הלחצן 'התקנת האפליקציה' שמופיע ב-PWA של Spotify

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

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

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

קידום ההתקנה

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

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

הערה: האירוע beforeinstallprompt והאירוע appinstalled הועברו ממפרט המניפסט של אפליקציית אינטרנט לאינקובטור משלהם. הצוות של Chrome ממשיך להיות מחויב לתמיכה בהם, ואינו מתכננים להסיר את התמיכה או להוציא אותה משימוש. צוות פיתוח אתרי האינטרנט של Google ממשיך להשתמש בהם כדי לספק חוויית התקנה מותאמת אישית.

האזנה לאירוע 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.

אני רוצה לנסות: מגדירים אתר שאפשר להתקין באמצעות האירוע beforeinstallprompt.

זיהוי אם PWA הותקנה בהצלחה

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

שאילתת המדיה של CSS display-mode מציינת איך ה-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.