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 xem trước sớm dành cho nhà phát triển. Vui lòng gửi ý kiến phản hồi cho chúng tôi thông qua 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, trên Stack Overflow hoặc trang dành cho nhà phát triển trên Google+.

Một ứ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 ApacheCordova, một khung phát triển nguồn mở dành cho thiết bị di động để tạo ứng dụng di động có khả năng gốc bằng cách sử dụng HTML, CSS và JavaScript.

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

Tài nguyên khác

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

Bước 1: Cài đặt các 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.

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

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

    • Windows: Cài đặt Node.js bằ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: Bạn cũng có thể tải các tệp thực thi cài đặt từ nodejs.org. Nếu bạn không muốn cần quyền truy cập thư mục gốc, thì bạn nên cài đặt qua nvm. 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 ứng dụng cho Android, bạn cũng 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à Bộ công cụ dành cho nhà phát triển Android đi kèm với Gói ADT Android.
    • 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 JRE 6 qua Mac App Store.
    • Linux: SDK Android yêu cầu thư viện hỗ trợ 32 bit. Trên Ubuntu, hãy tải 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 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-deploy (cần thiết để triển khai cho thiết bị iOS)
    • npm install -g ios-deploy
  • ios-sim (cần thiết để triển khai cho Trình mô phỏng iOS)
    • npm install -g ios-sim
  • Không bắt buộc: Đăng ký làm 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 thông qua npm:

npm install -g cca

Để cập nhật chuỗi công cụ sau này 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 trên dòng lệnh:

cca checkenv

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

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

Để tạo dự án Ứng dụng Chrome 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 một Ứng dụng Chrome và muốn chuyển ứng dụng đó sang một nền tảng di động, bạn có thể sử dụng cờ --link-to để tạo một symlink đến ứng dụng đó:

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

Nếu muốn sao chép các 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 dùng 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 1: Từ dòng lệnh, sử dụng công cụ cca hoặc
  • Cách B: Bằng cách sử dụng một IDE, chẳng hạn 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 di động kết hợp.

Cách A: Phát triển và tạo bản dựng bằng dòng lệnh

Từ thư mục gốc của 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 thì mới có thể thực hiện việc này. Bạn có thể chạy android avd để thiết lập. Tải các hình ảnh trình mô phỏng bổ sung bằng cách chạy android. Để các hình ảnh intel chạy nhanh hơn, hãy 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, hãy chọn File -> Import.
  2. Chọn Android > Existing Android Code Into Workspace.
  3. Nhập từ đường dẫn bạn vừa tạo bằng cca.
    • Bạn sẽ có hai dự án để nhập, trong đó một dự án là *-CordovaLib.
  4. Nhấp vào nút Play (Chạy) để chạy ứng dụng.
    • 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 tự động được nhắc thực hiện việc này vào 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 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), bạn sẽ thấy một trình đơn thả xuống để chọn dự án và thiết bị mục tiêu. Đảm bảo bạn chọn YourApp chứ không phải CordovaLib.

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

Điều chỉnh 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 thực hiện các thay đổi đối vớ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 từ dòng lệnh, thì bước chuẩn bị sẽ đượ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, 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 dành cho thiết bị di động

Một số chế độ cài đặt Ứng dụng Chrome 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 tệp này và các giá trị cụ thể được tham chiếu trong toàn bộ 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ị ở đây cho phù hợp.

Biểu tượng

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

Đối với Android, bạn 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ố 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 đầ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 vào các 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 bộ màn hình chờ Cordova mặc định được đưa vào platforms/ios/[AppName]/Resources/splash.

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

Hình ảnh màn hình chờ hiện không được cca sửa đổi.

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 dự án dành cho iOS. Bạn có thể tạo các phiên bản phát hành của các dự án này và phát hành các phiên bản đó lên Google Play hoặc 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 đặt bằng khoá version trong www/manifest.json (đây cũng là cách đặt phiên bản của ứng dụng đóng gói dành cho máy tính).
    • android:versionCode được đặt bằng cách sử dụ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ư được giải thích trong tài liệu dành cho nhà phát triển Android).

  3. Tạo dự án:

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

  4. Tìm tệp .apk đã ký nằm bên 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 trong thư mục platforms/ios:

    mở platforms/ios/*.xcodeproj

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

Những điểm cần cân nhắc đặc biệt

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

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

  • Vấn đề về bố cục trên màn hình nhỏ, đặc biệt là khi ở hướng dọc.
  • Kích thước cửa sổ Ứng dụng Chrome được đặt thông qua chrome.app.window sẽ bị bỏ qua, thay vào đó, hệ thống sẽ sử dụng kích thước gốc 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ã; thiết kế ứng dụng của bạn theo nhiều kích thước.
  • Bạn sẽ 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 mục tiêu chạm thành ít nhất 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.
    • Giải pháp đề xuất: Ngoài thao tá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 là 300 mili giây.

Các 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 hoá ảo trong ứng dụng di động
  • pushMessaging – đẩy thông báo từ máy chủ đến ứng dụng
  • ổ cắm – 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 đa dạng thức từ ứng dụng di động
  • 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 sao lưu bằng Google Drive
  • chuông báo – chạy các tác vụ định kỳ
  • idle (rảnh) – phát hiện thời điểm trạng thái rảnh của máy thay đổi
  • power (nguồn) – ghi đè các tính năng quản lý nguồn của hệ thống

Tuy nhiên, không phải tất cả API JavaScript của Chrome đều được triển khai. Ngoài ra, không phải tính năng nào của Chrome trên máy tính cũng 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) 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 nhanh chóng xem trước một Ứ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 ở 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.