เรียกใช้แอป Chrome บนอุปกรณ์เคลื่อนที่โดยใช้ Apache Cordova

เชนเครื่องมือสำหรับการเรียกใช้แอป Chrome บนอุปกรณ์เคลื่อนที่ยังอยู่ระหว่างการแสดงตัวอย่างสำหรับนักพัฒนาซอฟต์แวร์ โปรดแสดงความคิดเห็นของคุณให้เราทราบโดยใช้เครื่องมือติดตามปัญหาของ GitHub, ฟอรัมนักพัฒนาแอป Chrome, ใน Stack Overflow หรือหน้าสำหรับนักพัฒนาซอฟต์แวร์ G+

ภาพรวม

คุณสามารถเรียกใช้แอป Chrome ใน Android และ iOS ผ่านเชนเครื่องมือที่ยึดตาม Apache Cordova ซึ่งเป็นเฟรมเวิร์กการพัฒนาอุปกรณ์เคลื่อนที่แบบโอเพนซอร์สสำหรับการสร้างแอปบนอุปกรณ์เคลื่อนที่ที่มีความสามารถแบบเนทีฟโดยใช้ HTML, CSS และ JavaScript

Apache Cordova จะรวมโค้ดเว็บของแอปพลิเคชันเข้ากับ Application Shell แบบเนทีฟ และให้คุณเผยแพร่เว็บแอปแบบผสมผ่าน Google Play และ/หรือ Apple App Store ได้ หากต้องการใช้ Apache Cordova กับแอป Chrome ที่มีอยู่ ให้ใช้เครื่องมือบรรทัดคำสั่ง cca (c ordova c hrome a pp)

แหล่งข้อมูลเพิ่มเติม

• คุณควรคำนึงถึงข้อควรพิจารณาเป็นพิเศษบางประการเมื่อพัฒนากับ Cordova เราได้ระบุประเด็นเหล่านี้ไว้ในส่วนข้อควรพิจารณา
• หากต้องการดู API ของ Chrome ที่มีการสนับสนุนในอุปกรณ์เคลื่อนที่ ให้ไปที่หน้าสถานะ API
• หากต้องการดูตัวอย่างแอป Chrome ในอุปกรณ์ Android ที่ไม่มี Toolchain ให้ใช้เครื่องมือนักพัฒนาแอป Chrome (ADT)

เรามาเริ่มกันเลย

ขั้นตอนที่ 1: ติดตั้งเครื่องมือสำหรับการพัฒนา

Toolchain ของแอป Chrome สำหรับอุปกรณ์เคลื่อนที่กำหนดเป้าหมายเป็น iOS 6 ขึ้นไปและ Android 4.x ขึ้นไปได้

ทรัพยากร Dependency ในการพัฒนาสำหรับแพลตฟอร์มทั้งหมด

• ต้องใช้ Node.js เวอร์ชัน 0.10.0 (หรือสูงกว่า) ที่ใช้ npm

  • Windows: ติดตั้ง Node.js โดยใช้ไฟล์ปฏิบัติการสำหรับการติดตั้งที่ดาวน์โหลดได้จาก nodejs.org
  • OS X หรือ Linux: ไฟล์สั่งการสำหรับการติดตั้งมีให้จาก nodejs.org ด้วย หากต้องการหลีกเลี่ยงความจำเป็นในการเข้าถึงรูท การติดตั้งผ่าน nvm อาจสะดวกกว่า ตัวอย่าง

  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
  

การกำหนดเป้าหมาย Android

เมื่อพัฒนาแอปพลิเคชันสำหรับ Android คุณจะต้องติดตั้งสิ่งต่อไปนี้ด้วย

• Java JDK 7 (หรือสูงกว่า)
• Android SDK เวอร์ชัน 4.4.2 (หรือสูงกว่า)
  • ติดตั้ง Android SDK และเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Android ที่มาพร้อมกับ Android ADT Bundle
  • เพิ่ม sdk/tools และ sdk/platform-tools ลงในตัวแปรสภาพแวดล้อม PATH
  • OS X: Eclipse เวอร์ชันที่มาพร้อมกับ Android SDK ต้องใช้ JRE 6 หากการเปิด Eclipse.app ไม่ปรากฏขึ้นให้คุณติดตั้ง JRE 6 ให้อัปเดตผ่าน Mac App Store
  • Linux: Android SDK ต้องใช้ไลบรารีการสนับสนุน 32 บิต ใน Ubuntu ให้รับผ่าน: apt-get install ia32-libs
