Trang này được dịch bởi Cloud Translation API.

Hướng dẫn tích hợp

André Cipriani Bandarra

Twitter GitHub Sự cố Bảng tin Trang chủ

Việc thiết lập Hoạt động đáng tin cậy trên web không yêu cầu nhà phát triển phải tạo mã Java, nhưng cần có Android Studio. Hướng dẫn này được tạo bằng Android Studio 3.3. Hãy xem tài liệu về cách cài đặt ứng dụng này.

Tạo một dự án đáng tin cậy cho hoạt động trên web

Khi sử dụng Hoạt động đáng tin cậy trên web, dự án phải nhắm đến API 16 trở lên.

Mở Android Studio rồi nhấp vào Start a new Android Studio project (Bắt đầu một dự án Android Studio mới).

Android Studio sẽ nhắc chọn loại Hoạt động (Activity). Vì Hoạt động đáng tin cậy trên web sử dụng một Hoạt động do thư viện hỗ trợ cung cấp, hãy chọn Add No Activity (Không thêm hoạt động nào) rồi nhấp vào Next (Tiếp theo).

Bước tiếp theo, trình hướng dẫn sẽ nhắc bạn định cấu hình cho dự án. Dưới đây là nội dung mô tả ngắn về từng trường:

Tên: Tên sẽ dùng cho ứng dụng của bạn trên Trình chạy Android.
Package Name (Tên gói): Giá trị nhận dạng duy nhất cho các ứng dụng Android trên Cửa hàng Play và trên các thiết bị Android. Hãy xem tài liệu này để biết thêm thông tin về các yêu cầu và phương pháp hay nhất để tạo tên gói cho ứng dụng Android.
Save location (Vị trí lưu): Nơi Android Studio sẽ tạo dự án trong hệ thống tệp.
Ngôn ngữ: Dự án không yêu cầu viết mã Java hoặc Kotlin. Chọn Java làm mặc định.
Cấp độ API tối thiểu: Thư viện hỗ trợ yêu cầu ít nhất API cấp 16. Chọn API 16 bất kỳ phiên bản nào ở trên.

Bỏ đánh dấu các hộp đánh dấu còn lại, vì chúng ta sẽ không sử dụng Ứng dụng tức thì hoặc cấu phần phần mềm AndroidX và nhấp vào Finish (Hoàn tất).

Tải Thư viện hỗ trợ hoạt động đáng tin cậy trên web

Để thiết lập thư viện Hoạt động đáng tin cậy trên web trong dự án, bạn cần chỉnh sửa tệp bản dựng ứng dụng. Tìm phần Gradle Scripts (Tập lệnh Gradle) trong Project Navigator (Trình điều hướng dự án). Có hai tệp tên là build.gradle nên có thể gây nhầm lẫn và nội dung mô tả trong ngoặc đơn giúp xác định đúng tệp.

Tệp mà chúng ta đang tìm kiếm là tệp có mô-đun Module (Mô-đun) bên cạnh tên tệp đó.

Thư viện Hoạt động đáng tin cậy trên web sử dụng các tính năng của Java 8 và thay đổi đầu tiên sẽ bật Java 8. Thêm phần compileOptions vào cuối phần android như dưới đây:

android {
        ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

Bước tiếp theo sẽ thêm Thư viện hỗ trợ hoạt động đáng tin cậy trên web vào dự án. Thêm phần phụ thuộc mới vào phần dependencies:

dependencies {
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}

Android Studio sẽ hiển thị lời nhắc yêu cầu đồng bộ hoá dự án một lần nữa. Nhấp vào đường liên kết Sync Now (Đồng bộ hoá ngay) rồi đồng bộ hoá đường liên kết này.

Chạy Hoạt động đáng tin cậy trên web

Bạn có thể thiết lập Hoạt động đáng tin cậy trên web bằng cách chỉnh sửa Tệp kê khai ứng dụng Android.

Trên Project Navigator (Trình điều hướng dự án), hãy mở rộng phần app (ứng dụng), tiếp đến là manifests (tệp kê khai) và nhấp đúp vào AndroidManifest.xml để mở tệp.

Vì chúng ta đã yêu cầu Android Studio không thêm bất kỳ Hoạt động nào vào dự án khi tạo dự án đó, nên tệp kê khai sẽ trống và chỉ chứa thẻ ứng dụng.

Thêm Hoạt động đáng tin cậy trên web bằng cách chèn thẻ activity vào thẻ application:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

           <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <!--
             This intent-filter allows the Trusted Web Activity to handle Intents to open
             airhorner.com.
           -->
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <!-- Edit android:host to handle links to the target URL-->
               <data
                 android:scheme="https"
                 android:host="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

Các thẻ được thêm vào XML là Tệp kê khai ứng dụng Android tiêu chuẩn. Có 2 thông tin liên quan liên quan đến ngữ cảnh của Hoạt động đáng tin cậy trên web:

Thẻ meta-data cho Hoạt động web đáng tin cậy biết nên mở URL nào. Thay đổi thuộc tính android:value bằng URL của PWA mà bạn muốn mở. Trong ví dụ này, đó là https://airhorner.com.
Thẻ intent-filter thứ hai cho phép Hoạt động web đáng tin cậy chặn các Ý định Android mở https://airhorner.com. Thuộc tính android:host bên trong thẻ data phải trỏ đến miền mà Hoạt động đáng tin cậy trên web đang mở.

Phần tiếp theo sẽ trình bày cách thiết lập Digital AssetLinks để xác minh mối quan hệ giữa trang web và ứng dụng, đồng thời xoá thanh URL.

Xoá thanh URL

Hoạt động đáng tin cậy trên web yêu cầu phải thiết lập mối liên kết giữa ứng dụng Android và trang web để xoá thanh URL.

Mối liên kết này được tạo thông qua Đường liên kết đến tài sản kỹ thuật số và phải được thiết lập theo cả hai cách, đó là đường liên kết từ ứng dụng đến trang web và từ trang web đến ứng dụng.

Bạn có thể thiết lập ứng dụng để xác thực trang web và thiết lập Chrome để chuyển từ bước xác thực trang web đến bước xác thực ứng dụng, nhằm gỡ lỗi.

Thiết lập mối liên kết từ ứng dụng với trang web

Mở tệp tài nguyên chuỗi app > res > values > strings.xml rồi thêm câu lệnh Digital AssetLinks ở bên dưới:

<resources>
    <string name="app_name">AirHorner Trusted Web Activity</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://airhorner.com\"}
        }]
    </string>
