Hướng dẫn nhanh

Peter Conn
Peter Conn

Hoạt động đáng tin cậy trên web có thể hơi khó thiết lập, đặc biệt nếu bạn chỉ muốn hiển thị trang web của mình. Hướng dẫn này sẽ chỉ cho bạn cách tạo một dự án cơ bản sử dụng Hoạt động đáng tin cậy trên web, bao gồm tất cả yêu cầu.

Khi kết thúc hướng dẫn này, bạn sẽ:

  • Đã sử dụng Bubblewrap để tạo một ứng dụng sử dụng Hoạt động đáng tin cậy trên web và vượt qua quy trình xác minh.
  • Tìm hiểu về trường hợp khoá ký được sử dụng.
  • Có thể xác định chữ ký mà Ứng dụng Android của bạn đang dùng để tạo bản dựng.
  • Biết cách tạo tệp Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số) cơ bản.

Để làm theo hướng dẫn này, bạn cần:

  • Node.js 10 trở lên được cài đặt trên máy tính phát triển.
  • Một điện thoại hoặc trình mô phỏng Android đã kết nối và được thiết lập cho hoạt động phát triển (Bật tuỳ chọn gỡ lỗi qua USB nếu bạn đang dùng điện thoại thực).
  • Trình duyệt hỗ trợ Hoạt động đáng tin cậy trên web trên điện thoại phát triển của bạn. Chrome 72 trở lên sẽ hoạt động. Chúng tôi cũng sắp hỗ trợ các trình duyệt khác.
  • Trang web bạn muốn xem trong phần Hoạt động đáng tin cậy trên web.

Hoạt động đáng tin cậy trên web cho phép ứng dụng Android chạy Thẻ trình duyệt toàn màn hình mà không cần giao diện người dùng của trình duyệt nào. Khả năng này chỉ dành cho những trang web mà bạn sở hữu và bạn chứng minh điều này bằng cách thiết lập Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số). Chúng ta sẽ nói thêm về hai tính năng này sau.

Khi bạn chạy một Hoạt động đáng tin cậy trên web, trình duyệt sẽ kiểm tra để đảm bảo Đường liên kết đến tài sản kỹ thuật số được xem, đây được gọi là xác minh. Nếu xác minh không thành công, trình duyệt sẽ quay lại hiển thị trang web của bạn dưới dạng một Thẻ tuỳ chỉnh.

Cài đặt và định cấu hình Bubblewrap

Bubblewrap là một tập hợp các thư viện và công cụ dòng lệnh (CLI) cho Node.js, giúp các nhà phát triển tạo, xây dựng và chạy các Ứng dụng web tiến bộ bên trong các ứng dụng Android bằng cách sử dụng Hoạt động trên web đáng tin cậy.

Bạn có thể cài đặt CLI bằng lệnh sau:

npm i -g @bubblewrap/cli

Thiết lập môi trường

Trong lần đầu chạy Bubblewrap, tính năng này sẽ đề xuất tự động tải xuống và cài đặt các phần phụ thuộc bên ngoài cần thiết. Bạn nên cho phép công cụ này thực hiện việc này, vì điều đó đảm bảo rằng các phần phụ thuộc được định cấu hình chính xác. Hãy xem tài liệu về Bubblewrap để sử dụng bản cài đặt các công cụ dòng lệnh Android hoặc Bộ phát triển Java (JDK) hiện có.

Khởi động và tạo dự án

Bạn có thể khởi chạy một dự án Android bao bọc PWA bằng cách chạy lệnh init:

bubblewrap init --manifest=https://my-twa.com/manifest.json

Bubblewrap sẽ đọc Tệp kê khai web, yêu cầu nhà phát triển xác nhận các giá trị sẽ được dùng trong dự án Android và tạo dự án bằng các giá trị đó. Sau khi tạo dự án, hãy tạo một tệp APK bằng cách chạy:

bubblewrap build

Chạy

Bước tạo bản dựng sẽ xuất một tệp có tên là app-release-signed.apk. Bạn có thể cài đặt tệp này trên thiết bị phát triển để kiểm thử hoặc tải lên Cửa hàng Play để phát hành.

Bubblewrap cung cấp một lệnh để cài đặt và kiểm thử ứng dụng trên thiết bị cục bộ. Khi thiết bị phát triển được kết nối với máy tính chạy:

