Hoạt động web đáng tin cậy nhiều nguồn gốc

André Cipriani Bandarra

Lưu ý: Nếu mới sử dụng Hoạt động đáng tin cậy trên web, bạn có thể đọc Hướng dẫn bắt đầu nhanh về Hoạt động đáng tin cậy trên web hoặc Giới thiệu về Hoạt động đáng tin cậy trên web trước khi đọc tài liệu này.

Hoạt động đáng tin cậy trên web là một cách mới để tích hợp nội dung ứng dụng web của bạn, chẳng hạn như PWA với ứng dụng Android của bạn bằng một giao thức dựa trên Thẻ tuỳ chỉnh.

Hoạt động đáng tin cậy trên web cần được mở nguồn gốc để xác thực bằng Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số) để hiển thị nội dung trên toàn màn hình.

Khi người dùng rời khỏi nguồn gốc đã xác thực, giao diện người dùng của Thẻ tuỳ chỉnh sẽ xuất hiện. Thanh URL trong thẻ Tuỳ chỉnh Thẻ thông báo cho người dùng biết rằng họ hiện đang điều hướng trong một miền bên ngoài ứng dụng, đồng thời cung cấp cho người dùng nút X để cho phép họ nhanh chóng quay lại nguồn gốc đã xác thực.

Tuy nhiên, các ứng dụng web cũng tạo ra những trải nghiệm có nhiều nguồn gốc cũng phổ biến – Ví dụ sẽ là một ứng dụng mua sắm mang trải nghiệm chính tại www.example.com, trong khi quy trình thanh toán được lưu trữ tại checkout.example.com.

Trong những trường hợp như vậy, không nên hiển thị Thẻ tuỳ chỉnh, không chỉ vì người dùng đang ở cùng một ứng dụng, nhưng cũng vì thanh trên cùng có thể làm cho người dùng nghĩ rằng họ đã rời khỏi ứng dụng và bỏ ngang quy trình thanh toán.

Hoạt động đáng tin cậy trên web cho phép nhà phát triển xác thực nhiều nguồn gốc và người dùng sẽ vẫn ở toàn màn hình khi điều hướng qua các nguồn gốc đó. Giống như miền chính, nhà phát triển phải có thể kiểm soát từng nguồn gốc đã được xác thực.

Thiết lập tính năng xác thực cho nhiều nguồn gốc

Theo nguồn gốc chính, việc xác thực đạt được thông qua Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số) và mỗi miền cần cần có tệp assetlinks.json riêng.

Thêm một tệp đường liên kết tài sản vào từng nguồn gốc

Trong ví dụ của chúng tôi với www.example.com và checkout.example.com, chúng tôi sẽ có:

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

Vì mỗi miền đều được kết nối với cùng một ứng dụng Android nên các tệp assetlinks.json trông giống hệt nhau.

Giả sử tên gói cho ứng dụng Android là com.example.twa, thì cả assetlink.json tệp sẽ chứa nội dung tương tự như sau:

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

Lưu ý: Một ứng dụng sử dụng Hoạt động đáng tin cậy trên web có thể có số lượng miền được xác thực bất kỳ, miễn là vì Đường liên kết đến tài sản kỹ thuật số đều được triển khai cho tất cả các đường liên kết đó.

Thêm nhiều nguồn gốc vào ứng dụng Android

Trên ứng dụng Android, bạn cần cập nhật phần khai báo asset_statements để chứa tất cả nguồn gốc cần được xác thực:

<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>

Lưu ý: Ứng dụng dựa trên ứng dụng svgomg-twa minh hoạ hoặc Bubblewrap sẽ có asset_statements bên trong app/build.gradle. Mặc dù vị trí của thì nội dung JSON sẽ giống nhau.

Thêm nguồn gốc bổ sung vào LauncherActivity

Sử dụng LauncherActivity mặc định

LauncherActivity thuộc thư viện hỗ trợ android-browser-helper cung cấp cách thêm nhiều nguồn gốc cần được xác thực bằng cách định cấu hình dự án Android.

Trước tiên, hãy thêm phần tử string-array vào tệp res/values/strings.xml. Mỗi URL bổ sung cần được xác thực sẽ nằm trong phần tử phụ item:

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

Tiếp theo, hãy thêm một thẻ meta-data mới bên trong phần tử hoạt động hiện có tham chiếu đến LauncherActivity, bên trong 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>
...

Sử dụng LauncherActivity tuỳ chỉnh

Khi sử dụng mã tuỳ chỉnh để chạy một Hoạt động đáng tin cậy trên web, bạn có thể thêm nguồn gốc bổ sung bằng cách gọi setAdditionalTrustedOrigins khi xây dựng Ý định để chạy Hoạt động đáng tin cậy trên web:

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);
}

Kết luận

Với những bước đó, Hoạt động đáng tin cậy trên web hiện đã sẵn sàng hỗ trợ nhiều nguồn gốc. android-browser-helper có ứng dụng mẫu cho Hoạt động đáng tin cậy trên web đa nguồn gốc. Nhãn hiệu hãy kiểm tra ngay.

Khắc phục sự cố

Quá trình thiết lập Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số) bao gồm một số bước phức tạp. Nếu ứng dụng vẫn đang hiển thị Thanh Thẻ tuỳ chỉnh ở trên cùng, có thể đã xảy ra lỗi với cấu hình.

Hướng dẫn bắt đầu nhanh về Hoạt động đáng tin cậy trên web có một mục khắc phục sự cố tuyệt vời về cách gỡ lỗi các vấn đề về Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số).

Ngoài ra còn có Công cụ liên kết tài sản của Peter tuyệt vời để giúp gỡ lỗi Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số) trên các ứng dụng đã cài đặt trên thiết bị.