กิจกรรมบนเว็บที่เชื่อถือได้หลายต้นทาง

กิจกรรมบนเว็บที่เชื่อถือได้เป็นวิธีใหม่ในการผสานรวมเนื้อหาเว็บแอป เช่น PWA กับ แอป Android ของคุณโดยใช้โปรโตคอลตามแท็บที่กำหนดเอง

การนำทาง ff-origin

กิจกรรมบนเว็บที่เชื่อถือได้ต้องการให้มีการเปิดต้นทางเพื่อตรวจสอบโดยใช้ ลิงก์เนื้อหาดิจิทัล (Digital Asset Links) เพื่อให้แสดงเนื้อหาแบบเต็มหน้าจอ

เมื่อผู้ใช้ออกจากต้นทางที่ตรวจสอบแล้ว UI ของแท็บที่กำหนดเองจะปรากฏขึ้น แถบ URL ในช่องที่กำหนดเอง Tab บอกผู้ใช้ว่าขณะนี้พวกเขากำลังนำทางในโดเมนภายนอกโดเมนแอปพลิเคชัน การมอบปุ่ม X ให้ผู้ใช้เพื่อกลับไปยังต้นทางที่ตรวจสอบความถูกต้องแล้ว

แต่ก็เป็นเรื่องปกติที่เว็บแอปจะสร้างประสบการณ์การใช้งานที่ครอบคลุมหลายต้นทาง ตัวอย่างเช่น จะเป็นแอปพลิเคชันช็อปปิ้งที่มีประสบการณ์หลักอยู่ที่ www.example.com ในขณะที่หน้าชำระเงิน โฮสต์อยู่ที่ checkout.example.com

ในกรณีเช่นนี้ การแสดงแท็บที่กำหนดเองเป็นสิ่งที่ไม่พึงประสงค์ ไม่เพียงแต่เพราะผู้ใช้อยู่ใน แอปพลิเคชันเดียวกัน แต่เป็นเพราะแถบด้านบนอาจทำให้ผู้ใช้คิดว่าตนออกจากแอปพลิเคชัน และยกเลิกการชำระเงิน

กิจกรรมบนเว็บที่เชื่อถือได้ช่วยให้นักพัฒนาซอฟต์แวร์ตรวจสอบต้นทางได้หลายแห่ง และผู้ใช้จะยังคงอยู่ เต็มหน้าจอเมื่อนำทางข้ามต้นทางเหล่านั้น เช่นเดียวกับโดเมนหลัก นักพัฒนาแอปจะต้อง ควบคุมต้นทางที่ตรวจสอบความถูกต้องแต่ละรายการได้

การตั้งค่าการตรวจสอบสำหรับต้นทางหลายแห่ง

เช่นเดียวกับที่มาหลัก การตรวจสอบจะทําผ่านลิงก์เนื้อหาดิจิทัลและแต่ละโดเมน ที่ตรวจสอบแล้วต้องมีไฟล์ 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>

เพิ่มต้นทางเพิ่มเติมในกิจกรรม Launcher

การใช้ 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);
}

บทสรุป

การดำเนินการดังกล่าวทำให้กิจกรรมในเว็บที่เชื่อถือได้พร้อมรองรับต้นทางหลายแห่งแล้ว android-browser-helper มีแอปพลิเคชันตัวอย่างสำหรับกิจกรรมบนเว็บที่เชื่อถือได้หลายต้นทาง สร้าง อย่าลืมตรวจสอบนะคะ

การแก้ปัญหา

การตั้งค่าลิงก์เนื้อหาดิจิทัล (Digital Asset Links) มีการเปลี่ยนแปลงบางส่วน หากแอปพลิเคชันยังคงแสดง แถบแท็บที่กำหนดเองที่ด้านบน อาจเป็นไปได้ว่าเกิดข้อผิดพลาดกับการกำหนดค่า

คู่มือเริ่มใช้งานฉบับย่อสําหรับกิจกรรมบนเว็บที่เชื่อถือได้มีส่วนการแก้ปัญหาที่ยอดเยี่ยมเพื่อดูวิธี แก้ปัญหาเกี่ยวกับลิงก์เนื้อหาดิจิทัล (Digital Asset Links)

นอกจากนี้ยังมีเครื่องมือลิงก์ชิ้นงานของ Peter ที่น่าทึ่ง ซึ่งจะช่วยแก้ไขข้อบกพร่องของลิงก์เนื้อหาดิจิทัล แอปพลิเคชันที่ติดตั้งในอุปกรณ์