מה חדש באינטרנט ב-Android 2023

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

ריכזנו כאן את העדכונים האחרונים בכלים האלה. לדוגמה:

בואו נצלול לפרטים ונלמד עוד.

WebView

WebView היא הדרך הנפוצה ביותר להטמיע תוכן אינטרנט באפליקציות ל-Android, כי רוב האפליקציות ל-Android משתמשות ב-WebView. זו דרך מצוינת לשלב ממשק משתמש אינטרנטי בצורה חלקה בחוויית השימוש באפליקציות מקוריות ל-Android. לדוגמה, אפשר להטמיע באפליקציה ממשקי משתמש שונים של אינטרנט, כמו מודעות, ווידג'טים או אפילו דפדפנים מובנים. אחד מהיתרונות הגדולים של WebView הוא ה-API החזק שלו, שמאפשר לשלוט בתוכן האינטרנט שנטען ולשנות אותו. אז מה חדש ב-WebView?

הכותרת X-Requested-With

נתחיל בנושא הפרטיות ובהוצאה משימוש של הכותרת X-Requested-With. כשמשתמש מתקין ומפעיל אפליקציה שמשתמשת ב-WebView כדי להטמיע תוכן אינטרנט, ה-WebView מוסיף את הכותרת X-Requested-With לכל בקשה שנשלחת לשרתים. הערך של הכותרת הזו הוא שם קובץ ה-APK של האפליקציה. כלומר, כל בקשה כוללת מידע ספציפי על ההקשר שבו המשתמש צורך תוכן באינטרנט, ומאפשרת לזהות את האפליקציה בשירות אונליין. כדי להגן על פרטיות המשתמשים, צוות WebView התחיל תקופת ניסיון להוצאה משימוש, שבמהלכה הכותרת הזו תוסר מכל הבקשות של WebView.

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

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
    demoWebview.getSettings(), Collections.singleton("https://example.com")
);

בדיקת WebView

הנושא הבא הוא בדיקה. אם אתם מפתחי אתרים והאתרים שלכם מקבלים הרבה תנועה מ-WebViews, יש לכם שני עדכונים:

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

  2. עכשיו קל יותר להתקין את WebView Beta. מומלץ מאוד לבדוק את האתר באמצעות ערוץ הבטא של WebView כדי לוודא שהאתר פועל בצורה תקינה בגרסאות WebView עתידיות. כדי לעשות זאת, צריך להצטרף לתוכנית הבדיקה של WebView Beta בחנות Google Play, והמכשיר יירשם באופן אוטומטי.

צילום מסך של האתר להצטרפות לתוכנית הבטא של WebView.

תמיכה במכשירים עם מסך גדול

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

קל מאוד להוסיף את התכונה 'גרירה ושחרור' ל-WebViews: פשוט מגדירים DropDataProvider ב-AndroidManifest.

<application...>
     ...
     <provider
         android:authorities="com.example.webviewdemo.DropDataProvider"
         android:name="androidx.webkit.DropDataContentProvider"
         android:exported="false"
         android:grantUriPermissions="true"/>
 </application>

לגבי מכשירים עם מסך גדול, ב-Chrome וב-WebView ב-Android U תהיה תמיכה מלאה בכתב יד בשדות קלט של טקסט HTML, ותנועות קלט למחיקת טקסט או להוספת רווחים. תמיכה בכתב יד כבר זמינה בכל מכשירי Samsung עם One UI 5.1, כמו S23 Ultra. במכשירים אחרים עם Android T, אפשר להפעיל כתיבה בכתב יד בקלט HTML בקטע 'אפשרויות למפתחים'.

מנוע JavaScript של Jetpack

