Chạy ứng dụng Chrome trên thiết bị di động bằng Apache##

Chuỗi công cụ để chạy Ứng dụng Chrome trên thiết bị di động đang ở giai đoạn thử nghiệm sớm dành cho nhà phát triển. Vui lòng cung cấp cho chúng tôi biết ý kiến phản hồi của bạn bằng công cụ theo dõi lỗi trên GitHub, diễn đàn dành cho nhà phát triển Ứng dụng Chrome của chúng tôi, trên Stack Overflow hoặc trang dành cho nhà phát triển trên G+ của chúng tôi.

Ứng dụng Chrome chạy trên cả máy tính và thiết bị di động

Tổng quan

Bạn có thể chạy Ứng dụng Chrome trên Android và iOS thông qua chuỗi công cụ dựa trên Apache Cordova, một khung phát triển thiết bị di động nguồn mở để tạo ứng dụng di động bằng ứng dụng gốc bằng cách sử dụng HTML, CSS và JavaScript.

Apache Cordova bao bọc mã web của ứng dụng bằng shell ứng dụng gốc và cho phép bạn phân phối ứng dụng web kết hợp của bạn qua Google Play và/hoặc Apple App Store. Cách sử dụng Apache Cordova với Ứng dụng Chrome hiện có, bạn sẽ sử dụng dòng lệnh cca (c ordova c hom a pp) .

Tài nguyên khác

Chúng ta hãy bắt đầu.

Bước 1: Cài đặt công cụ phát triển

Chuỗi công cụ Ứng dụng Chrome dành cho thiết bị di động có thể nhắm mục tiêu iOS 6 trở lên và Android 4.x trở lên.

Phần phụ thuộc trong quá trình phát triển cho tất cả nền tảng

  • Cần có Node.js phiên bản 0.10.0 (trở lên) với npm:

    • Windows: Cài đặt Node.js bằng cách sử dụng các tệp thực thi cài đặt có thể tải xuống từ nodejs.org.
    • OS X hoặc Linux: Các tệp thực thi cài đặt cũng có tại nodejs.org. Nếu bạn muốn tránh không cần truy cập thư mục gốc, nên cài đặt qua nvm có thể sẽ thuận tiện hơn. Ví dụ:
    curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.bash_profile || source ~/.profile || source ~/.bashrc
nvm install 0.10
nvm alias default 0.10

Nhắm mục tiêu Android

Khi phát triển một ứng dụng dành cho Android, bạn cũng sẽ cần cài đặt:

  • Java JDK 7 (trở lên)
  • SDK Android phiên bản 4.4.2 (trở lên)
    • Cài đặt SDK Android và Công cụ cho nhà phát triển Android đi kèm với Android ADT Bundle.
    • Thêm sdk/tools và sdk/platform-tools vào biến môi trường PATH.
    • OS X: Phiên bản Eclipse đi kèm với SDK Android yêu cầu JRE 6. Nếu đang mở Eclipse.app không nhắc bạn cài đặt JRE 6, hãy tải ứng dụng này qua Mac App Store.
    • Linux: SDK Android yêu cầu thư viện hỗ trợ 32 bit. Trên Ubuntu, hãy lấy những truy cập này qua: apt-get install ia32-libs.
  • Apache Ant

Nhắm mục tiêu iOS

Xin lưu ý rằng bạn chỉ có thể phát triển iOS trên OS X. Ngoài ra, bạn sẽ cần cài đặt:

  • Xcode 5 (trở lên) bao gồm các công cụ dòng lệnh của Xcode
  • ios-Implement (cần để triển khai cho thiết bị iOS)
    • npm install -g ios-deploy
  • ios-sim (cần triển khai cho Trình mô phỏng iOS)
    • npm install -g ios-sim
  • Không bắt buộc: Đăng ký với tư cách nhà phát triển iOS
    • Điều này là cần thiết để thử nghiệm trên các thiết bị thực và để gửi cho cửa hàng ứng dụng.
    • Bạn có thể bỏ qua đăng ký nếu bạn chỉ định sử dụng trình mô phỏng iPhone/iPad.

Cài đặt công cụ dòng lệnh cca

Cài đặt cca qua npm:

npm install -g cca

