เรียกใช้แอป 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) ของ Google

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

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

ขั้นตอนที่ 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

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

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

cca checkenv

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

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

ขณะนี้ cca ไม่ได้แก้ไขรูปภาพหน้าจอเริ่มต้น (Splash Screen)

ขั้นตอนที่ 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 ปัญหาใหญ่ที่สุดคือฟีเจอร์บางอย่างของเว็บถูกปิดใช้ อย่างไรก็ตาม ในปัจจุบันมีลิงก์จำนวนมากที่ใช้งานได้ใน Cordova

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

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

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

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

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

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

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

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

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

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

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