• Apache Ant
  • เพิ่ม apache-ant-x.x.x/bin ลงในตัวแปรสภาพแวดล้อม PATH

การกำหนดเป้าหมาย iOS

โปรดทราบว่าการพัฒนา iOS จะทำได้บน OS X เท่านั้น นอกจากนี้ คุณจะต้องติดตั้งสิ่งต่อไปนี้

• Xcode 5 (หรือสูงกว่า) ซึ่งมีเครื่องมือบรรทัดคำสั่ง Xcode
• ios-deploy (จำเป็นต่อการทำให้อุปกรณ์ iOS ใช้งานได้)
  • npm install -g ios-deploy
• ios-sim (จำเป็นต้องทำให้ใช้งานได้ใน iOS Simulator)
  • npm install -g ios-sim
• ไม่บังคับ: ลงทะเบียนเป็นนักพัฒนา iOS
  • ซึ่งจำเป็นสำหรับการทดสอบในอุปกรณ์จริงและการส่งไปยัง App Store
  • คุณข้ามการลงทะเบียนได้หากวางแผนที่จะใช้เครื่องจำลองสำหรับ iPhone/iPad เท่านั้น

ติดตั้งเครื่องมือบรรทัดคำสั่ง cca

ติดตั้ง cca ผ่าน npm:

npm install -g cca

หากต้องการอัปเดต Toolchain ในภายหลังด้วยการเปิดตัวใหม่: npm update -g cca

ยืนยันว่าได้ติดตั้งทุกอย่างอย่างถูกต้องโดยเรียกใช้คำสั่งนี้จากบรรทัดคำสั่ง

cca checkenv

คุณจะเห็นหมายเลขเวอร์ชันของ cca ที่ส่งออกและการยืนยันเกี่ยวกับการติดตั้ง Android หรือ iOS SDK

ขั้นตอนที่ 2: สร้างโปรเจ็กต์

หากต้องการสร้างโปรเจ็กต์แอป Chrome บนอุปกรณ์เคลื่อนที่เริ่มต้นในไดเรกทอรีชื่อ YourApp ให้เรียกใช้:

cca create YourApp

หากคุณสร้างแอป Chrome ไว้แล้วและต้องการย้ายไปยังแพลตฟอร์มอุปกรณ์เคลื่อนที่ คุณสามารถใช้แฟล็ก --link-to เพื่อสร้างลิงก์สัญลักษณ์ไปยังแอปนั้น

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

หากต้องการคัดลอกไฟล์แอป Chrome ที่มีอยู่แทน ให้ใช้แฟล็ก --copy-from ดังนี้

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

หากยังไม่มีแอป Chrome ของคุณเอง ลองใช้ตัวอย่างแอป Chrome พร้อมการสนับสนุนสำหรับอุปกรณ์เคลื่อนที่ที่มีอยู่มากมาย

ขั้นตอนที่ 3: พัฒนา

คุณสร้างและเรียกใช้แอปพลิเคชันได้ 2 วิธี ดังนี้

• ตัวเลือก ก: จากบรรทัดคำสั่งโดยใช้เครื่องมือ cca หรือ
• ตัวเลือก B: ใช้ IDE เช่น Eclipse หรือ Xcode คุณจะใช้ IDE หรือไม่ก็ได้ (แต่มักจะมีประโยชน์) เพื่อช่วยในการเปิด กำหนดค่า และแก้ไขข้อบกพร่องแอปพลิเคชันบนอุปกรณ์เคลื่อนที่แบบไฮบริด

ตัวเลือก ก: พัฒนาและสร้างโดยใช้บรรทัดคำสั่ง

จากรูทของโฟลเดอร์โปรเจ็กต์ที่สร้างโดย cca ให้ทำดังนี้

Android

• หากต้องการเรียกใช้แอปในโปรแกรมจําลอง Android ให้ทําดังนี้ cca emulate android
  • หมายเหตุ: คุณต้องตั้งค่าโปรแกรมจำลองก่อน คุณสามารถเรียกใช้ android avd เพื่อตั้งค่า ดาวน์โหลดอิมเมจโปรแกรมจำลองเพิ่มเติมโดยการเรียกใช้ android หากต้องการให้รูปภาพ Intel ทำงานได้เร็วขึ้น ให้ติดตั้ง HAXM ของ Intel
• หากต้องการเรียกใช้แอปในอุปกรณ์ Android ที่เชื่อมต่อ ให้ทำดังนี้ cca run android

iOS

