Menjalankan Aplikasi Chrome di Seluler Menggunakan Apache Cordova

Toolchain untuk menjalankan Aplikasi Chrome di perangkat seluler masih dalam pratinjau awal developer. Jangan ragu untuk memberikan masukan kepada kami menggunakan pelacak masalah GitHub, forum developer Aplikasi Chrome, di Stack Overflow, atau halaman Developer G+.

Aplikasi Chrome yang berjalan di desktop dan perangkat seluler

Ringkasan

Anda dapat menjalankan Aplikasi Chrome di Android dan iOS melalui toolchain berdasarkan Apache Cordova, framework pengembangan seluler open source untuk membuat aplikasi seluler dengan kemampuan native menggunakan HTML, CSS, dan JavaScript.

Apache Cordova menggabungkan kode web aplikasi Anda dengan shell aplikasi native dan memungkinkan Anda mendistribusikan aplikasi web hybrid melalui Google Play dan/atau Apple App Store. Untuk menggunakan Apache Cordova dengan Aplikasi Chrome yang ada, Anda menggunakan alat command line cca (c ordova c hrome a pp).

Referensi lainnya

  • Ada beberapa pertimbangan khusus yang harus Anda perhatikan saat mengembangkan dengan Cordova; kami telah mencantumkannya di bagian pertimbangan.
  • Untuk melihat API Chrome yang didukung di perangkat seluler, buka halaman Status API.
  • Untuk melihat pratinjau Aplikasi Chrome di perangkat Android tanpa toolchain, gunakan Alat Developer Aplikasi Chrome (ADT).

Mari kita mulai.

Langkah 1: Instal alat pengembangan Anda

Aplikasi Chrome untuk toolchain seluler dapat menargetkan iOS 6+ dan Android 4.x+.

Dependensi pengembangan untuk semua platform

  • Node.js versi 0.10.0 (atau yang lebih baru) dengan npm wajib diisi:

    • Windows: Instal Node.js menggunakan file yang dapat dieksekusi penginstalan yang dapat didownload dari nodejs.org.
    • OS X atau Linux: File yang dapat dieksekusi penginstalan juga tersedia dari nodejs.org. Jika Anda ingin menghindari kebutuhan akan akses root, sebaiknya instal melalui nvm. Contoh:
    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

Menargetkan Android

Saat mengembangkan aplikasi untuk Android, Anda juga perlu menginstal:

  • Java JDK 7 (atau yang lebih baru)
  • Android SDK versi 4.4.2 (atau yang lebih tinggi)
    • Instal Android SDK dan Android Developer Tools yang disertakan dalam Android ADT Bundle.
    • Tambahkan sdk/tools dan sdk/platform-tools ke variabel lingkungan PATH Anda.
    • OS X: Versi Eclipse yang disertakan dengan Android SDK memerlukan JRE 6. Jika Anda tidak diminta untuk menginstal JRE 6 saat membuka Eclipse.app, dapatkan aplikasi tersebut melalui Mac App Store.
    • Linux: Android SDK memerlukan library dukungan 32 bit. Di Ubuntu, dapatkan ini melalui: apt-get install ia32-libs.
  • Apache Ant

Menargetkan iOS

Perhatikan bahwa pengembangan iOS hanya dapat dilakukan di OS X. Selain itu, Anda harus menginstal:

  • Xcode 5 (atau yang lebih baru) yang mencakup alat command line Xcode
  • ios-deploy (diperlukan untuk men-deploy ke perangkat iOS)
    • npm install -g ios-deploy
  • ios-sim (diperlukan untuk men-deploy ke Simulator iOS)
    • npm install -g ios-sim
  • Opsional: Daftar sebagai developer iOS
    • Hal ini diperlukan untuk pengujian di perangkat sungguhan dan untuk mengirimkan ke app store.
    • Anda dapat melewati pendaftaran jika hanya berencana menggunakan simulator iPhone/iPad.

Menginstal alat command line cca

Instal cca melalui npm:

npm install -g cca

Untuk mengupdate toolchain nanti dengan rilis baru: npm update -g cca.

Pastikan semuanya diinstal dengan benar dengan menjalankan perintah ini dari command line:

cca checkenv

Anda akan melihat nomor versi cca yang di-output dan konfirmasi tentang penginstalan SDK Android atau iOS Anda.

Langkah 2: Buat project

Untuk membuat project Aplikasi Chrome seluler default di direktori bernama YourApp, jalankan:

cca create YourApp

Jika telah mem-build Aplikasi Chrome dan ingin mem-port-nya ke platform seluler, Anda dapat menggunakan tanda --link-to untuk membuat symlink ke aplikasi tersebut:

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

Jika ingin menyalin file Aplikasi Chrome yang ada, Anda dapat menggunakan flag --copy-from:

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

