איך להגדיר את אסטרטגיית ההתקנה

Demián Renzulli
Demián Renzulli
X GitHub
Pete LePage

פורסם: 12 במאי 2020

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

יש כמה דרכים לעשות את זה:

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

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

למה כדאי לאפשר התקנה של אפליקציית האינטרנט?

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

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

  • מגבלות אחסון: יכול להיות שהתקנה של אפליקציה חדשה תדרוש מחיקה של אפליקציות אחרות, או פינוי מקום על ידי הסרת תוכן חשוב. הבעיה הזו משמעותית במיוחד למשתמשים במכשירים ברמת כניסה.
  • רוחב פס זמין: הורדה של אפליקציה יכולה להיות תהליך יקר ואיטי, במיוחד למשתמשים עם חיבורים איטיים וחבילות גלישה יקרות.
  • תסכולים: כשמשתמש עוזב אתר ועובר לחנות כדי להוריד אפליקציה, הוא חווה תסכולים נוספים ועיכובים בביצוע פעולה שאפשר לבצע ישירות באינטרנט.
  • מחזור עדכונים: כדי לבצע שינויים באפליקציות שספציפיות לפלטפורמה מסוימת, יכול להיות שיהיה צורך לעבור תהליך בדיקה של האפליקציה, מה שעלול להאט את השינויים והניסויים (כמו בדיקות A/B).

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

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

קידום ההתקנה של PWA בדפדפן

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

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

PWA כחוויית התקנה ראשונית

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

ההנחיה הרגילה להתקנת Chrome נקראת סרגל מידע קטן.

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

איך מונעים מאפליקציית PWA לפגוע בשיעור ההתקנות של אפליקציה ספציפית לפלטפורמה

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

השלב הראשון בהטמעה של האסטרטגיה הזו הוא להגדיר היוריסטיקה שתקבע מתי להציג למשתמש קידום התקנה של ה-PWA.

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

אפשר להטמיע את ההיוריסטיקה באופן הבא:

  1. הצגת באנר להתקנת אפליקציה שספציפי לפלטפורמה.
  2. אם משתמש סוגר את הבאנר, צריך להגדיר קובץ Cookie עם המידע הזה (למשל, document.cookie = "app-install-banner=dismissed").
  3. שימוש בקובץ Cookie אחר כדי לעקוב אחרי מספר הביקורים של המשתמש באתר (לדוגמה, document.cookie = "user-visits=1").
  4. כותבים פונקציה, כמו isPWAUser(), שמשתמשת במידע שאוחסן קודם בקובצי ה-Cookie יחד עם getInstalledRelatedApps() API כדי לקבוע אם משתמש נחשב למשתמש ב-PWA.
  5. כשמשתמש מבצע פעולה משמעותית, קוראים לפונקציה isPWAUser(). אם הפונקציה מחזירה true וההנחיה להתקנת ה-PWA נשמרה בעבר, אפשר להציג את לחצן ההתקנה של ה-PWA.

קידום ההתקנה של אפליקציית PWA בחנות אפליקציות

אפשר ליצור אפליקציות לחנות האפליקציות באמצעות מגוון טכנולוגיות, כולל טכניקות של PWA. במאמר Blending PWA into native environments (שילוב של אפליקציות PWA בסביבות מקוריות) מופיע סיכום של הטכנולוגיות שאפשר להשתמש בהן למטרה הזו.

אפשר לחלק את האפליקציות בחנות לשתי קבוצות:

  • אפליקציות ספציפיות לפלטפורמה: האפליקציות האלה מבוססות בעיקר על קוד ספציפי לפלטפורמה. גודל האפליקציה תלוי בפלטפורמה, אבל בדרך כלל הוא יותר מ-10MB ב-Android ו-30MB ב-iOS. אולי כדאי לכם לקדם את האפליקציה הספציפית לפלטפורמה אם אין לכם PWA, או אם האפליקציה הספציפית לפלטפורמה כוללת קבוצה מלאה יותר של תכונות.
  • אפליקציות קלות משקל: אפשר ליצור את האפליקציות האלה גם באמצעות קוד ספציפי לפלטפורמה, אבל בדרך כלל הן נוצרות באמצעות טכנולוגיית אינטרנט, וארוזות במעטפת ספציפית לפלטפורמה. אפשר גם להעלות לחנות אפליקציות PWA מלאות. חלק מהחברות בוחרות לספק את האפליקציות האלה כגרסאות 'לייט', וחברות אחרות משתמשות בגישה הזו גם באפליקציות הדגל (הליבה) שלהן.

