בעבר, ניתן היה להתקין אפליקציות רק בהקשר של אפליקציות ספציפיות לפלטפורמה. כיום, אפליקציות אינטרנט מודרניות מציעות חוויות ניתנות להתקנה שמספקות אותה רמה של שילוב ואמינות כמו אפליקציות ספציפיות לפלטפורמה.
יש כמה דרכים לעשות את זה:
- מתקינים את ה-PWA מהדפדפן.
- מתקינים את ה-PWA מחנות האפליקציות.
ערוצי הפצה שונים הם דרך יעילה להגיע למספר רחב של משתמשים, אבל הבחירה של האסטרטגיה הנכונה לקידום ההתקנה של ה-PWA יכולה להיות מאתגרת.
מדריך זה בוחן שיטות מומלצות לשילוב אפשרויות התקנה שונות כדי להגדיל את שיעורי ההתקנה ולהימנע מהתחרות בפלטפורמה ומקניבליזציה. הצעות ההתקנה שכלולות כוללות אפליקציות PWA שהותקנו גם מהדפדפן וגם מ-App Store, וגם מאפליקציות ספציפיות לפלטפורמה.
למה כדאי להתאים את אפליקציית האינטרנט שלך להתקנה?
אפליקציות מסוג Progressive Web App מותקנות בחלון נפרד, במקום בכרטיסייה בדפדפן. אפשר להפעיל אותם ממסך הבית, מאביזר העגינה, משורת המשימות או מהמדף של המשתמש. אפשר לחפש אותם במכשיר ולעבור ביניהם באמצעות מחליף האפליקציות, כדי לגרום להם להרגיש כמו חלק מהמכשיר שבו הם מותקנים.
עם זאת, גם אפליקציית אינטרנט להתקנה וגם אפליקציה ספציפית לפלטפורמה ספציפית יכולה לבלבל את המשתמשים. יכול להיות שאפליקציות ספציפיות לפלטפורמה של משתמשים מסוימות הן הבחירה הטובה ביותר, אבל לאחרים עשויות להיות להן כמה חסרונות:
- אילוצי אחסון: התקנת אפליקציה חדשה יכולה למחוק אפליקציות אחרות או לפנות מקום על ידי הסרת תוכן חשוב. הדבר פוגע במיוחד במשתמשים במכשירים מתקדמים.
- רוחב פס זמין: הורדת אפליקציה יכולה להיות תהליך יקר ואיטי, ואפילו יותר מכך למשתמשים עם חיבורים איטיים ותוכניות נתונים יקרות.
- חיכוך: יציאה מהאתר ומעבר לחנות כדי להוריד אפליקציה יוצרת חיכוך נוסף ומעכבת פעולת משתמש שניתן לבצע ישירות באתר.
- מחזור עדכונים: ביצוע שינויים באפליקציות ספציפיות לפלטפורמה עשוי לדרוש תהליך של בדיקת אפליקציה, שעלול להאט את השינויים והניסויים (לדוגמה, בדיקות A/B).
במקרים מסוימים, אחוז המשתמשים שלא יורידו את האפליקציה הספציפית לפלטפורמה שלך עשוי להיות גדול, למשל: אלה שחושבים שלא ישתמשו באפליקציה לעיתים קרובות, או שלא יכולים להצדיק הוצאה של כמה מגה-בייט של אחסון או נתונים. יש כמה דרכים לקבוע את גודל הפלח. לדוגמה, ניתן להשתמש בהגדרת ניתוח נתונים כדי לעקוב אחר אחוז המשתמשים ב'אינטרנט לנייד בלבד'.
אם גודל הפלח הזה משמעותי, זה סימן טוב שצריך לספק דרכים חלופיות להתקנת החוויות שלכם.
קידום התקנת ה-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, או אם האפליקציה הספציפית לפלטפורמה כוללת קבוצת תכונות מלאה יותר.
- אפליקציות קלות: אפשר לפתח את האפליקציות האלה גם באמצעות קוד ספציפי לפלטפורמה, אבל בדרך כלל הן נוצרות באמצעות טכנולוגיית אינטרנט, והן ארוזות ב-wrapper ספציפי לפלטפורמה. אפשר גם להעלות לחנויות אפליקציות PWA מלאות. (נושא זה נדון בהמשך במאמר זה.) יש חברות שמחליטות לספק אותן כחוויות Lite, ויש חברות אחרות שמנסות להשתמש בגישה הזו גם באפליקציות הדגל (הליבה) שלהן.
קידום אפליקציות קלות
לפי מחקר של Google Play, כל 6MB שגדל אל גודל חבילת ה-APK יורד ב-1%. כלומר, שיעור השלמת ההורדה של אפליקציה בנפח 10MB עשוי להיות גבוה ב-30% משיעור השלמת ההורדה של אפליקציה של 100MB!
כדי לפתור את הבעיה, חלק מהחברות משתמשות ב-PWA כדי לספק גרסה קלילה של האפליקציה שלהן בחנות Play באמצעות Trusted Web Activity (TWA). מכשירי TWA עוטפים את ה-PWA ברכיב כמו WebView, וגודל האפליקציה שמתקבל הוא בדרך כלל רק מגה-בייט אחדים.
אויו, אחת מחברות האירוח הגדולות בהודו, בנתה גרסת 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 למסך הבית על ידי הנחיית המשתמשים לעשות זאת ישירות מהאתר.