Cách cập nhật chuỗi công cụ bằng các bản phát hành mới vào lúc khác: npm update -g cca.

Xác nhận rằng mọi thứ được cài đặt chính xác bằng cách chạy lệnh sau từ dòng lệnh:

cca checkenv

Bạn sẽ thấy số phiên bản cca được cung cấp và xác nhận về SDK Android hoặc iOS của mình cài đặt.

Bước 2: Tạo một dự án

Để tạo một dự án Ứng dụng Chrome mặc định cho thiết bị di động trong thư mục có tên YourApp, hãy chạy:

cca create YourApp

Nếu bạn đã tạo Ứng dụng Chrome và muốn chuyển ứng dụng này sang nền tảng di động, bạn có thể sử dụng liên kết Cờ --link-to để tạo một liên kết tượng trưng đến nó:

cca create YourApp --link-to=path/to/manifest.json

Nếu muốn sao chép các tệp hiện có trong ứng dụng Chrome, bạn có thể sử dụng cờ --copy-from:

cca create YourApp --copy-from=path/to/manifest.json

Bạn chưa có ứng dụng Chrome của riêng mình? Hãy thử một trong nhiều mẫu Ứng dụng Chrome dành cho thiết bị di động .

Bước 3: Phát triển

Bạn có thể tạo và chạy ứng dụng theo 2 cách:

  • Lựa chọn A: Từ dòng lệnh, sử dụng công cụ cca hoặc
  • Lựa chọn B: Bằng cách sử dụng một IDE, như Eclipse hoặc Xcode. Việc sử dụng IDE là hoàn toàn không bắt buộc (nhưng thường hữu ích) để hỗ trợ khởi chạy, định cấu hình và gỡ lỗi ứng dụng dành cho thiết bị di động kết hợp của bạn.

Lựa chọn A: Phát triển và xây dựng bằng dòng lệnh

Trên thư mục gốc của thư mục dự án do cca tạo:

Android

  • Cách chạy ứng dụng trên Trình mô phỏng Android: cca emulate android
    • Lưu ý: Bạn phải thiết lập trình mô phỏng. Bạn có thể chạy android avd để thiết lập. Tải các hình ảnh bổ sung của trình mô phỏng xuống bằng cách chạy android. Để các hình ảnh intel chạy nhanh hơn, cài đặt HAXM của Intel.
  • Cách chạy ứng dụng trên thiết bị Android đã kết nối: cca run android

iOS

  • Cách chạy ứng dụng trên Trình mô phỏng iOS: cca emulate ios
  • Cách chạy ứng dụng trên thiết bị iOS đã kết nối: cca run ios
    • Lưu ý: Để thực hiện điều này, bạn phải thiết lập Hồ sơ cấp phép cho thiết bị.

Lựa chọn B: Phát triển và xây dựng bằng IDE

Android

  1. Trong Eclipse, chọn File -> Import
  2. Chọn Android > Existing Android Code Into Workspace
  3. Nhập từ đường dẫn mà bạn vừa tạo bằng cca.
    • Bạn sẽ phải nhập hai dự án, một trong số đó là *-CordovaLib.
  4. Nhấp vào nút Phát để chạy ứng dụng của bạn.
    • Bạn sẽ cần tạo Cấu hình chạy (như với tất cả ứng dụng Java). Bạn thường nhận được tự động được nhắc cho cài đặt này lần đầu tiên.
    • Bạn cũng sẽ cần quản lý các thiết bị/trình mô phỏng của mình trong lần đầu tiên.

iOS

  1. Mở dự án trong Xcode bằng cách nhập nội dung sau đây vào cửa sổ dòng lệnh:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Đảm bảo bạn đang tạo mục tiêu phù hợp.

    Ở trên cùng bên trái (bên cạnh nút Chạy và Dừng), có một trình đơn thả xuống để bạn chọn dự án mục tiêu và thiết bị. Đảm bảo đã chọn YourApp chứ không phải CordovaLib.

  3. Nhấp vào nút Phát.

Thực hiện các thay đổi đối với mã nguồn của ứng dụng

Các tệp HTML, CSS và JavaScript nằm trong thư mục www của thư mục dự án cca.

