בעבר, אפשר היה להתקין אפליקציות רק בהקשר של אפליקציות ספציפיות לפלטפורמה. כיום, אפליקציות אינטרנט מודרניות מציעות חוויות ניתנות להתקנה שמספקות את אותה רמת שילוב ואמינות כמו אפליקציות ספציפיות לפלטפורמה.
יש כמה דרכים לעשות זאת:
- התקנת ה-PWA מהדפדפן.
- התקנת אפליקציית ה-PWA מחנות האפליקציות.
שימוש בערוצי הפצה שונים הוא דרך יעילה להגיע למספר גדול של משתמשים, אבל בחירת האסטרטגיה הנכונה לקידום ההתקנה של אפליקציית ה-PWA יכולה להיות מאתגרת.
במדריך הזה נסביר על שיטות מומלצות לשילוב בין אפשרויות התקנה שונות כדי להגדיל את שיעורי ההתקנה ולהימנע מתחרות בין פלטפורמות ומקניבאליזם. חבילות ההתקנה שתקבלו כוללות אפליקציות PWA שהותקנו מהדפדפן ומ-App Store, וגם אפליקציות ספציפיות לפלטפורמה.
למה כדאי להפוך את אפליקציית האינטרנט לניתנת להתקנה?
אפליקציות Progressive Web Apps מותקנות פועלות בחלון נפרד במקום בכרטיסייה בדפדפן. אפשר להפעיל אותם ממסך הבית, ממסוף הטעינה, מסרגל האפליקציות או מהמדף של המשתמש. אפשר לחפש אותן במכשיר ולעבור ביניהם באמצעות מחליף האפליקציות, כך שהן ייראו כחלק מהמכשיר שבו הן מותקנות.
עם זאת, אם יש לכם גם אפליקציית אינטרנט שניתן להתקין וגם אפליקציה ספציפית לפלטפורמה, המשתמשים עשויים להתבלבל. לחלק מהמשתמשים, אפליקציות ספציפיות לפלטפורמה הן הבחירה הטובה ביותר, אבל לחלק אחר הן יכולות להציג כמה חסרונות:
- מגבלות אחסון: התקנת אפליקציה חדשה עשויה לחייב מחיקת אפליקציות אחרות, או פינוי מקום על ידי הסרת תוכן חשוב. המצב הזה פחות נוח במיוחד למשתמשים במכשירים ברמה נמוכה.
- רוחב הפס הזמין: הורדת אפליקציה יכולה להיות תהליך יקר ואיטי, במיוחד למשתמשים עם חיבורים איטיים וחבילות גלישה יקרות.
- חיכוך: עזיבת אתר והעברה לחנות כדי להוריד אפליקציה יוצרים חיכוך נוסף ומעכבים פעולה של משתמש שאפשר לבצע ישירות באינטרנט.
- מחזור עדכונים: כדי לבצע שינויים באפליקציות ספציפיות לפלטפורמה, יכול להיות שתצטרכו לעבור תהליך בדיקה של האפליקציה. התהליך הזה עלול להאט את השינויים והניסויים (למשל, בדיקות A/B).
במקרים מסוימים, אחוז המשתמשים שלא יורידו את האפליקציה הספציפית לפלטפורמה עשוי להיות גבוה. לדוגמה: משתמשים שסבורים שהם לא ישתמשו באפליקציה לעיתים קרובות, או משתמשים שלא רוצים להשתמש בכמה מגה-בייט של שטח אחסון או נתונים. אפשר לקבוע את הגודל של הפלח הזה בכמה דרכים, למשל באמצעות הגדרת ניתוח נתונים כדי לעקוב אחרי אחוז המשתמשים בקטגוריה 'אתר לנייד בלבד'.
אם הגודל של הקטע הזה גדול, זה סימן טוב לכך שאתם צריכים לספק דרכים חלופיות להתקנת הממשקים שלכם.
קידום ההתקנה של אפליקציית ה-PWA דרך הדפדפן
אם יש לכם אפליקציית PWA באיכות גבוהה, יכול להיות שתעדיפו לקדם את ההתקנה שלה במקום את האפליקציה הספציפית לפלטפורמה. לדוגמה, אם באפליקציה הספציפית לפלטפורמה חסרה פונקציונליות שקיימת באפליקציית ה-PWA, או אם היא לא עודכנה כבר זמן מה. כדאי גם לקדם את התקנת אפליקציית ה-PWA אם האפליקציה הספציפית לפלטפורמה לא הותאמה למסכים גדולים יותר, כמו ב-ChromeOS.
באפליקציות מסוימות, הגדלת מספר ההתקנות של אפליקציות ספציפיות לפלטפורמה היא חלק מרכזי במודל העסקי. במקרה כזה, כדאי לקדם את ההתקנה של האפליקציה הספציפית לפלטפורמה. עם זאת, יכול להיות שלמשתמשים מסוימים יהיה נוח יותר להישאר באינטרנט. אם ניתן לזהות את הפלח הזה, ההודעה לגבי אפליקציית ה-PWA יכולה להופיע רק עבורו (מה שאנחנו מכנים 'אפליקציית PWA כחלופה').
PWA כחוויית השימוש הראשית שניתן להתקין
אחרי ש-PWA עומד בקריטריונים לאפשרות ההתקנה, ברוב הדפדפנים מוצגת אינדיקציה לכך שאפשר להתקין את ה-PWA. לדוגמה, ב-Chrome למחשב מוצג סמל להתקנה בסרגל הכתובות, ובנייד מוצגת סרגל מידע מיניאטורי:
יכול להיות שזה מספיק לחלק מהחוויות, אבל אם המטרה שלכם היא להגדיל את מספר ההתקנות של אפליקציית ה-PWA, מומלץ מאוד להקשיב לאירוע BeforeInstallPromptEvent ולפעול בהתאם לדפוסים לקידום ההתקנה של אפליקציית ה-PWA.
מניעת קניבליזציה של האפליקציה ל-PWA על ידי שיעור ההתקנות של האפליקציה הספציפית לפלטפורמה
במקרים מסוימים, יכול להיות שתבחרו לקדם את התקנת האפליקציה הספציפית לפלטפורמה במקום את ה-PWA, אבל גם במקרה כזה מומלץ לספק מנגנון שיאפשר למשתמשים להתקין את ה-PWA. אפשרות החזרה הזו מאפשרת למשתמשים שלא יכולים או לא רוצים להתקין את האפליקציה הספציפית לפלטפורמה שלכם ליהנות מחוויה דומה שמותקנת במכשיר.
השלב הראשון בהטמעת האסטרטגיה הזו הוא להגדיר שיטת ניתוח (heuristic) לקביעת המועד שבו תציגו למשתמש קידום מכירות להתקנה של אפליקציית ה-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, אחת מחברות האירוח הגדולות בהודו, יצרה גרסה רגילה של האפליקציה והפכה אותה לזמינה בחנות Play באמצעות TWA. בזמן כתיבת המאמר, אפליקציית Oyo הייתה בגודל של 850KB בלבד, רק 7% מהגודל של אפליקציית Android שלה. אחרי ההתקנה, אי אפשר להבחין בהבדל בינה לבין אפליקציית Android:
ב-Oyo שמרו בחנות גם את גרסת האפליקציה הראשית וגם את הגרסה 'Lite', כדי לתת למשתמשים אפשרות בחירה.
חוויית שימוש קלה באינטרנט
באופן אינטואיטיבי, משתמשים במכשירים ברמה נמוכה עשויים להיות נוטים יותר להוריד גרסאות קלילות של אפליקציות מאשר משתמשים בטלפונים מתקדמים. לכן, אם אפשר לזהות את המכשיר של המשתמש, אפשר לתת עדיפות לבאנר להתקנת האפליקציה הקלה יותר על פני גרסת האפליקציה הכבדה יותר שספציפית לפלטפורמה.
באינטרנט, אפשר לקבל אותות מהמכשיר ולמפות אותם באופן משוער לקטגוריות של מכשירים (למשל 'רמה גבוהה', 'רמה בינונית' או 'רמה נמוכה'). אפשר לקבל את המידע הזה בדרכים שונות, באמצעות ממשקי 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 למסך הבית על ידי הצגת בקשה לעשות זאת ישירות מהאתר.