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

André Cipriani Bandarra

Lưu ý: Lưu ý: Câu trả lời đơn giản hơn hướng dẫn bắt đầu nhanh dành cho Hoạt động đáng tin cậy trên web hiện đã ra mắt.

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 quyền Mã Java, nhưng Android Studio là là bắt buộc. 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 hoạt động đáng tin cậy 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.

Lưu ý: Phần này sẽ hướng dẫn bạn cách thiết lập một dự án mới trên Android Studio. Nếu bạn đã quen thuộc với công cụ này, vui lòng chuyển đến Tìm mục Thư viện hoạt động đáng tin cậy trên web.

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

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

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

• Tên: Tên sẽ được 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 Ứng dụng Android trên Cửa hàng Play và trên các thiết bị Android. 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 gói cho ứng dụng Android.
• Save location (Vị trí lưu): Trường hợp Android Studio sẽ tạo dự án trong tệp hệ thống.
• Language (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 cho một phiên bản bất kỳ ở trên.

Bỏ chọn các hộp kiểm còn lại vì chúng tôi 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 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 phải chỉnh sửa Ứng dụng tệp bản 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. Tệp này có thể gây nhầm lẫn và mô tả trong ngoặc đơn giúp xác định đúng câu lệnh.

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

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 là cho phép Java 8. Thêm một phần compileOptions vào phần 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 mới phần phụ thuộc vào phần dependencies:

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

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

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à tệp kê khai và nhấp đúp vào AndroidManifest.xml để mở tệp.

Vì chúng tôi đã yêu cầu Android Studio không thêm bất kỳ Hoạt động nào vào dự án khi nếu bạn tạo tệp kê khai thì 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>

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

1. Thẻ meta-data cho Hoạt động đáng tin cậy trên web biết URL nào nên mở. Thay đổi thuộc tính android:value có URL của PWA mà bạn muốn mở. Ngang bằng ví dụ này là https://airhorner.com.
2. Thẻ intent-filter thứ hai cho phép Hoạt động đáng tin cậy trên web chặn Android Các ý định 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ở.

Lưu ý: Khi chạy dự án ở giai đoạn này, Thanh URL trong Thẻ tuỳ chỉnh sẽ vẫn hiển thị ở đầu màn hình. Đây không phải là lỗi.

Phần tiếp theo sẽ trình bày cách thiết lập Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số) để 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 liên kết giữa ứng dụng Android và trang web sẽ được thiết lập để xoá thanh URL.

Mối liên kết này được tạo qua Đường liên kết đến tài sản kỹ thuật số và mối liên kết phải được thiết lập theo cả hai cách, việc 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 xác thực từ trang web đến ứng dụng, cho mục đích gỡ lỗi.

Thiết lập mối liên kết giữa ứ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 Tuyên bố của Digital AssetLinks dưới đây:

<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 do Hoạt động đáng tin cậy trên web mở.

Quay lại tệp kê khai của ứng dụng Android, AndroidManifest.xml, liên kết đến bằng cách thêm một 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>

Hiện chúng ta đã thiết lập mối quan hệ từ ứng dụng Android với của bạn. Sẽ hữu ích khi gỡ lỗi phần này của mối quan hệ mà không cần tạo từ trang web đến ứng dụng.

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

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

1. Mở Chrome trên thiết bị phát triển, chuyển đến chrome://flags, tìm kiếm cho mục có tên Bật dòng lệnh trên các thiết bị không bị can thiệp vào hệ thống và thay đổi nó thành ĐÃ BẬT rồi khởi động lại trình duyệt.
2. Tiếp theo, trên ứng dụng Terminal của hệ điều hành, hãy sử dụng Cầu gỡ lỗi Android (được cài đặt cùng với Android Studio) rồi 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 trên Android Studio. Chiến lược phát hành đĩa đơn ứng dụng hiện sẽ được hiển thị ở chế độ toàn màn hình.

Lưu ý: Bạn có thể cần phải buộc đóng Chrome để trình khởi động lại đúng cách dòng lệnh. Chuyển đến phần Cài đặt Android > Ứng dụng và thông báo > Chrome, rồi nhấp vào Buộc dừng.

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