קידום אפליקציות קלות משקל

על פי מחקר של Google Play, עם כל עלייה של 6MB בגודל של קובץ APK, שיעור ההמרה של ההתקנות יורד ב-1%. המשמעות היא ששיעור השלמת ההורדה של אפליקציה בגודל 10MB יכול להיות גבוה בכ-30% משיעור השלמת ההורדה של אפליקציה בגודל 100MB.

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

חברת Oyo, אחת מחברות האירוח הגדולות בהודו, יצרה גרסה Lite של האפליקציה שלה והעלתה אותה לחנות Play באמצעות TWA. נכון למאי 2020, אפליקציית האינטרנט של Oyo הייתה בגודל של 850KB בלבד, שהם 7% מגודל אפליקציית Android שלהם. אחרי ההתקנה, אי אפשר להבחין בינה לבין אפליקציית Android שלהם:

OYO Lite בפעולה.

חברת Oyo השאירה בחנות גם את גרסת הדגל וגם את הגרסה 'לייט' של האפליקציה, כדי לאפשר למשתמשים לבחור.

יצירת חוויית משתמש קלה ומהירה באינטרנט

באופן אינטואיטיבי, משתמשים במכשירים פשוטים יותר עשויים להיות יותר מוכנים להוריד גרסאות קלות של אפליקציות מאשר משתמשים בטלפונים מתקדמים. לכן, אם אפשר לזהות את המכשיר של המשתמש, אפשר לתת עדיפות לבאנר להתקנת האפליקציה הקלה יותר על פני גרסת האפליקציה הכבדה יותר שספציפית לפלטפורמה.

באינטרנט, אפשר לקבל אותות מהמכשיר ולמפות אותם בקירוב לקטגוריות של מכשירים (כמו 'גבוה', 'בינוני' או 'נמוך'). אפשר לקבל את המידע הזה בדרכים שונות, באמצעות ממשקי API של JavaScript או רמזים ללקוח.

שימוש ב-JavaScript

בעזרת מאפייני JavaScript, כמו navigator.hardwareConcurrency,‏ navigator.deviceMemory ו-navigator.connection, אפשר לקבל מידע על המעבד, הזיכרון וסטטוס הרשת של המכשיר, בהתאמה. לדוגמה:

const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`

שימוש ברמזים על הלקוח (Client Hints)

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

  1. אומרים לדפדפן שרוצים לקבל רמזים לגבי זיכרון המכשיר בכותרת של תגובת ה-HTTP לכל בקשה מאינטראקציה ישירה (First-Party):

    HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory

  2. תתחילו לקבל מידע על Device-Memory בכותרת הבקשה של בקשות HTTP:

    GET /main.js HTTP/1.1
Device-Memory: 0.5

  3. אפשר להשתמש במידע הזה בשרתי הקצה העורפיים כדי לאחסן קובץ Cookie עם הקטגוריה של מכשיר המשתמש:

    app.get('/route', (req, res) => {
  // Determine device category

const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';

  // Set cookie
  res.setCookie('Device-Category', deviceCategory);
  …
});

  4. אתם יכולים ליצור לוגיקה משלכם למיפוי המידע הזה לקטגוריות של מכשירים, ולהציג את ההנחיה המתאימה להתקנת האפליקציה בכל מקרה:

    if (isDeviceMidOrLowEnd()) {
  // show "Lite app" install banner or PWA A2HS prompt
} else {
  // show "Core app" install banner
}

אפשר למשתמשים להתקין את האפליקציה שלכם, לא משנה באיזו פלטפורמה הם משתמשים

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

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