</resources>

Thay đổi nội dung cho thuộc tính site để khớp với giản đồ và miền do Hoạt động đáng tin cậy trên web mở.

Quay lại tệp kê khai ứng dụng Android, AndroidManifest.xml, liên kết đến câu lệnh bằng cách thêm thẻ meta-data mới, nhưng lần này là phần tử con của thẻ application:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <meta-data
            android:name="asset_statements"
            android:resource="@string/asset_statements" />

        <activity>
            ...
        </activity>

    </application>
</manifest>

Chúng tôi hiện đã thiết lập mối quan hệ từ ứng dụng Android với trang web. Bạn nên gỡ lỗi phần này của mối quan hệ mà không cần tạo trang web để xác thực ứng dụng.

Dưới đây là cách kiểm thử điều này trên thiết bị phát triển:

Bật chế độ gỡ lỗi

Mở Chrome trên thiết bị phát triển, chuyển đến chrome://flags, tìm một mục có tên là Bật dòng lệnh trên các thiết bị không bị can thiệp vào hệ thống rồi thay đổi mục đó thành ĐÃ BẬT rồi khởi động lại trình duyệt.
Tiếp theo, trên ứng dụng Cửa sổ dòng lệnh của hệ điều hành, hãy dùng Cầu gỡ lỗi Android (đã cài đặt bằng Android Studio) và chạy lệnh sau:

adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"https://airhorner.com\"' > /data/local/tmp/chrome-command-line"

Đóng Chrome và chạy lại ứng dụng của bạn từ Android Studio. Lúc này, ứng dụng sẽ hiển thị ở chế độ toàn màn hình.

Thiết lập mối liên kết từ trang web với ứng dụng

Có 2 thông tin mà nhà phát triển cần thu thập từ ứng dụng để tạo mối liên kết:

Package Name (Tên gói): Thông tin đầu tiên là tên gói của ứng dụng. Đây cũng chính là tên gói được tạo khi tạo ứng dụng. Bạn cũng có thể tìm thấy tên gói này bên trong Module (Mô-đun) build.gradle, trong Gradle Scripts > build.gradle (Module: app) và là giá trị của thuộc tính applicationId.
Vân tay số SHA-256: Ứng dụng Android phải được ký để được tải lên Cửa hàng Play. Chữ ký tương tự được dùng để thiết lập kết nối giữa trang web và ứng dụng thông qua vân tay số SHA-256 của khoá tải lên.

Tài liệu về Android giải thích chi tiết cách tạo khoá bằng Android Studio. Hãy nhớ ghi lại đường dẫn, email đại diện và mật khẩu cho kho khoá, vì bạn sẽ cần mật khẩu này cho bước tiếp theo.

Trích xuất vân tay số SHA-256 bằng keytool với lệnh sau:

keytool -list -v -keystore [path] -alias [alias] -storepass [password] -keypass [password]

Giá trị của vân tay số SHA-256 được in trong mục vân tay số Chứng chỉ. Dưới đây là một kết quả mẫu:

keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3

Khi đã có cả hai thông tin, hãy chuyển đến trình tạo đường liên kết tài sản, điền thông tin vào các trường rồi nhấn vào Generate Statement (Tạo câu lệnh). Sao chép câu lệnh đã tạo và phân phát câu lệnh đó từ miền của bạn, từ URL /.well-known/assetlinks.json.

Tạo biểu tượng

Khi Android Studio tạo một dự án mới, dự án đó sẽ có một Biểu tượng mặc định. Là nhà phát triển, bạn sẽ muốn tạo biểu tượng của riêng mình và phân biệt ứng dụng của bạn với các ứng dụng khác trên Trình chạy Android.