Lưu ý quan trọng: Sau khi thay đổi www/, bạn phải chạy cca prepare trước khi triển khai . Nếu bạn đang chạy cca build, cca run hoặc cca emulate từ dòng lệnh, được thực hiện tự động. Nếu đang phát triển bằng Eclipse/XCode, bạn phải chạy cca prepare theo cách thủ công.

Gỡ lỗi

Bạn có thể gỡ lỗi Ứng dụng Chrome trên thiết bị di động giống như cách bạn gỡ lỗi ứng dụng Cordova.

Bước 4: Các bước tiếp theo

Giờ đây, khi mà bạn đã có Ứng dụng Chrome dành cho thiết bị di động đang hoạt động, bạn sẽ có nhiều cách để cải thiện trải nghiệm trên thiết bị di động.

Tệp kê khai trên thiết bị di động

Có một số cài đặt ứng dụng Chrome nhất định chỉ áp dụng cho các nền tảng di động. Chúng tôi đã tạo một Tệp www/manifest.mobile.json để chứa những giá trị này và các giá trị cụ thể được tham chiếu xuyên suốt tài liệu về trình bổ trợ và hướng dẫn này.

Bạn nên điều chỉnh các giá trị tại đây cho phù hợp.

Biểu tượng

Ứng dụng dành cho thiết bị di động cần nhiều độ phân giải biểu tượng hơn so với Ứng dụng Chrome dành cho máy tính để bàn.

Đối với Android, bạn cần có các kích thước sau:

  • 36px, 48px, 78px, 96px

Đối với các ứng dụng iOS, kích thước bắt buộc sẽ khác nhau tuỳ thuộc vào việc bạn hỗ trợ iOS 6 và iOS 7. Số lượng biểu tượng tối thiểu bắt buộc là:

  • iOS 6: 57px, 72px, 114px, 144px
  • iOS 7: 72px, 120px, 152px

Danh sách biểu tượng hoàn chỉnh sẽ có dạng như sau trong tệp manifest.json:

"icons": {
  "16": "assets/icons/icon16.png",
  "36": "assets/icons/icon36.png",
  "48": "assets/icons/icon48.png",
  "57": "assets/icons/icon57.png",
  "72": "assets/icons/icon72.png",
  "78": "assets/icons/icon78.png",
  "96": "assets/icons/icon96.png",
  "114": "assets/icons/icon114.png",
  "120": "assets/icons/icon120.png",
  "128": "assets/icons/icon128.png",
  "144": "assets/icons/icon144.png",
  "152": "assets/icons/icon152.png"
}

Các biểu tượng sẽ được sao chép vào vị trí thích hợp cho từng nền tảng mỗi khi bạn chạy cca prepare.

Màn hình chờ

Các ứng dụng trên iOS hiển thị một màn hình chờ ngắn khi ứng dụng đang tải. Một tập hợp các cảnh tung lên Cordova mặc định màn hình có trong platforms/ios/[AppName]/Resources/splash.

Các kích thước cần thiết là:

  • 320px x 480px + 2x
  • 768px x 1024px + 2x (iPad dọc)
  • 1024px x 768px + 2x (iPad ngang)
  • 640px x 1146px

cca hiện chưa sửa đổi hình ảnh màn hình chờ.

Bước 5: Xuất bản

Trong thư mục platforms của dự án, bạn có hai dự án gốc hoàn chỉnh: một dự án dành cho Android và một giải pháp cho iOS. Bạn có thể tạo phiên bản phát hành của các dự án này và xuất bản chúng lên Google Play hoặc lên App Store của iOS.

Phát hành lên Cửa hàng Play

Cách xuất bản ứng dụng Android lên Cửa hàng Play:

  1. Cập nhật hai mã phiên bản Android, sau đó chạy cca prepare:

    • android:versionName được thiết lập bằng khoá version trong www/manifest.json (điều này sẽ thiết lập giá trị phiên bản của ứng dụng đóng gói dành cho máy tính để bàn).
    • android:versionCode được thiết lập bằng khoá versionCode trong www/manifest.mobile.js.

  2. Chỉnh sửa (hoặc tạo) platforms/android/ant.properties và đặt key.store và key.alias (như giải thích trong tài liệu dành cho nhà phát triển Android).

  3. Xây dựng dự án của bạn:

    ./platforms/android/cordova/build --release

  4. Tìm tệp .apk đã ký của bạn nằm trong platforms/android/ant-build/.

  5. Tải ứng dụng đã ký lên Google Play Developer Console.

