בעבר, אפשר היה להתקין אפליקציות רק בהקשר של אפליקציות ספציפיות לפלטפורמה. כיום, אפליקציות אינטרנט מודרניות מציעות חוויות התקנה שמספקות את אותה רמת שילוב ואמינות כמו אפליקציות ספציפיות לפלטפורמה.
יש כמה דרכים לעשות זאת:
- התקנת ה-PWA מהדפדפן.
- התקנת ה-PWA מחנות האפליקציות.
ערוצי הפצה שונים הם דרך מצוינת להגיע למספר גדול של משתמשים, אבל בחירת האסטרטגיה המתאימה לקידום התקנת ה-PWA יכולה להיות מאתגרת.
במדריך הזה מפורטות שיטות מומלצות לשילוב בין אפשרויות התקנה שונות כדי להגדיל את קצב ההתקנה ולמנוע תחרות על הפלטפורמה וקניבליזציה. חבילות ההתקנה שתקבלו כוללות אפליקציות PWA שהותקנו מהדפדפן ומ-App Store, וגם אפליקציות ספציפיות לפלטפורמה.
למה כדאי להפוך את אפליקציית האינטרנט לניתנת להתקנה?
אפליקציות מסוג Progressive Web App מותקנות פועלות בחלון נפרד במקום בכרטיסייה בדפדפן. אפשר להפעיל אותן ממסך הבית, ממגש האפליקציות, משורת המשימות או מהמדף של המשתמש. אפשר לחפש אותן במכשיר ולעבור ביניהם באמצעות מחליף האפליקציות, כך שהן ייראו כחלק מהמכשיר שבו הן מותקנות.
עם זאת, השימוש באפליקציית אינטרנט שניתנת להתקנה וגם באפליקציה ספציפית לפלטפורמה יכול לבלבל את המשתמשים. יכול להיות שעדיף להשתמש באפליקציות ספציפיות לפלטפורמה של משתמשים מסוימים, אבל למשתמשים אחרים יכולות להיות חסרונות מסוימים:
- מגבלות אחסון: התקנת אפליקציה חדשה עשויה לחייב מחיקת אפליקציות אחרות, או פינוי מקום באחסון על ידי הסרת תוכן חשוב. האפשרות הזו פוגעת במיוחד למשתמשים במכשירים פשוטים.
- רוחב פס זמין: הורדת אפליקציה יכולה להיות תהליך יקר ואיטי, חשוב יותר למשתמשים שמחוברים לחיבורים איטיים ולתוכניות נתונים יקרות.
- העברת מידע לאפליקציה: יציאה מהאתר ומעבר לחנות כדי להוריד את האפליקציה יוצרת חיכוך נוסף ומעכבת פעולה של משתמש שניתן לבצע ישירות באינטרנט.
- מחזור עדכון: ביצוע שינויים באפליקציות ספציפיות לפלטפורמה מצריך מעבר של תהליך בדיקת אפליקציה, שעשוי להאט את השינויים והניסויים (לדוגמה, בדיקות A/B).
במקרים מסוימים, אחוז המשתמשים שלא יורידו את האפליקציה הספציפית לפלטפורמה שלך עשוי להיות גדול, למשל: משתמשים שחושבים שהם לא ישתמשו באפליקציה לעיתים קרובות, או שלא יכולים להצדיק הוצאה של כמה מגה-בייט של אחסון או נתונים. אפשר לקבוע את גודל הפלח הזה במספר דרכים, למשל על ידי שימוש בהגדרת Analytics למעקב אחר אחוז המשתמשים ב'אינטרנט לנייד בלבד'.
אם גודל הפלח הזה משמעותי, זו אינדיקציה טובה לכך שאתם צריכים לספק דרכים חלופיות להתקנה של חוויות השימוש שלכם.
קידום ההתקנה של אפליקציית ה-PWA דרך הדפדפן
אם יש לכם PWA באיכות גבוהה, יכול להיות שעדיף לקדם את ההתקנה שלה על פני האפליקציה הספציפית לפלטפורמה שלכם. לדוגמה, אם באפליקציה הספציפית לפלטפורמה חסרה פונקציונליות שה-PWA מציעה, או אם היא לא עודכנה במשך זמן מה. כדאי גם לקדם את התקנת אפליקציית ה-PWA אם האפליקציה הספציפית לפלטפורמה לא הותאמה למסכים גדולים יותר, כמו ב-ChromeOS.
בחלק מהאפליקציות, נהיגה בהתקנות של אפליקציות ספציפיות לפלטפורמה היא חלק מרכזי מהמודל העסקי. במקרה כזה, הגיוני לקדם התקנה של אפליקציה ספציפית לפלטפורמה. עם זאת, חלק מהמשתמשים מעדיפים להישאר באינטרנט. אם אפשר לזהות את הפלח הזה, אפשר להציג את ההצעה לפעולה מסוג PWA רק לו (מה שאנחנו קוראים לו PWA כחלופה).
PWA כחוויית ההתקנה הראשית
אחרי ש-PWA עומד בקריטריונים לאפשרות ההתקנה, ברוב הדפדפנים מוצגת אינדיקציה לכך שאפשר להתקין את ה-PWA. לדוגמה, ב-Chrome למחשב מוצג סמל להתקנה בסרגל הכתובות, ובנייד מוצגת סרגל מידע מיניאטורי:
זה אומנם יספיק לחלק מהחוויות, אבל אם המטרה שלכם היא לעודד התקנות של ה-PWA, מומלץ מאוד להאזין ל-BeforeInstallPromptEvent ולפעול בהתאם לדפוסים לקידום ההתקנה של ה-PWA.
מניעת קניבליזציה של האפליקציה ל-PWA על ידי שיעור ההתקנות של האפליקציה הספציפית לפלטפורמה
במקרים מסוימים, יכול להיות שתבחרו לקדם את התקנת האפליקציה הספציפית לפלטפורמה במקום את ה-PWA, אבל גם במקרה כזה מומלץ לספק מנגנון שיאפשר למשתמשים להתקין את ה-PWA. אפשרות הגיבוי הזו מאפשרת למשתמשים שלא יכולים או לא רוצים להתקין את האפליקציה הספציפית שלך לפלטפורמה, וכך ליהנות מחוויית התקנה דומה.
השלב הראשון ביישום האסטרטגיה הזו הוא להגדיר שיטה היוריסטית לגבי המועד שבו מציגים למשתמש קידום התקנה של ה-PWA.
לדוגמה: משתמש ב-PWA הוא משתמש שראה את ההודעה להתקנת האפליקציה הספציפית לפלטפורמה ולא התקנן את האפליקציה הספציפית לפלטפורמה. הוא חזר לאתר לפחות חמש פעמים, או שהוא לחץ על הבאנר של האפליקציה אבל המשיך להשתמש באתר במקום זאת.
לאחר מכן, אפשר להטמיע את ההוראה ההיוריסטית באופן הבא:
- הצגת הבאנר להתקנת האפליקציה הספציפית לפלטפורמה.
- אם משתמש סוגר את הבאנר, צריך להגדיר קובץ Cookie עם המידע הזה (למשל
document.cookie = "app-install-banner=dismissed"). - יש להשתמש בקובץ Cookie אחר כדי לעקוב אחר מספר הביקורים של משתמשים באתר (למשל,
document.cookie = "user-visits=1"). - כותבים פונקציה, כמו
isPWAUser(), שמשתמשת במידע שנשמר בעבר בקובצי ה-cookie יחד עם ה-API שלgetInstalledRelatedApps()כדי לקבוע אם משתמש נחשב כ'משתמש ב-PWA'. - כשהמשתמש מבצע פעולה משמעותית, צריך לבצע קריאה ל-
isPWAUser(). אם הפונקציה מחזירה את הערך True ובקשת ההתקנה של PWA נשמרה בעבר, אפשר להציג את לחצן ההתקנה של PWA.
קידום ההתקנה של אפליקציית ה-PWA דרך חנות אפליקציות
אפשר ליצור אפליקציות לחנויות אפליקציות באמצעות טכנולוגיות שונות, כולל שיטות PWA. במאמר שילוב אפליקציות 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. כשהמאמר הזה נכתב, אפליקציית Oyo הייתה בגודל 850KB בלבד, רק 7% בגודל האפליקציה ל-Android. לאחר ההתקנה, לא ניתן היה להבחין בינה לבין האפליקציה ל-Android:
ב-Oyo שמרו בחנות גם את גרסת האפליקציה הראשית וגם את הגרסה 'Lite', כדי לתת למשתמשים אפשרות בחירה.
חוויית שימוש קלה באינטרנט
באופן אינטואיטיבי, משתמשים במכשירים ברמה נמוכה עשויים להיות נוטים יותר להוריד גרסאות קלילות של אפליקציות מאשר משתמשים בטלפונים מתקדמים. לכן, אם אפשר לזהות את המכשיר של המשתמש, אפשר לתת עדיפות לבאנר להתקנת האפליקציה הקלה יותר על פני גרסת האפליקציה הכבדה יותר שספציפית לפלטפורמה.
באינטרנט, ניתן לקבל אותות ממכשירים ולמפות אותם בקירוב לקטגוריות מכשירים (למשל 'גבוה', 'mid' או 'נמוך'). תוכלו לקבל את המידע הזה בדרכים שונות, באמצעות ממשקי API של JavaScript או בעזרת רמזים של לקוחות.
שימוש ב-JavaScript
באמצעות מאפייני JavaScript כמו navigator.hardwareConcurrency, navigator.deviceMemory ו-navigator.connection, אפשר לקבל מידע על המעבד (CPU), הזיכרון וסטטוס הרשת של המכשיר, בהתאמה. לדוגמה:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
שימוש ברמזים של לקוחות
אפשר להסיק אותות של המכשיר גם מכותרות של בקשות HTTP, באמצעות רמזים ללקוח. כך מטמיעים את הקוד הקודם לזיכרון המכשיר באמצעות רמזים ללקוחות:
קודם כול, צריך להודיע לדפדפן שאתם מעוניינים לקבל רמזים לגבי זיכרון המכשיר בכותרת של תגובת ה-HTTP לכל בקשה מצד ראשון:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
לאחר מכן, תתחילו לקבל מידע על Device-Memory בכותרת הבקשה של בקשות HTTP:
GET /main.js HTTP/1.1
Device-Memory: 0.5
אתם יכולים להשתמש במידע הזה בקצוות העורפי כדי לאחסן קובץ 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);
…
});
לבסוף, יוצרים לוגיקה משלכם כדי למפות את המידע הזה לקטגוריות של מכשירים, ולהציג את ההודעה המתאימה להתקנת האפליקציה בכל מקרה:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
סיכום
היכולת להציג סמל במסך הבית של המשתמש היא אחת מהתכונות המעניינות ביותר באפליקציות. מאחר שבעבר אפשר היה לעשות זאת רק לאפליקציות שהותקנו מחנויות אפליקציות, חברות עשויות לחשוב שהצגת באנר להתקנה בחנות האפליקציות תספיק כדי לשכנע משתמשים להתקין את החוויה שלהן. בשלב הזה יש יותר אפשרויות לאפשר למשתמשים להתקין אפליקציה, כולל הצעת חוויות שימוש קלילות באפליקציות בחנויות, והאפשרות לאפשר למשתמשים להוסיף אפליקציות ל-PWA למסך הבית על ידי הצגת בקשה לעשות זאת ישירות מהאתר.