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

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

André Cipriani Bandarra

Việc thiết lập Hoạt động web đáng tin cậy không yêu cầu nhà phát triển phải viết mã Java, nhưng bắt buộc phải 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 trình bổ trợ này.

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

Khi sử dụng Hoạt động web đáng tin cậy, 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 bạn chọn một loại Hoạt động. Vì Hoạt động web đáng tin cậy 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ập cấu hình cho dự án. Dưới đây là nội dung mô tả ngắn gọn về từng trường:

Tên: Tên sẽ được 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 ứng dụng Android trên Cửa hàng Play và trên thiết bị Android. Hãy xem tài liệu để 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.
Vị trí lưu: Vị trí Android Studio sẽ tạo dự án trong hệ thống tệp.
Language (Ngôn ngữ): Dự án không yêu cầu viết mã Java hoặc Kotlin. Chọn Java làm ngôn ngữ mặc định.
Cấp độ API tối thiểu: Thư viện hỗ trợ yêu cầu ít nhất là API cấp 16. Chọn API 16 bất kỳ phiên bản nào trở lên.

Để các hộp đánh dấu còn lại ở trạng thái không đánh dấu 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, rồi nhấp vào 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 web đáng tin cậy 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ó 2 tệp tên là build.gradle. Tệp này có thể gây nhầm lẫn và nội dung mô tả trong ngoặc đơn sẽ giúp xác định đúng tệp.

Tệp mà chúng ta đang tìm là tệp có mô-đun Module (Mô-đun) bên cạnh tên của 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 một phần compileOptions vào phần cuối của phần android, như bên dưới:

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

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), theo sau là manifests (tệp kê khai) rồi 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, 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ó hai thông tin 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 đáng tin cậy trên web biết URL mà nó sẽ mở. 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, thuộc tính đó là https://airhorner.com.
Thẻ intent-filter thứ hai cho phép Hoạt động đáng tin cậy trên web 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 đang được Hoạt động đáng tin cậy trên web mở.

Phần tiếp theo sẽ hướng dẫn 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 web đáng tin cậy yêu cầu bạn 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 Digital Asset Links và bạn phải thiết lập mối liên kết theo cả hai cách, 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 để bỏ qua quy trình xác thực trang web cho ứng dụng, cho mục đích gỡ lỗi.

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

Mở tệp tài nguyên chuỗi app > res > values > strings.xml và 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 của thuộc tính site để khớp với giản đồ và miền mà Hoạt động đáng tin cậy trên web mở ra.

Quay lại tệp Tệp kê khai ứng dụng Android, AndroidManifest.xml, hãy liên kết với câu lệnh bằng cách thêm thẻ meta-data mới, nhưng lần này là thẻ 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>

Bây giờ, chúng ta đã thiết lập mối quan hệ từ ứng dụng Android đến trang web. Bạn nên gỡ lỗi phần mối quan hệ này 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ử tính năng 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ục có tên Bật dòng lệnh trên thiết bị không bị can thiệp vào hệ thống rồi thay đổi thành BẬT, sau đó khởi động lại trình duyệt.
Tiếp theo, trên ứng dụng Terminal (Dòng lệnh) của hệ điều hành, hãy sử dụng Cầu gỡ lỗi Android (được 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 rồi chạy lại ứng dụng của bạn từ Android Studio. Ứ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 đến ứ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:

Tên gói: Thông tin đầu tiên là tên gói cho ứng dụng. Đây là tên gói giống như 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 trong Mô-đun build.gradle, trong Gradle Scripts > build.gradle (Module: app) (Tập lệnh Gradle > build.gradle (Mô-đun: ứng dụng)) và là giá trị của thuộc tính applicationId.
Vân tay số SHA-256: Các ứng dụng Android phải được ký để có thể 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 SHA-256 của khoá tải lên.

Tài liệu 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, bí danh và mật khẩu cho kho khoá vì bạn sẽ cần thông tin 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 phần vân tay số Chứng chỉ. Dưới đây là 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 vào các trường rồi nhấn vào 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 tạo một dự án mới, Android Studio 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 riêng và làm nổi bật ứng dụng của mình so 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 đúng biểu tượng cho mọi độ phân giải và hình dạng mà ứng dụng 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 tệp APK đã ký

Khi tệp assetlinks đã có 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 đã ký. Xin nhắc lại rằng các bước thực hiện việc này đã được ghi nhận 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à khi 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, bây giờ 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, Trusted Web Activities sẽ hỗ trợ 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ó kích thước màn hình và mật độ pixel khác nhau. Để đảm bảo Màn hình chờ trông đẹp 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 có một ví dụ là tạo một hình ảnh có kích thước 320 x 320 dp, biểu thị hình vuông 2 x 2 inch trên màn hình thiết bị có mật độ bất kỳ và tương đương với 320 x 320 pixel ở mật độ mdpi.

Từ đó, chúng ta có thể suy ra kích thước cần thiết cho các mật độ pixel khác. Dưới đây là danh sách mật độ pixel, hệ số áp dụng cho kích thước cơ sở (320x320dp), kích thước kết quả 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	320x320 px	/res/drawable-mdpi/
ldpi	0,75x	240x240 px	/res/drawable-ldpi/
hdpi	Gấp 1,5 lần	480x480 px	/res/drawable-hdpi/
xhdpi	2x	640x640 px	/res/drawable-xhdpi/
xxhdpi	3,0x	960x960 px	/res/drawable-xxhdpi/
xxxhdpi	4 lần	1280x1280 px	/res/drawable-xxxhdpi/

Cập nhật ứng dụng

Khi 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 một 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 rồi chỉ định đường dẫn đến màn hình chờ twa:

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

Cuối cùng, hãy 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>

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

Làm cho LauncherActivity trong suốt

Ngoài ra, hãy đảm bảo LauncherActivity trong suốt để tránh màn hình trắng xuất 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 xem những gì mà nhà phát triển xây dựng bằng Hoạt động web đáng tin cậy. Để gửi ý kiến phản hồi, hãy liên hệ với chúng tôi theo địa chỉ @ChromiumDev.