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

André Cipriani Bandarra

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

ניווט ff-origin

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

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

עם זאת, נפוץ גם ליצור באפליקציות אינטרנט חוויות שימוש שמשתרעות על פני כמה מקורות – לדוגמה, אפליקציית שופינג שבה חוויית השימוש הראשית נמצאת בכתובת www.example.com, בעוד תהליך התשלום מתארח בכתובת checkout.example.com.

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

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

הגדרת אימות למספר מקורות

כמו במקור הראשי, האימות מתבצע באמצעות Digital Asset Links, וכל דומיין שרוצים לאמת צריך לכלול קובץ assetlinks.json משלו.

בדוגמה שלנו עם www.example.com ו-checkout.example.com, נקבל:

  • https://www.example.com/.well-known/assetlinks.json
  • https://checkout.example.com/.well-known/assetlinks.json

מאחר שכל דומיין מחובר לאותה אפליקציה ל-Android, קובצי assetlinks.json נראים בדיוק אותו דבר.

נניח ששם החבילה של האפליקציה ל-Android הוא com.example.twa, ושני הקבצים assetlink.json יכילו משהו דומה לזה:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
  "namespace": "android_app",
  "package_name": "com.example",
   "sha256_cert_fingerprints": ["..."]}
}]

הוספת מקורות מרובים לאפליקציה ל-Android

באפליקציה ל-Android, צריך לעדכן את ההצהרה asset_statements כך שתכלול את כל המקורות שצריך לאמת:

<string name="asset_statements">
[{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://www.example.com\"
    }
}],
[{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://checkout.example.com\"
    }
}],
</string>

הוספת מקורות נוספים ל-LauncherActivity

שימוש ב-LauncherActivity שמוגדרת כברירת מחדל

ה-LauncherActivity שמופיע בספריית התמיכה android-browser-helper מאפשר להוסיף כמה מקורות לאימות על ידי הגדרת הפרויקט ב-Android.

קודם מוסיפים רכיב string-array לקובץ res/values/strings.xml. כל כתובת URL נוספת שצריך לאמת תהיה בתוך רכיב משנה מסוג item:

...
<string-array name="additional_trusted_origins">
    <item>https://www.google.com</item>
</string-array>
...

בשלב הבא, מוסיפים תג meta-data חדש בתוך אלמנט הפעילות הקיים שמפנה ל-LauncherActivity, בתוך AndroidManifest.xml:

...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
    android:label="@string/app_name">


    <meta-data
        android:name="android.support.customtabs.trusted.ADDITIONAL_TRUSTED_ORIGINS"
        android:resource="@array/additional_trusted_origins" />


    ...
</activity>
...

שימוש ב-LauncherActivity מותאם אישית

כשמשתמשים בקוד בהתאמה אישית כדי להפעיל פעילות אינטרנט מהימנה, אפשר להוסיף מקורות נוספים על ידי קריאה ל-setAdditionalTrustedOrigins בזמן יצירת ה-Intent להפעלת הפעילות האינטרנטית המהימנה:

public void launcherWithMultipleOrigins(View view) {
  List<String> origins = Arrays.asList(
      "https://checkout.example.com/"
  );


  TrustedWebActivityIntentBuilder builder = new TrustedWebActivityIntentBuilder(LAUNCH_URI)
      .setAdditionalTrustedOrigins(origins);


  new TwaLauncher(this).launch(builder, null, null);
}

סיכום

אחרי ביצוע השלבים האלה, פעילות Trusted Web מוכנה לתמוך במספר מקורות. ב-android-browser-helper יש אפליקציה לדוגמה לפעילויות Trusted Web בכמה מקורות. חשוב לבדוק את זה.

פתרון בעיות

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

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

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