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 ban đầu dành cho nhà phát triển. Bạn có thể chia sẻ ý kiến phản hồi cho chúng tôi qua công cụ theo dõi lỗi 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 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 một chuỗi công cụ dựa trên Apache Cordova, một khung phát triển nguồn mở cho thiết bị di động để tạo ứng dụng dành cho thiết bị di động có các chức năng gốc bằng cách sử dụng HTML, CSS và JavaScript.

Apache Cutts bao bọc mã web của ứng dụng bằng một shell ứng dụng gốc và cho phép bạn phân phối ứng dụng web kết hợp qua Google Play và/hoặc App Store của Apple. Để sử dụng Apache AdSense với ứng dụng Chrome hiện có, bạn hãy sử dụng công cụ dòng lệnh cca (c ordova c hrom a pp).

Tài nguyên khác

Hãy cùng 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 đến iOS 6 trở lên và Android 4.x trở lên.

Các phần phụ thuộc phát triển cho tất cả nền tảng

  • Node.js phiên bản 0.10.0 (trở lên) với npm là bắt buộc:

    • 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ó sẵn từ nodejs.org. Nếu muốn tránh phải truy cập thư mục gốc, bạn có thể cài đặt qua nvm để 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ụ dành cho nhà phát triển Android đi kèm với gói Android ADT.
    • 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 việc 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 các tệ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 có chứa các công cụ dòng lệnh Xcode
  • ios-deploy (cần triển khai cho một 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 là nhà phát triển iOS
    • Điều này cần thiết cho việc thử nghiệm trên thiết bị thực và để gửi đến cửa hàng ứng dụng.
    • Bạn có thể bỏ qua bước đăng ký nếu 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ập nhật chuỗi công cụ vào lúc khác bằng các bản phát hành mới: npm update -g cca.

Xác nhận rằng mọi thứ đã được cài đặt đúng cách 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 của cca được xuất và thông tin xác nhận về việc cài đặt SDK Android hoặc iOS.

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

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

cca create YourApp

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

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

Thay vào đó, nếu muốn sao chép tệp Ứng dụng Chrome hiện có, 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 ứng dụng Chrome mẫu có hỗ trợ 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:

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

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

Tại 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 ý: Để thực hiện thao tác này, 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 quy trình này. Tải thêm hình ảnh trình mô phỏng xuống bằng cách chạy android. Để hình ảnh intel chạy nhanh hơn, hãy cài đặt HAXM của Intel.
  • Để chạy ứng dụng trên một 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 một thiết bị iOS được kết nối: cca run ios
    • Lưu ý: Để thực hiện việc này, bạn phải thiết lập Hồ sơ cấp phép cho thiết bị của mình.

Phương án B: Phát triển và tạo bản 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 dữ liệu từ đường dẫn mà bạn vừa tạo bằng cca.
    • Bạn sẽ có 2 dự án cần nhập, một trong số đó là *-CordovaLib.
  4. Nhấp vào nút Phát để chạy ứng dụng.
    • Bạn sẽ cần tạo một Cấu hình chạy (như với tất cả ứng dụng Java). Bạn thường được tự động nhắc lần đầu tiên.
    • Bạn cũng 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 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à nút Dừng), có một trình đơn thả xuống để chọn dự án và thiết bị mục tiêu. Hãy đảm bảo bạn đã chọn YourApp chứ không phải CordovaLib.

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

Thay đổi mã nguồn ứ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 ứng dụng. Nếu bạn đang chạy cca build, cca run hoặc cca emulate qua dòng lệnh, thì bước chuẩn bị sẽ tự động được thực hiện. 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 biến ngay.

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

Giờ đây, khi bạn đã có Ứng dụng Chrome dành cho thiết bị di động đang hoạt động, có rất 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ố chế độ cài đặt Ứng dụng Chrome nhất định chỉ áp dụng cho nền tảng di động. Chúng tôi đã tạo một tệp www/manifest.mobile.json để chứa các giá trị này và các giá trị cụ thể được tham chiếu trong 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 một vài độ phân giải so với Ứng dụng Chrome dành cho máy tính.

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

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

Đối với ứ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 hay iOS 7. Số 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 đầy đủ 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 đến những vị trí thích hợp trên 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 đang tải. Một nhóm màn hình chờ mặc định của AdSense được bao gồm trong platforms/ios/[AppName]/Resources/splash.

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

  • 320 pixel x 480 pixel + 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ó 2 dự án gốc hoàn chỉnh: một dành cho Android và một dành 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à phát hành lên Google Play hoặc iOS App Store.

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 2 mã phiên bản Android, sau đó chạy cca prepare:

    • android:versionName được thiết lập bằng cách sử dụng khoá version trong www/manifest.json (việc này cũng sẽ thiết lập phiên bản của ứng dụng đóng gói cho máy tính).
    • 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 các thuộc tính 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:

    ./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.

Phát hành 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ố ứng dụng trong số này hiện vẫn hoạt động trong Search

Ứ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 số sang điện thoại 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 và sử dụng kích thước gốc của thiết bị.
    • Cách khắc phục đề xuất: Xoá các kích thước cửa sổ được mã hoá cứng; lưu ý thiết kế ứng dụng theo nhiều kích thước.
  • Khó nhấn vào các nút và đường liên kết nhỏ bằng ngón tay.
    • Cách khắc phục đề xuất: Điều chỉnh đích chạm sao cho có kích thước tối thiểu là 44 x 44 điểm.
  • Hành vi không mong muốn khi người dùng di chuột không tồn tại trên màn hình cảm ứng.
    • Cách khắc phục đề xuất: Ngoài việc di chuột, hãy kích hoạt các thành phần trên giao diện người dùng như trình đơn thả xuống và chú giải công cụ khi nhấn.
  • Độ trễ nhấn 300 mili giây.

API Chrome được hỗ trợ

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

  • identity – người dùng đăng nhập bằng OAuth2
  • thanh toán - bán hàng hóa ảo trong ứng dụng di động của bạn
  • pushMessaging – đẩy tin nhắn đến ứng dụng từ máy chủ của bạn
  • cổng – gửi và nhận dữ liệu qua mạng bằng TCP và UDP
  • thông báo (Chỉ Android) - gửi thông báo chi tiết từ ứng dụng dành cho thiết bị di động của bạn
  • storage – lưu trữ và truy xuất dữ liệu khoá-giá trị cục bộ
  • syncFileSystem - lưu trữ và truy xuất tệp được Google Drive hỗ trợ
  • chuông báo – chạy tác vụ định kỳ
  • idle – phát hiện khi nào trạng thái rảnh của máy thay đổi
  • Power – ghi đè tính năng quản lý nguồn điệ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ó sẵn trên thiết bị di động:

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

Bạn có thể theo dõi tiến trình từ trang Trạng thái API của chúng tôi.

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) 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. Hãy sử dụng Chrome ADT khi bạn muốn nhanh chóng xem trước ứng dụng Chrome hiện có (đã được đóng gói dưới dạng tệp .crx) trên thiết bị Android.

Chrome ADT dành cho Android hiện đang ở giai đoạn thử nghiệm alpha. Để dùng thử, hãy xem ghi chú phát hành của ChromeADT.apk để nắm được hướng dẫn cài đặt và sử dụng.