Hướng dẫn nhanh

Peter Conn
Peter Conn

Việc thiết lập Hoạt động đáng tin cậy trên web có thể hơi phức tạp, đặc biệt nếu tất cả những gì bạn muốn làm là hiển thị trang web của bạn. 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 mọi vấn đề.

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

  • Đã sử dụng Bubblewrap để tạo ứ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.
  • Biết thời điểm khoá ký của bạn được sử dụng.
  • Có thể xác định chữ ký mà bạn đang dùng để phát triển ứng dụng Android.
  • Tìm hiểu 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 sẽ cần:

  • Node.js 10 trở lên được cài đặt trên máy tính dùng để phát triển.
  • Một điện thoại hoặc trình mô phỏng Android đã kết nối và thiết lập để phát triển (Bật tính năng gỡ lỗi qua USB nếu đang dùng một chiếc đ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 đang sớm hỗ trợ các trình duyệt khác.
  • Một trang web mà 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 của bạn khởi chạy một Thẻ trình duyệt ở chế độ toàn màn hình mà không cần bất kỳ giao diện người dùng trình duyệt nào. Khả năng này chỉ dành cho các trang web mà bạn sở hữu và bạn chứng minh điều này bằng cách đặt Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số). Chúng ta sẽ tìm hiểu thêm về các mô-đun 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 rằng Digital Asset Links (Đường liên kết đến tài sản kỹ thuật số) sẽ kiểm tra quá trình nà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 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à lệnh công cụ dòng (CLI) dành cho Node.js giúp nhà phát triển tạo, xây dựng và chạy Ứng dụng web tiến bộ bên trong các ứng dụng Android bằng chế độ Hoạt động đáng tin cậy trên web.

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

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

Khởi chạy và tạo dự án

Bạn có thể khởi chạy một dự án Android gói một 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 dự án được tạo, hãy tạo một 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 app-release-signed.apk. Tệp này có thể được cài đặt trên thiết bị phát triển để thử nghiệm hoặc đượ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 một thiết bị cục bộ. Với 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 đã sử dụng.

adb install app-release-signed.apk

Ứng dụng hiện đã có trên trình chạy thiết bị. Khi mở ứng dụng, bạn sẽ nhận thấy trang web của bạn được khởi chạy dưới dạng Thẻ tuỳ chỉnh, chứ không phải dưới dạng Hoạt động đáng tin cậy trên web, vì chúng tôi chưa thiết lập 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 giải pháp thay thế cho Giao diện người dùng đồ hoạ (GUI) cho Bubblewrap

PWA Builder cung cấp giao diện GUI sử dụng Bubblewrap để hỗ trợ việc tạo dự án Hoạt động đáng tin cậy trên web. Xem thêm hướng dẫn về cách 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 trên blog này.

Lưu ý về khoá ký

Đường liên kết đến tài sản kỹ thuật số xem xét khoá của tệp APK đã được ký và một nguyên nhân phổ biến khiến việc xác minh không thành công là do sử dụng sai chữ ký. (Hãy nhớ rằng nếu không xác minh được, bạn sẽ khởi chạy trang web của mình dưới dạng một Thẻ tuỳ 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 với một thiết lập khoá trong bước init. Tuy nhiên, khi bạn phát hành ứng dụng trong Google Play, một khoá khác có thể được tạo cho bạn, tuỳ thuộc vào cách bạn chọn xử lý các khoá ký. Tìm hiểu thêm về khoá ký và mối liên hệ giữa chúng với Bubblewrap và Google Play.

Về cơ bản, Digital Asset Links (Đườ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 của bạn 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 này lên trang web của bạn tại .well-known/assetlinks.json tương ứng với thư mục gốc) để trình duyệt có thể xác minh ứng dụng của bạn đúng cách. Vui lòng tham khảo phần phân tích chuyên sâu về Đườ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ệ của thông tin này với khoá ký.

Đang kiểm tra trình duyệt của bạn

Hoạt động đáng tin cậy trên web sẽ cố 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 đã cài đặt nào có 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, hành vi mặc định là quay lại chế độ Thẻ tuỳ chỉnh.

Điều này có nghĩa là nếu bạn gỡ lỗi một mục nào đó liên quan đến Hoạt động đáng tin cậy trên web, bạn nên hãy đảm bảo bạn đang sử dụng trình duyệt mà bạn nghĩ là 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 thì bạn sẽ có một Hoạt động đáng tin cậy trên web hoạt động hiệu quả và để gỡ lỗi những gì đang xảy ra khi xác minh không thành công. Nếu chưa, 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 các tài liệu này.

Để biết các bước tiếp theo, bạn nên bắt đầu bằng tạo biểu tượng cho ứng dụng. Vậy là bạn có thể cân nhắc việc triển khai ứng dụng cho Cửa hàng Play.