Belum memiliki Aplikasi Chrome Anda sendiri? Coba salah satu dari banyak contoh Aplikasi Chrome dengan dukungan seluler.

Langkah 3: Mengembangkan

Anda dapat mem-build dan menjalankan aplikasi dengan dua cara:

  • Opsi A: Dari command line, menggunakan alat cca, atau
  • Opsi B: Dengan menggunakan IDE, seperti Eclipse atau Xcode. Penggunaan IDE sepenuhnya opsional (tetapi sering kali berguna) untuk membantu meluncurkan, mengonfigurasi, dan men-debug aplikasi seluler hybrid Anda.

Opsi A: Mengembangkan dan mem-build menggunakan command line

Dari root folder project Anda yang dibuat oleh cca:

Android

  • Untuk menjalankan aplikasi di Android Emulator: cca emulate android
    • Catatan: Anda harus menyiapkan emulator. Anda dapat menjalankan android avd untuk menyiapkannya. Download image emulator tambahan dengan menjalankan android. Untuk membuat image intel berjalan lebih cepat, instal Intel's HAXM.
  • Untuk menjalankan aplikasi di perangkat Android yang terhubung: cca run android

iOS

  • Untuk menjalankan aplikasi di Simulator iOS: cca emulate ios
  • Untuk menjalankan aplikasi di perangkat iOS yang terhubung: cca run ios

Opsi B: Mengembangkan dan membangun aplikasi menggunakan IDE

Android

  1. Di Eclipse, pilih File -> Import.
  2. Pilih Android > Existing Android Code Into Workspace.
  3. Impor dari jalur yang baru saja Anda buat dengan cca.
    • Anda akan memiliki dua project untuk diimpor, salah satunya adalah *-CordovaLib.
  4. Klik tombol Play untuk menjalankan aplikasi Anda.
    • Anda harus membuat Konfigurasi Run (seperti semua aplikasi Java). Anda biasanya akan diminta melakukan hal ini untuk pertama kalinya secara otomatis.
    • Anda juga perlu mengelola perangkat/emulator untuk pertama kalinya.

iOS

  1. Buka project di Xcode dengan mengetik perintah berikut di jendela terminal:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Pastikan Anda mem-build target yang tepat.

    Di kiri atas (di samping tombol Run dan Stop), terdapat menu dropdown untuk memilih project dan perangkat target. Pastikan YourApp dipilih, bukan CordovaLib.

  3. Klik tombol Play.

Membuat perubahan pada kode sumber aplikasi

File HTML, CSS, dan JavaScript Anda berada dalam direktori www folder project cca.

Penting: Setelah melakukan perubahan pada www/, Anda harus menjalankan cca prepare sebelum men-deploy aplikasi. Jika Anda menjalankan cca build, cca run, atau cca emulate dari command line, langkah persiapan akan dilakukan secara otomatis. Jika Anda mengembangkan menggunakan Eclipse/XCode, Anda harus menjalankan cca prepare secara manual.

Proses Debug

Anda dapat men-debug Aplikasi Chrome di perangkat seluler dengan cara yang sama seperti men-debug aplikasi Cordova.

Langkah 4: Langkah Berikutnya

Setelah Anda memiliki Aplikasi Chrome seluler yang berfungsi, ada banyak cara untuk meningkatkan pengalaman di perangkat seluler.

Manifes Seluler

Ada setelan Aplikasi Chrome tertentu yang hanya berlaku untuk platform seluler. Kami telah membuat file www/manifest.mobile.json untuk menampung ini, dan nilai spesifik dirujuk di seluruh dokumentasi plugin dan panduan ini.

Anda harus menyesuaikan nilai di sini.

Ikon

Aplikasi seluler memerlukan beberapa resolusi ikon lainnya dibandingkan Aplikasi Chrome desktop.

Untuk Android, ukuran berikut diperlukan:

  • 36 piksel, 48 piksel, 78 piksel, 96 piksel

Untuk aplikasi iOS, ukuran yang diperlukan berbeda-beda bergantung pada apakah Anda mendukung iOS 6 vs iOS 7. Jumlah minimum ikon yang diperlukan adalah:

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

Daftar ikon lengkap akan terlihat seperti ini di file manifest.json Anda:

"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"
}

Ikon akan disalin ke tempat yang sesuai untuk setiap platform setiap kali Anda menjalankan cca prepare.

Layar Pembuka

Aplikasi di iOS menampilkan layar pembuka singkat saat aplikasi dimuat. Kumpulan layar pembuka Cordova default disertakan dalam platforms/ios/[AppName]/Resources/splash.

Ukuran yang diperlukan adalah:

  • 320 piksel x 480 piksel + 2x
  • 768 piksel x 1024 piksel + 2x (potret iPad)
  • 1024 piksel x 768 piksel + 2x (lanskap iPad)
  • 640 x 1146 piksel

Gambar layar pembuka saat ini tidak diubah oleh cca.