Xuất bản lên App Store của iOS

  1. Cập nhật phiên bản ứng dụng bằng cách đặt khoá CFBundleVersion trong www/manifest.mobile.js, sau đó chạy cca prepare.

  2. Mở tệp dự án Xcode có trong thư mục platforms/ios của bạn:

    mở nền tảng/ios/*.xcodeproj

  3. Làm theo Hướng dẫn phân phối ứng dụng của Apple.

Các điểm cần cân nhắc đặc biệt

Nếu bạn mới sử dụng Ứng dụng Chrome, vấn đề lớn nhất là một số tính năng web bị tắt. Tuy nhiên, một số sản phẩm trong số này hiện hoạt động trong Cordova.

Ứng dụng Chrome có thể không hoạt động tốt trên thiết bị di động. Một số sự cố thường gặp khi chuyển sang mạng di động:

  • Vấn đề về bố cục với màn hình nhỏ, đặc biệt là khi theo hướng dọc.
  • Kích thước cửa sổ Ứng dụng Chrome được đặt qua chrome.app.window sẽ bị bỏ qua, thay vào đó sử dụng của thiết bị.
    • Cách khắc phục đề xuất: Xoá kích thước cửa sổ được cố định giá trị trong mã; hãy thiết kế ứng dụng của mình với các kích thước khác nhau tâm trí.
  • Các nút và đường liên kết nhỏ sẽ khó nhấn bằng ngón tay.
    • Cách khắc phục đề xuất: Điều chỉnh đích chạm có kích thước ít nhất là 44 x 44 điểm.
  • Hành vi không mong muốn khi dựa vào thao tác di chuột (không có trên màn hình cảm ứng).
    • Cách khắc phục đề xuất: Ngoài thao tác di chuột, hãy bật các phần tử trên giao diện người dùng (như trình đơn thả xuống và chú thích) nhấn.
  • Độ trễ nhấn là 300 mili giây.

Các API Chrome được hỗ trợ

Chúng tôi đã cung cấp nhiều API chính của Chrome cho Ứng dụng Chrome dành cho thiết bị di động, bao gồm:

  • danh tính – người dùng đăng nhập bằng OAuth2
  • thanh toán - bán hàng hóa ảo trong ứng dụng dành cho thiết bị di động của bạn
  • pushMessaging – đẩy thông báo đến ứng dụng của bạn từ máy chủ
  • socket – gửi và nhận dữ liệu qua mạng bằng TCP và UDP
  • thông báo (chỉ dành cho Android) – gửi thông báo chi tiết từ ứng dụng di động của bạn
  • storage - lưu trữ và truy xuất dữ liệu khóa-giá trị cục bộ
  • syncFileSystem - lưu trữ và truy xuất các tệp được Google Drive hỗ trợ
  • báo thức – chạy các tác vụ theo định kỳ
  • idle (không hoạt động) – phát hiện khi nào trạng thái rảnh của máy thay đổi
  • nguồn – ghi đè tính năng quản lý nguồn của hệ thống

Tuy nhiên, không phải tất cả các API JavaScript của Chrome đều được triển khai. Và không phải tất cả các tính năng của Chrome Desktop đều có trên thiết bị di động:

  • không có thẻ <webview>
  • không có IndexedDB
  • không có getUserMedia()
  • không có NaCl

Bạn có thể theo dõi tiến trình trên trang Trạng thái API.

Công cụ dành cho nhà phát triển ứng dụng Chrome

Công cụ dành cho nhà phát triển ứng dụng Chrome (ADT) dành cho Android là một ứng dụng Android độc lập cho phép bạn tải xuống và chạy Ứng dụng Chrome mà không cần thiết lập chuỗi công cụ phát triển như mô tả ở trên. Sử dụng Chrome ADT khi bạn muốn xem trước nhanh Ứng dụng Chrome hiện có (đã được đóng gói dưới dạng .crx) trên thiết bị Android của bạn.

Chrome ADT dành cho Android hiện ở bản phát hành trước alpha. Để dùng thử, hãy xem Ghi chú phát hành ChromeADT.apk để biết hướng dẫn cài đặt và sử dụng.