לפעמים צריך להריץ JavaScript באפליקציה בלי להציג תוכן אינטרנט. לדוגמה, כשמשתפים לוגיקה עסקית בין אפליקציות אינטרנט לאפליקציות לנייד. כדי להקל על כך, השקנו בשנה שעברה את גרסת האלפא של מנוע JavaScript החדש של JetPack. הספרייה הזו משתמשת ב-V8, מנוע ה-JavaScript של Chrome, ומאפשרת לאפליקציה להעריך קוד JavaScript או WebAssembly בלי ליצור מופע של WebView. היתרון הגדול של מנוע ה-JavaScript החדש הוא שהוא מבצע את ה-JavaScript בתהליך אחר, כך שהוא מהווה דרך מאובטחת ויציבה להרצת JavaScript באפליקציה. בנוסף, הוא דורש פחות משאבים מאשר מופע של WebView.

ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);

כרטיסיות מותאמות אישית

כרטיסייה מותאמת אישית ל-Android עם סגנון ברירת המחדל.

WebView הוא פתרון מצוין לשילוב ממשק משתמש אינטרנטי באפליקציה. אבל מה לגבי מתן אפשרות למשתמשים לעיין בתוכן אינטרנט באפליקציה?

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

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

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

כרטיסייה מותאמת אישית ב-Android עם ערכת צבעים וסרגלי כלים בהתאמה אישית.

כרטיסיות בהתאמה אישית חלקית

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

כל מה שצריך לעשות הוא להתחבר לשירות הכרטיסיות בהתאמה אישית, להעביר את הסשן ל-CustomTabsBuilder ולקרוא ל-setActivityHeight.

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
  .setInitialActivityHeightPx(500)
  .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
  // ...
  .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

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

חוויית הצופים במודעות Direct Response ב-YouTube באמצעות כרטיסיות מותאמות אישית חלקיות.

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

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

מדידת אותות של מעורבות

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

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

אותות התעניינות זמינים החל מגרסה 114 של Chrome, ונדרש לכך ספריית התמיכה androidx.browser:browser:1.6.0-alpha01 ואילך. מידע נוסף זמין במדריך לתחילת העבודה עם אותות התעניינות.

PWA

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

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

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

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

רצינו לתת למשתמשים את האפשרות להתקין את האתרים שהכי חשובים להם. השלב הראשון היה הסרת ה-handler של אחזור ה-service worker כדרישה להתקנה ב-Android וב-Chrome. בנוסף, Chrome ידלג על הפעלת ה-service worker אם מתבצע טיפול רייק (fetch) ריק. ב-Chrome יתבצעו ניסויים כדי להרחיב את הגישה של המשתמשים להתקנה. כדאי לעקוב אחרי העדכונים האלה ולשלוח משוב.

הדרישות לגבי שירותי העבודה נועדו לאפשר למפתחים ליצור חוויית משתמש עקבית עם אפליקציות אחרות ל-Android. אפשר להשתמש בו כדי ליצור דף שבו המשתמש יקבל הודעה על כך שהוא לא יכול להשתמש באפליקציה במצב אופליין.

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

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

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

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

באמצעות ממשקי ה-API של Web Share ו-Web Share Target, האפליקציה שלכם יכולה לקיים אינטראקציה עם אפליקציות אחרות, כמו כל אפליקציה אחרת בפלטפורמה. האפליקציה תופיע כאפשרות בגיליונות השיתוף, ותוכלו לשתף ולקבל תמונות, טקסטים וקבצים אחרים.

כדי לקבל מידע נוסף על האופן שבו עסקים משתמשים בטכנולוגיות האלה, אפשר לצפות בהרצאה בכנס I/O‏ 'האינטרנט: הפלטפורמה שלכם לצמיחה'.

פעילות Trusted Web

דרך נוספת להביא את האינטרנט ל-Android היא באמצעות פעילות Trusted Web (TWA).

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

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

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

כמה מהיתרונות של אריזה של אפליקציית האינטרנט באמצעות TWA הם:

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

במאמר הזה מוסבר איך חברת ContactsDirect השתמשה ב-TWA כדי להועיל למשתמשים שלה ולהגדיל פי שלושה את שיעורי ההמרה.

סיכום

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