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

Adriana Jara

Sebastian Benz

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

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

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

בואו נצלול פנימה כדי לקבל מידע נוסף.

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-Request-With משימוש.

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

בדיקת WebView

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

פעילות מהימנה באינטרנט

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

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

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

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

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

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

במאמר הזה ניתן לקבל מידע נוסף על השימוש של אנשי הקשר ב-TWA לטובת המשתמשים ושיעורי ההמרות שלהם פי שלושה.

סיכום

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