Nhà phát triển cần thu thập 2 thông tin từ để 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. Chiến dịch này là tên gói giống với tên gói được tạo khi tạo ứng dụng. Bạn cũng có thể tìm thấy bên trong Module build.gradle, bên dưới Tập lệnh Gradle > build.gradle (Mô-đun: ứng dụng) và là giá trị của 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. Cùng một chữ ký này đượ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, ALIAS và mật khẩu cho kho khoá, như bạn sẽ cần đến khoá này cho bước tiếp theo.

Trích xuất vân tay số SHA-256 bằng phương pháp keytool, bằng 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 chứng chỉ Certificate (Chứng chỉ) vân tay số. Sau đâ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 này, 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 và nhấn Tạo báo cáo. Sao chép bảng sao kê đã tạo và phân phát quảng cáo đó từ miền của bạn từ URL /.well-known/assetlinks.json.

Lưu ý: Tệp AssetLinks phải nằm trong /.well-known/assetlinks.json, ở gốc của miền vì đó sẽ là nơi Chrome sẽ tìm.

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 nên tạo biểu tượng của riêng mình và tạo sự khác biệt cho của những ứng dụng khác trên Trình chạy Android.

Android Studio chứa Image Asset Studio, Công cụ này cung cấp các công cụ cần thiết để tạo đúng biểu tượng, cho mỗi và định dạng nhu cầu của ứng dụng.

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 của Trình hướng dẫn. để tạo biểu tượng tuỳ chỉnh cho ứng dụng.

Tạo APK đã ký

Với tệp assetlinks được đặt vào miền của bạn và thẻ asset_statements đã đị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, các bước để thực hiện việc này được áp dụng rộng rãi được ghi nhận.

Bạn có thể cài đặt APK đầu ra vào một thiết bị thử nghiệm 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 xem có lỗi không thông báo 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ị thử nghiệm đã 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 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 khác nhau và mật độ pixel. Để đảm bảo Màn hình chờ hiển thị đẹp mắt trên tất cả các thiết bị, bạn cần tạo hình ảnh cho mỗi mật độ pixel.

Thông tin 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ụ là tạo hình ảnh là 320x320dp, thể hiện hình vuông 2x2 inch trên màn hình thiết bị có mật độ bất kỳ và tương đương với 320x320 pixel ở mật độ mdpi.

Từ đó, chúng tôi có thể lấy 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ố được áp dụng cho kích thước cơ sở (320x320dp), kích thước thu được (tính theo pixel) và vị trí mà bạn nên thêm hình ảnh vào 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 pixel	/res/drawable-mdpi/
ldpi	0,75x	240x240 pixel	/res/drawable-ldpi/
hdpi	Gấp 1,5 lần	480x480 pixel	/res/drawable-hdpi/
xhdpi	2x	640x640 px	/res/drawable-xhdpi/
xxhdpi	3x	960x960 px	/res/drawable-xxhdpi/
xxxhdpi	4x	1280x1280 px	/res/drawable-xxxhdpi/

Lưu ý: Giải pháp thay thế cho việc tạo tất cả các kích thước hình ảnh là sử dụng một vectơ vẽ được. Vector Asset Studio cung cấp các công cụ giúp nhà phát triển chuyển đổi SVG thành vectơ vẽ được trên Android.

Cập nhật ứng dụng

Với các hình ảnh cho màn hình chờ đã tạo, đã đến lúc thêm 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>

Lưu ý: Hãy nhớ thay đổi thuộc tính android:authorities khi tạo trình cung cấp. vì hai ứng dụng không thể có cùng quyền trên một thiết bị.

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>

Hãy đảm bảo rằng giá trị của 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 hoạt động chạy trong suốt

Ngoài ra, hãy đảm bảo LauncherActivity trong suốt để tránh bị trắng màn hình hiện trước màn hình chờ bằng cách đặt giao diện rõ 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 với Trusted Web Hoạt động. Để gửi ý kiến phản hồi, hãy liên hệ với chúng tôi theo địa chỉ @ChromiumDev.