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

André Cipriani Bandarra

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

ניווט ff-origin

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

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

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

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

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

הגדרת אימות לכמה מקורות

כמו במקור הראשי, האימות מתבצע באמצעות 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, שהוא חלק מספריית התמיכה של 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>
...

שימוש בפעילות מותאמת אישית במרכז האפליקציות

כשמשתמשים בקוד מותאם אישית כדי להפעיל פעילות מהימנה באינטרנט, אפשר להוסיף עוד מקורות על ידי קריאה ל-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);
}

סיכום

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

פתרון בעיות

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

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

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