Langkah 5: Publikasikan

Di direktori platforms project, Anda memiliki dua project native lengkap: satu untuk Android, dan satu untuk iOS. Anda dapat mem-build versi rilis project ini dan memublikasikannya ke Google Play atau App Store iOS.

Publikasikan ke Play Store

Untuk memublikasikan aplikasi Android ke Play Store:

  1. Perbarui dua ID versi Android, lalu jalankan cca prepare:

    • android:versionName ditetapkan menggunakan kunci version di www/manifest.json (tindakan ini juga menetapkan versi aplikasi paket desktop Anda).
    • android:versionCode disetel menggunakan kunci versionCode di www/manifest.mobile.js.

  2. Edit (atau buat) platforms/android/ant.properties serta tetapkan properti key.store dan key.alias (seperti yang dijelaskan dalam dokumen developer Android).

  3. Build project Anda:

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

  4. Temukan .apk yang ditandatangani yang terletak di dalam platforms/android/ant-build/.

  5. Upload aplikasi yang ditandatangani ke konsol developer Google Play.

Memublikasikan ke iOS App Store

  1. Update versi aplikasi dengan menetapkan kunci CFBundleVersion di www/manifest.mobile.js, lalu jalankan cca prepare.

  2. Buka file project Xcode yang ada di direktori platforms/ios Anda:

    buka platforms/ios/*.xcodeproj

  3. Ikuti Panduan App Distribution Apple.

Pertimbangan khusus

Jika Anda baru menggunakan Aplikasi Chrome, masalah terbesarnya adalah beberapa fitur web dinonaktifkan. Namun, beberapa di antaranya saat ini berfungsi dalam Cordova.

Aplikasi Chrome mungkin tidak berfungsi secara otomatis di perangkat seluler. Beberapa masalah umum terkait transfer ke perangkat seluler:

  • Masalah tata letak dengan layar kecil, terutama saat dalam orientasi potret.
    • Solusi yang disarankan: Gunakan kueri media CSS untuk mengoptimalkan konten Anda untuk layar yang lebih kecil.
  • Ukuran jendela Aplikasi Chrome yang ditetapkan melalui chrome.app.window akan diabaikan, dan sebagai gantinya menggunakan dimensi native perangkat.
    • Perbaikan yang disarankan: Hapus dimensi jendela yang di-hardcode; desain aplikasi Anda dengan mempertimbangkan berbagai ukuran.
  • Tombol dan link kecil akan sulit diketuk dengan jari.
    • Solusi yang disarankan: Sesuaikan target sentuh Anda menjadi minimal 44 x 44 poin.
  • Perilaku yang tidak terduga saat mengandalkan pengarahan kursor mouse yang tidak ada di layar sentuh.
    • Perbaikan yang disarankan: Selain pengarahan kursor, aktifkan elemen UI seperti dropdown dan tooltip saat diketuk.
  • Penundaan ketuk 300 mdtk.

API Chrome yang Didukung

Kami telah menyediakan banyak Chrome API inti untuk Aplikasi Chrome untuk Seluler, termasuk:

  • identity - pengguna login menggunakan OAuth2
  • pembayaran - jual barang virtual dalam aplikasi seluler Anda
  • pushMessaging - mengirim pesan ke aplikasi Anda dari server
  • soket - mengirim dan menerima data melalui jaringan menggunakan TCP dan UDP
  • notifications (khusus Android) - mengirim notifikasi lengkap dari aplikasi seluler Anda
  • storage - menyimpan dan mengambil data nilai kunci secara lokal
  • syncFileSystem - menyimpan dan mengambil file yang didukung oleh Google Drive
  • alarm - menjalankan tugas secara berkala
  • idle - mendeteksi saat status tidak ada aktivitas mesin berubah
  • power - mengganti fitur pengelolaan daya sistem

Namun, tidak semua Chrome JavaScript API diimplementasikan. Selain itu, tidak semua fitur Chrome Desktop tersedia di perangkat seluler:

  • tidak ada tag <webview>
  • tidak ada IndexedDB
  • tidak ada getUserMedia()
  • tidak ada NaCl

Anda dapat melacak progres dari halaman Status API kami.

Alat Developer Aplikasi Chrome

Alat Developer Aplikasi Chrome (ADT) untuk Android adalah aplikasi Android mandiri yang memungkinkan Anda mendownload dan menjalankan Aplikasi Chrome tanpa menyiapkan toolchain pengembangan seperti yang dijelaskan di atas. Gunakan Chrome ADT saat Anda ingin melihat pratinjau Aplikasi Chrome yang ada dengan cepat (yang sudah dikemas sebagai .crx) di perangkat Android Anda.

ADT Chrome untuk Android saat ini dalam rilis pra-alfa. Untuk mencobanya, lihat catatan rilis ChromeADT.apk untuk mendapatkan petunjuk penginstalan dan penggunaan.