Android Studio chứa Image Asset Studio, cung cấp các công cụ cần thiết để tạo biểu tượng chính xác, cho mọi độ phân giải và hình dạng mà ứng dụng của bạn cần.

Bên trong Android Studio, hãy chuyển đến File > New > Image Asset, chọn Launcher Icons (Adaptative and Legacy) rồi làm theo các bước trong Trình hướng dẫn để tạo biểu tượng tuỳ chỉnh cho ứng dụng.

Tạo một tệp APK đã ký

Với tệp assetlinks đã được đặt trong miền của bạn và thẻ asset_statements được định cấu hình trong ứng dụng Android, bước tiếp theo là tạo một ứng dụng có chữ ký. Một lần nữa, các bước để thực hiện việc này được ghi lại trong tài liệu rộng rãi.

Bạn có thể cài đặt tệp APK đầu ra vào thiết bị kiểm thử bằng adb:

adb install app-release.apk

Nếu bước xác minh không thành công, bạn có thể kiểm tra thông báo lỗi bằng Cầu gỡ lỗi Android, từ thiết bị đầu cuối của hệ điều hành và bằng thiết bị kiểm thử được kết nối.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Với APK tải lên đã tạo, giờ đây bạn có thể tải ứng dụng lên Cửa hàng Play.

Thêm màn hình chờ

Kể từ Chrome 75, Hoạt động đáng tin cậy trên web hỗ trợ tính năng Màn hình chờ. Bạn có thể thiết lập Màn hình chờ bằng cách thêm một vài tệp hình ảnh và cấu hình mới vào dự án.

Hãy nhớ cập nhật lên Chrome 75 trở lên và sử dụng phiên bản mới nhất của Thư viện hỗ trợ hoạt động đáng tin cậy trên web.

Tạo hình ảnh cho Màn hình chờ

Các thiết bị Android có thể có nhiều kích thước màn hình và mật độ pixel. Để đảm bảo Màn hình chờ hiển thị tốt trên mọi thiết bị, bạn cần tạo hình ảnh cho từng mật độ pixel.

Nội dung giải thích đầy đủ về pixel không phụ thuộc vào màn hình (dp hoặc dip) nằm ngoài phạm vi của bài viết này, nhưng một ví dụ sẽ là tạo hình ảnh 320x320dp, đại diện cho hình vuông 2x2 inch trên màn hình thiết bị với bất kỳ mật độ điểm nào và tương đương với pixel 320x320 ở mật độ mdpi.

Từ đó, chúng ta có thể lấy được kích thước cần thiết cho các mật độ pixel khác. Dưới đây là danh sách với mật độ pixel, hệ số áp dụng cho kích thước cơ sở (320x320dp), kích thước thu được tính bằng pixel và vị trí cần thêm hình ảnh trong dự án Android Studio.

Mật độ	Số nhân	Kích thước	Vị trí dự án
mdpi (cơ sở)	1,0 lần	320 x 320 pixel	/res/drawable-mdpi/
ldpi	0,75x	240 x 240 pixel	/res/drawable-ldpi/
hdpi	Gấp 1,5 lần	480 x 480 pixel	/res/drawable-hdpi/
xhdpi	2x	640 x 640 pixel	/res/drawable-xhdpi/
xxhdpi	3x	960 x 960 pixel	/res/drawable-xxhdpi/
xxxhdpi	4x	1280 x 1280 pixel	/res/drawable-xxxhdpi/

Đang cập nhật ứng dụng

Với các hình ảnh cho màn hình chờ được tạo, đã đến lúc thêm các cấu hình cần thiết vào dự án.

Trước tiên, hãy thêm content-provider vào Tệp kê khai Android (AndroidManifest.xml).

<application>
    ...
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.example.twa.myapplication.fileprovider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>

Sau đó, hãy thêm tài nguyên res/xml/filepaths.xml và chỉ định đường dẫn đến màn hình chờ:

<paths>
    <files-path path="twa_splash/" name="twa_splash" />
</paths>

Cuối cùng, thêm meta-tags vào tệp kê khai Android để tuỳ chỉnh LauncherActivity:

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
    ...
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
               android:resource="@drawable/splash"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
               android:resource="@color/colorPrimary"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
               android:value="300"/>
    <meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
               android:value="com.example.twa.myapplication.fileprovider"/>
    ...
</activity>

Hãy đảm bảo rằng giá trị của thẻ android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY khớp với giá trị đã xác định của thuộc tính android:authorities bên trong thẻ provider.

Làm rõ Hoạt động trình chạy

Ngoài ra, hãy đảm bảo LauncherActivity trong suốt để tránh màn hình trắng hiện trước màn hình chờ bằng cách đặt giao diện mờ cho LauncherActivity:

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@android:style/Theme.Translucent.NoTitleBar">
    ...
    </activity>
</application>

Chúng tôi rất mong được thấy những gì mà nhà phát triển xây dựng bằng Hoạt động đáng tin cậy trên web. Để gửi ý kiến phản hồi, hãy liên hệ với chúng tôi theo địa chỉ @ChromiumDev.