• ในการเรียกใช้แอปบนเครื่องมือจำลองของ iOS ให้ทำดังนี้ cca emulate ios
• หากต้องการเรียกใช้แอปในอุปกรณ์ iOS ที่เชื่อมต่ออยู่ ให้ทำดังนี้ cca run ios
  • หมายเหตุ: คุณจะต้องตั้งค่าโปรไฟล์การจัดสรรสำหรับอุปกรณ์ของคุณ

ตัวเลือก B: พัฒนาและสร้างโดยใช้ IDE

Android

1. ใน Eclipse ให้เลือก File -> Import
2. เลือก Android > Existing Android Code Into Workspace
3. นำเข้าจากเส้นทางที่คุณเพิ่งสร้างด้วย cca
   • คุณควรจะมี 2 โปรเจ็กต์ที่ต้องนำเข้า ซึ่งหนึ่งในนั้นคือ *-CordovaLib
4. คลิกปุ่ม "เล่น" เพื่อเรียกใช้แอป
   • คุณจะต้องสร้างการกำหนดค่าการเรียกใช้ (เช่นเดียวกับแอปพลิเคชัน Java ทั้งหมด) คุณโดยปกติจะได้รับข้อความแจ้ง เป็นครั้งแรกโดยอัตโนมัติ
   • คุณจะต้องจัดการอุปกรณ์/โปรแกรมจำลองในครั้งแรกด้วย

iOS