bubblewrap install

Ngoài ra, bạn có thể sử dụng công cụ adb.

adb install app-release-signed.apk

Ứng dụng này giờ đây sẽ có trên trình chạy thiết bị. Khi mở ứng dụng, bạn sẽ thấy trang web của mình được khởi chạy dưới dạng Thẻ tuỳ chỉnh, không phải Hoạt động trên web đáng tin cậy. Lý do là vì chúng tôi chưa thiết lập tính năng xác thực Đường liên kết đến tài sản kỹ thuật số, nhưng trước tiên...

Các lựa chọn thay thế Giao diện người dùng đồ hoạ (GUI) cho Bubblewrap

Trình tạo PWA cung cấp giao diện GUI sử dụng thư viện Bubblewrap để tạo dự án Hoạt động đáng tin cậy trên web. Hãy xem thêm hướng dẫn về cách sử dụng Trình tạo PWA để tạo một ứng dụng Android mở PWA của bạn trong bài đăng này trên blog.

Lưu ý về khoá ký

Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số) có tính đến khoá mà một tệp APK đã được ký và nguyên nhân phổ biến khiến việc xác minh không thành công là sử dụng sai chữ ký. (Hãy nhớ rằng không xác minh được có nghĩa là bạn sẽ khởi chạy trang web của mình dưới dạng Tab tùy chỉnh với giao diện người dùng của trình duyệt ở đầu trang.) Khi Bubblewrap tạo ứng dụng, một APK sẽ được tạo bằng cách thiết lập khoá trong bước init. Tuy nhiên, khi bạn phát hành ứng dụng trên Google Play, chúng tôi có thể tạo một khoá khác cho bạn, tuỳ thuộc vào cách bạn chọn xử lý khoá ký. Tìm hiểu thêm về các phím ký và mối liên hệ của chúng với Bubblewrap và Google Play.

Về cơ bản, Đường liên kết đến tài sản kỹ thuật số bao gồm một tệp trên trang web trỏ đến ứng dụng và một số siêu dữ liệu trong ứng dụng trỏ đến trang web của bạn.

Sau khi tạo tệp assetlinks.json, hãy tải tệp đó lên trang web của bạn tại .well-known/assetlinks.json so với thư mục gốc) để trình duyệt có thể xác minh ứng dụng của bạn một cách chính xác. Xem bài viết chuyên sâu về Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số) để biết thêm thông tin về mối liên hệ giữa đường liên kết này với khoá ký.

Đang kiểm tra trình duyệt

Hoạt động đáng tin cậy trên web sẽ cố gắng tuân thủ lựa chọn trình duyệt mặc định của người dùng. Nếu trình duyệt mặc định của người dùng hỗ trợ Hoạt động đáng tin cậy trên web, thì trình duyệt đó sẽ được khởi chạy. Nếu không, nếu có bất kỳ trình duyệt nào đã cài đặt hỗ trợ Hoạt động đáng tin cậy trên web, thì trình duyệt đó sẽ được chọn. Cuối cùng, chế độ mặc định là quay lại chế độ Thẻ tuỳ chỉnh.

Điều này có nghĩa là nếu đang gỡ lỗi sự cố nào đó có liên quan đến Hoạt động đáng tin cậy trên web, bạn nên đảm bảo rằng bạn đang sử dụng trình duyệt mà bạn cho rằng mình đang sử dụng. Bạn có thể sử dụng lệnh sau để kiểm tra xem trình duyệt nào đang được sử dụng:

> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome

Các bước tiếp theo

Hy vọng rằng nếu làm theo hướng dẫn này, bạn sẽ có Hoạt động đáng tin cậy trên web và có đủ kiến thức để gỡ lỗi những gì đang xảy ra khi quá trình xác minh không thành công. Nếu không, hãy xem thêm các khái niệm về Android dành cho nhà phát triển web hoặc báo cáo vấn đề trên GitHub dựa trên các tài liệu này.

Đối với các bước tiếp theo, bạn nên bắt đầu bằng cách tạo biểu tượng cho ứng dụng. Sau khi thực hiện xong, bạn có thể cân nhắc việc triển khai ứng dụng của mình trên Cửa hàng Play.