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ínhandroid: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ínhandroid: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ínhapplicationId
. - 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.