กิจกรรมบนเว็บที่เชื่อถือได้เป็นวิธีใหม่ในการผสานรวมเนื้อหาเว็บแอป เช่น PWA กับแอป Android โดยใช้โปรโตคอลที่อิงตามแท็บที่กำหนดเอง
กิจกรรมบนเว็บที่เชื่อถือได้จำเป็นต้องเปิดต้นทางเพื่อตรวจสอบโดยใช้ลิงก์เนื้อหาดิจิทัลเพื่อแสดงเนื้อหาแบบเต็มหน้าจอ
เมื่อผู้ใช้ออกจากต้นทางที่ตรวจสอบแล้ว UI แท็บที่กำหนดเองจะปรากฏขึ้น แถบ URL ในแท็บ กำหนดเองจะบอกผู้ใช้ว่าขณะนี้กำลังไปยังส่วนต่างๆ ในโดเมนนอกแอปพลิเคชัน พร้อมกับแสดงปุ่ม X ให้ผู้ใช้กลับไปยังต้นทางที่ตรวจสอบแล้วได้อย่างรวดเร็ว
แต่ก็เป็นเรื่องปกติที่เว็บแอปจะสร้างประสบการณ์การใช้งานที่ครอบคลุมหลายต้นทาง เช่น แอปพลิเคชันช็อปปิ้งที่มีประสบการณ์หลักที่ www.example.com ในขณะที่ขั้นตอนการชำระเงินจะโฮสต์อยู่ที่ checkout.example.com
ในกรณีเช่นนี้ การแสดงแท็บที่กำหนดเองนั้นไม่เป็นที่ต้องการ ไม่เพียงเพราะผู้ใช้อยู่ในแอปพลิเคชันเดียวกันเท่านั้น แต่ยังเป็นเพราะแถบด้านบนอาจทำให้ผู้ใช้คิดว่าออกจากแอปพลิเคชันแล้วออกจากการชำระเงิน
กิจกรรมบนเว็บที่เชื่อถือได้ช่วยให้นักพัฒนาซอฟต์แวร์ตรวจสอบต้นทางได้หลายรายการ และผู้ใช้จะยังคงอยู่ในโหมดเต็มหน้าจอเมื่อไปยังส่วนต่างๆ ของต้นทางเหล่านั้น เช่นเดียวกับโดเมนหลัก นักพัฒนาซอฟต์แวร์ต้องสามารถควบคุมต้นทางที่ตรวจสอบแล้วแต่ละแห่งได้
การตั้งค่าการตรวจสอบสำหรับต้นทางหลายแห่ง
ในต้นทางหลัก เราจะตรวจสอบความถูกต้องผ่านลิงก์เนื้อหาดิจิทัล (Digital Asset Links) และแต่ละโดเมนที่จะตรวจสอบต้องมีไฟล์ assetlinks.json ของตัวเอง
เพิ่มไฟล์ assetlinks ไปยังต้นทางแต่ละรายการ
ในตัวอย่างของเราที่มี 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
ทั้ง 2 ไฟล์จะมีชื่อที่คล้ายคลึงกับรายการต่อไปนี้
[{
"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);
}
บทสรุป
ด้วยขั้นตอนดังกล่าว กิจกรรมบนเว็บที่เชื่อถือได้จึงพร้อมรองรับต้นทางหลายรายการแล้ว android-browser-helper มีแอปพลิเคชันตัวอย่างสำหรับกิจกรรมบนเว็บที่เชื่อถือได้หลายต้นทาง อย่าลืมตรวจสอบ
การแก้ปัญหา
การตั้งค่าลิงก์เนื้อหาดิจิทัล (Digital Asset Links) มีบางส่วนที่เคลื่อนไหวได้ หากแอปพลิเคชันยังแสดงแถบแท็บที่กำหนดเองที่ด้านบน เป็นไปได้ว่ามีบางอย่างผิดพลาดในการกำหนดค่า
คู่มือเริ่มใช้งานฉบับย่อสําหรับกิจกรรมบนเว็บที่เชื่อถือได้มีส่วนการแก้ปัญหาที่ยอดเยี่ยมสําหรับวิธีแก้ปัญหาเกี่ยวกับลิงก์เนื้อหาดิจิทัล
นอกจากนี้ยังมีเครื่องมือลิงก์เนื้อหาของปีเตอร์ที่ยอดเยี่ยม ซึ่งจะช่วยแก้ไขข้อบกพร่องของลิงก์เนื้อหาดิจิทัล (Digital Asset Links) ในแอปพลิเคชันที่ติดตั้งในอุปกรณ์