1. เปิดโปรเจ็กต์ใน Xcode โดยพิมพ์ข้อความต่อไปนี้ในหน้าต่างเทอร์มินัล

   cd YourApp
   open platforms/ios/*.xcodeproj
   

2. ตรวจสอบว่าคุณสร้างเป้าหมายที่ถูกต้อง

   ที่ด้านซ้ายบน (ข้างปุ่ม "เรียกใช้" และ "หยุด") จะมีเมนูแบบเลื่อนลงสำหรับเลือกโปรเจ็กต์และอุปกรณ์เป้าหมาย ตรวจสอบว่าเลือก YourApp ไม่ใช่ CordovaLib

3. คลิกปุ่มเล่น

การเปลี่ยนแปลงซอร์สโค้ดของแอป

ไฟล์ HTML, CSS และ JavaScript จะอยู่ในไดเรกทอรี www ของโฟลเดอร์โปรเจ็กต์ cca

สำคัญ: หลังจากทำการเปลี่ยนแปลงใน www/ คุณต้องเรียกใช้ cca prepare ก่อนที่จะทำให้แอปพลิเคชันใช้งานได้ หากเรียกใช้ cca build, cca run หรือ cca emulate จากบรรทัดคำสั่ง ระบบจะดำเนินการเตรียมความพร้อมโดยอัตโนมัติ หากพัฒนาโดยใช้ Eclipse/XCode คุณต้องเรียกใช้ cca prepare ด้วยตนเอง

การแก้ไขข้อบกพร่อง

คุณแก้ไขข้อบกพร่องของแอป Chrome บนอุปกรณ์เคลื่อนที่ได้เช่นเดียวกับแก้ไขข้อบกพร่องแอปพลิเคชัน Cordova

ขั้นตอนที่ 4: ขั้นตอนถัดไป

ตอนนี้คุณมีแอป Chrome บนอุปกรณ์เคลื่อนที่ที่ใช้งานได้แล้ว ปรับปรุงประสบการณ์บนอุปกรณ์เคลื่อนที่ได้หลายวิธี

ไฟล์ Manifest สำหรับอุปกรณ์เคลื่อนที่

มีการตั้งค่าแอป Chrome บางอย่างที่ใช้ได้เฉพาะกับแพลตฟอร์มอุปกรณ์เคลื่อนที่เท่านั้น เราได้สร้างไฟล์ www/manifest.mobile.json ขึ้นมาเพื่อเก็บข้อมูลเหล่านี้ โดยจะมีการอ้างอิงค่าที่เจาะจงในเอกสารประกอบของปลั๊กอินและคู่มือนี้

คุณควรปรับค่าที่นี่ให้สอดคล้องกัน

ไอคอน

แอปบนอุปกรณ์เคลื่อนที่ต้องมีความละเอียดของไอคอนมากกว่าแอป Chrome บนเดสก์ท็อปอยู่บ้าง

สำหรับ Android จะต้องใช้ขนาดต่อไปนี้

• 36, 48 พิกเซล, 78 พิกเซล, 96 พิกเซล

สําหรับแอป iOS ขนาดที่กําหนดจะแตกต่างกันไป ขึ้นอยู่กับว่าคุณรองรับ iOS 6 เทียบกับ iOS 7 หรือไม่ จำนวนไอคอนขั้นต่ำที่ต้องการมีดังนี้

• iOS 6: 57, 72 พิกเซล, 114 พิกเซล, 144 พิกเซล
• iOS 7: 72 พิกเซล, 120 พิกเซล, 152 พิกเซล

รายการไอคอนทั้งหมดจะมีลักษณะดังนี้ในไฟล์ 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"
}

ระบบจะคัดลอกไอคอนไปยังตำแหน่งที่เหมาะสมสำหรับแต่ละแพลตฟอร์มทุกครั้งที่คุณเรียกใช้ cca prepare

หน้าจอแนะนำ

แอปใน iOS จะแสดงหน้าจอแนะนําสั้นๆ ขณะที่แอปกําลังโหลด ชุดหน้าจอแนะนำเริ่มต้นของ Cordova จะรวมอยู่ใน platforms/ios/[AppName]/Resources/splash

ขนาดที่จำเป็นมีดังนี้

• 320 พิกเซล x 480 พิกเซล + 2x
• 768 x 1024 พิกเซล + 2x (แนวตั้งของ iPad)
• 1024 x 768 พิกเซล + 2x (แนวนอนของ iPad)
• 640 x 1146 พิกเซล

ขณะนี้ cca ไม่ได้แก้ไขภาพบนหน้าจอแนะนำ

ขั้นตอนที่ 5: เผยแพร่

ในไดเรกทอรี platforms ของโปรเจ็กต์ คุณจะมีโปรเจ็กต์เนทีฟที่เสร็จสมบูรณ์แล้ว 2 โปรเจ็กต์ ได้แก่ โปรเจ็กต์สำหรับ Android และอีกโปรเจ็กต์สำหรับ iOS คุณสร้างเวอร์ชันที่เผยแพร่ของโปรเจ็กต์เหล่านี้และเผยแพร่ไปยัง Google Play หรือ iOS App Store ได้

เผยแพร่ไปยัง Play Store

วิธีเผยแพร่แอปพลิเคชัน Android บน Play Store

1. อัปเดตรหัสเวอร์ชัน Android 2 รหัสแล้วเรียกใช้ cca prepare:

   • android:versionName ตั้งค่าโดยใช้คีย์ version ใน www/manifest.json (ซึ่งจะตั้งค่าเวอร์ชันของแอปแพ็กเกจบนเดสก์ท็อปด้วย)
   • ตั้งค่า android:versionCode โดยใช้คีย์ versionCode ใน www/manifest.mobile.js

2. แก้ไข (หรือสร้าง) platforms/android/ant.properties และตั้งค่าพร็อพเพอร์ตี้ key.store และ key.alias (ตามที่อธิบายไว้ในเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Android)

3. สร้างโปรเจ็กต์:

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

4. ค้นหาไฟล์ .apk ที่มีการลงชื่อใน platforms/android/ant-build/

5. อัปโหลดแอปพลิเคชันที่ลงนามไปยังแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Play

เผยแพร่ไปยัง iOS App Store

1. อัปเดตเวอร์ชันของแอปโดยการตั้งค่าคีย์ CFBundleVersion ใน www/manifest.mobile.js แล้วเรียกใช้ cca prepare

2. เปิดไฟล์โปรเจ็กต์ Xcode ที่อยู่ใต้ไดเรกทอรี platforms/ios ดังนี้

   แพลตฟอร์มแบบเปิด/ios/*.xcodeproj

3. ทำตามคู่มือการเผยแพร่แอปของ Apple

สิ่งที่ควรพิจารณาเป็นพิเศษ

หากคุณเพิ่งเริ่มใช้แอป Chrome ปัญหาที่ใหญ่ที่สุดใน Gotcha คือคุณลักษณะบนเว็บบางอย่างถูกปิดใช้งาน อย่างไรก็ตาม เครื่องมือเหล่านี้หลายตัวใช้งานได้ภายใน Cordova ในปัจจุบัน

แอป Chrome อาจทำงานผิดปกติบนมือถือ ปัญหาทั่วไปบางประการเกี่ยวกับการย้ายไปยังอุปกรณ์เคลื่อนที่มีดังนี้

• ปัญหาเกี่ยวกับรูปแบบสำหรับหน้าจอขนาดเล็ก โดยเฉพาะเมื่อวางในแนวตั้ง
  • การแก้ไขที่แนะนำ: ใช้คิวรี่สื่อ CSS เพื่อเพิ่มประสิทธิภาพเนื้อหาสำหรับหน้าจอขนาดเล็ก
• ระบบจะไม่สนใจขนาดหน้าต่างของแอป Chrome ที่ตั้งค่าผ่าน chrome.app.window แต่จะใช้มิติข้อมูลเนทีฟของอุปกรณ์แทน
  • การแก้ไขที่แนะนำ: นำขนาดหน้าต่างแบบฮาร์ดโค้ดออก ออกแบบแอปโดยคำนึงถึงขนาดต่างๆ
• ปุ่มและลิงก์ขนาดเล็กจะทำให้ใช้นิ้วแตะได้ยาก
  • การแก้ไขที่แนะนำ: ปรับเป้าหมายการสัมผัสให้มีอย่างน้อย 44 x 44 จุด
• การทำงานที่ไม่คาดคิดเมื่อใช้การวางเมาส์เหนือเมาส์ซึ่งไม่มีอยู่บนหน้าจอสัมผัส
  • การแก้ไขที่แนะนำ: นอกเหนือจากการวางเมาส์เหนือ ให้เปิดใช้งานองค์ประกอบ UI เช่น เมนูแบบเลื่อนลงและเคล็ดลับเครื่องมือเมื่อแตะ
• การหน่วงเวลาการแตะ 300 มิลลิวินาที
  • การแก้ไขที่แนะนำ: ใช้โพลีฟิลล์ JavaScript FastClick by FT Labs
  • อ่านบทความ HTML5Rocks เพื่อดูข้อมูลความเป็นมาบางส่วน

Chrome API ที่รองรับ

เราได้ให้บริการ API หลักจำนวนมากของ Chrome กับแอป Chrome สำหรับอุปกรณ์เคลื่อนที่ ซึ่งได้แก่

• ข้อมูลประจำตัว - ผู้ใช้ที่ลงชื่อเข้าใช้โดยใช้ OAuth2
• การชำระเงิน - ขายสินค้าเสมือนภายในแอปบนอุปกรณ์เคลื่อนที่
• pushMessaging - พุชข้อความจากเซิร์ฟเวอร์ของคุณไปที่แอป
• sockets - ส่งและรับข้อมูลผ่านเครือข่ายโดยใช้ TCP และ UDP
• notifications (Android เท่านั้น) - ส่งการแจ้งเตือนที่สมบูรณ์จากแอปบนอุปกรณ์เคลื่อนที่
• พื้นที่เก็บข้อมูล - จัดเก็บและเรียกข้อมูลคีย์-ค่าในเครื่อง
• syncFileSystem - จัดเก็บและเรียกข้อมูลไฟล์ที่ Google ไดรฟ์รองรับ
• alarms - เรียกใช้งานเป็นระยะๆ
• ไม่มีการใช้งาน - ตรวจจับเมื่อสถานะไม่มีการใช้งานของเครื่องมีการเปลี่ยนแปลง
• power - ลบล้างฟีเจอร์การจัดการพลังงานของระบบ

อย่างไรก็ตาม มีการใช้งาน Chrome JavaScript API เพียงบางรายการ และคุณลักษณะบางอย่างของ Chrome บนเดสก์ท็อป อาจไม่มีให้บริการบนอุปกรณ์เคลื่อนที่

• ไม่มีแท็ก <webview>
• ไม่มี IndexedDB
• ไม่มี getUserMedia()
• ไม่มี NaCl

คุณสามารถติดตามความคืบหน้าได้จากหน้าสถานะ API

เครื่องมือสำหรับนักพัฒนาแอป Chrome

เครื่องมือนักพัฒนาแอป Chrome (ADT) สำหรับ Android เป็นแอป Android แบบสแตนด์อโลนที่ให้คุณดาวน์โหลดและเรียกใช้แอป Chrome ได้โดยไม่ต้องตั้งค่าเชนเครื่องมือการพัฒนาตามที่อธิบายไว้ข้างต้น ใช้ Chrome ADT เมื่อต้องการดูตัวอย่างแอป Chrome ที่มีอยู่อย่างรวดเร็ว (จัดแพ็กเกจเป็น .crx) ในอุปกรณ์ Android ได้อย่างรวดเร็ว

ขณะนี้ Chrome ADT สำหรับ Android ยังอยู่ในรุ่นก่อนอัลฟ่า หากต้องการทดลองใช้ โปรดดูบันทึกประจำรุ่นของ ChromeADT.apk สำหรับการติดตั้งและคำแนะนำในการใช้งาน