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

Adriana Jara

Sebastian Benz

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

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

• שיפורים בפרטיות ותמיכה טובה יותר במסכים גדולים, למשל תמיכה בגרירה ושחרור של תמונות ב-WebView.
• כרטיסיות מותאמות אישית תומכות עכשיו בכרטיסיות חלקיות בהתאמה אישית.
• תכונות משולבות ל-PWA, כמו ממשק משתמש עשיר יותר להתקנה ו-Play billing API בפעילויות מהימנות באינטרנט.

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

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

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

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

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

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

המטרה שלנו היא ש-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);
…

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

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

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

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

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

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

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

כל מה שצריך לעשות הוא להתחבר לשירות Custom Tabs, להעביר את הסשן ל-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 כרטיסיות בהתאמה אישית במודעות תגובה ישירה שאפשר לשנות את הגודל שלהן. כך הצליחו להטמיע דרך חדשה ליצור אינטראקציה עם מודעות ותוכן באינטרנט בלי להפריע לחוויה האורגנית באפליקציה.

אבל מה לגבי טאבלטים ומכשירים אחרים עם מסך גדול? צוות 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 אם מתבצע טיפול אוטומטי ריק. ב-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 כדי להועיל למשתמשים שלה ולהגדיל פי שלושה את שיעורי ההמרה.

סיכום

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