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

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

แอป Chrome ที่ทำงานได้ทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่

ภาพรวม

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

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

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

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

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

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

เครื่องมือทางเทคนิคของแอป 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

การกำหนดเป้าหมาย 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

หากต้องการอัปเดตชุดเครื่องมือในภายหลังด้วยรุ่นใหม่ ให้ทำดังนี้ npm update -g cca

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

cca checkenv

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

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

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

cca create YourApp

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

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 หรือ
  • ตัวเลือก ข: โดยใช้ IDE เช่น Eclipse หรือ Xcode การใช้ IDE เป็นทางเลือก (แต่มักมีประโยชน์) ในการช่วยเปิดใช้งาน กำหนดค่า และแก้ไขข้อบกพร่องของแอปพลิเคชันไฮบริดบนอุปกรณ์เคลื่อนที่

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

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

Android

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

iOS

  • วิธีเรียกใช้แอปในโปรแกรมจำลอง iOS: cca emulate ios
  • วิธีเรียกใช้แอปในอุปกรณ์ iOS ที่เชื่อมต่ออยู่ cca run ios

ตัวเลือก ข: พัฒนาและสร้างโดยใช้ 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 พิกเซล + 2 เท่า
  • 768 x 1024 พิกเซล + 2 เท่า (แนวตั้งของ iPad)
  • 1024 x 768 พิกเซล + 2 เท่า (แนวนอนสำหรับ iPad)
  • 640 x 1146 พิกเซล

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

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

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

เผยแพร่ไปยัง 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 Console

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

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

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

    เปิด platforms/ios/*.xcodeproj

  3. ทำตามคู่มือการจัดจำหน่ายแอปของ Apple

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

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

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

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

API ของ Chrome ที่รองรับ

เราได้ทำให้ Chrome API หลักๆ จำนวนมากพร้อมใช้งานในแอป Chrome สำหรับมือถือแล้ว ซึ่งรวมถึง API ต่อไปนี้

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

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

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

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

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

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

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