הפעלת אפליקציות Chrome בנייד באמצעות Apache Cordova

שרשרת הכלים להפעלת אפליקציות Chrome לנייד נמצאת בתצוגה מקדימה למפתחים. אתם מוזמנים לשלוח לנו משוב דרך הכלי למעקב אחר בעיות ב-GitHub, פורום המפתחים של אפליקציות Chrome, ב-Stack Overflow או בדף למפתחים ב-G+.

אפליקציית Chrome שפועלת גם במחשב וגם בנייד

סקירה כללית

ניתן להריץ את אפליקציות Chrome ב-Android וב-iOS באמצעות שרשרת כלים שמבוססת על Apache Cordova, מסגרת פיתוח לנייד בקוד פתוח לבניית אפליקציות לנייד עם יכולות מקוריות באמצעות HTML, CSS ו-JavaScript.

Apache Cordova כולל את קוד האינטרנט של האפליקציה עם מעטפת מובנית של אפליקציה, ומאפשר לכם להפיץ את אפליקציית האינטרנט ההיברידית דרך Google Play ו/או Apple App Store. כדי להשתמש ב-Apache Cordova באפליקציית Chrome קיימת, צריך להשתמש בכלי שורת הפקודה cca (c Ordova c hrome a pp).

משאבים נוספים

  • יש כמה שיקולים מיוחדים שכדאי לקחת בחשבון במהלך הפיתוח עם Cordova. פירטנו אותם בקטע שיקולים.
  • כדי לראות אילו ממשקי Chrome API נתמכים בנייד, אפשר להיכנס לדף API Status.
  • כדי להציג תצוגה מקדימה של אפליקציית Chrome במכשיר Android ללא ה-toolchain, צריך להשתמש בכלי למפתחים של אפליקציות Chrome (ADT).

בואו נתחיל.

שלב 1: התקנת כלי הפיתוח

Chrome Apps for mobile Toolschain יכול לטרגט ל-iOS 6 ואילך ול-Android 4.x ואילך.

פיתוח של יחסי תלות לכל הפלטפורמות

  • נדרשת גרסה 0.10.0 (או גרסה מתקדמת יותר) של Node.js עם npm:

    • Windows: מתקינים את Node.js באמצעות קובצי ההפעלה של ההתקנה שניתן להוריד מ-nodejs.org.
    • OS X או Linux: קובצי הפעלה של התקנה זמינים גם מ-nodejs.org. אם רוצים שלא יהיה צורך בגישה לרמה הבסיסית (root), יכול להיות שיהיה נוח יותר להתקין באמצעות 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.
    • מוסיפים את 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

מיקוד ל-iOS

לתשומת ליבך, ניתן לפתח iOS רק ב-OS X. בנוסף, צריך להתקין:

  • Xcode 5 (או גרסה מתקדמת יותר), שכוללת את כלי שורת הפקודה Xcode
  • ios-deploy (צריך לפרוס במכשיר iOS)
    • npm install -g ios-deploy
  • ios-sim (צריך לפרוס את iOS הלקוח)
    • npm install -g ios-sim
  • אופציונלי: הרשמה כמפתח ל-iOS
    • השלב הזה נדרש לצורך בדיקה במכשירים אמיתיים וכדי לשלוח לחנות האפליקציות.
    • אפשר לדלג על ההרשמה רק אם מתכוונים להשתמש בסימולטורים של 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: פיתוח

ניתן ליצור ולהפעיל את האפליקציה בשתי דרכים:

  • אפשרות א': משורת הפקודה באמצעות הכלי cca, או
  • אפשרות ב': שימוש בסביבת פיתוח משולבת (IDE), כמו Eclipse או Xcode. השימוש בסביבת פיתוח משולבת (IDE) הוא אופציונלי לחלוטין (אבל במקרים רבים הוא שימושי) כדי לסייע בהפעלה, בהגדרה ובניפוי באגים באפליקציה ההיברידית לנייד.

אפשרות א': פיתוח ופיתוח באמצעות שורת הפקודה

מהשורש של תיקיית הפרויקט שנוצרה על ידי cca:

Android

  • כדי להריץ את האפליקציה באמצעות אמולטור Android: cca emulate android
    • הערה: לשם כך עליכם להגדיר אמולטור. כדי להגדיר זאת, אפשר להריץ את android avd. אפשר להוריד תמונות אמולטור נוספות על ידי הרצת android. כדי שתמונות האינטל יפעלו מהר יותר, התקינו את 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.
    • צפויים להיות לך שני פרויקטים לייבוא, שאחד מהם הוא *-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 לנייד פועלת, יש דרכים רבות לשפר את החוויה במכשירים ניידים.

מניפסט לנייד

יש הגדרות מסוימות של אפליקציית Chrome שחלות רק על פלטפורמות לנייד. יצרנו קובץ www/manifest.mobile.json שמכיל את הרכיבים האלה, ומופיעים ערכים ספציפיים במסמכי התיעוד בנושא יישומי פלאגין ובמדריך הזה.

עליך לשנות את הערכים כאן בהתאם.

סמלים

לאפליקציות לנייד נדרשות כמה רזולוציות סמלים יותר מאשר אפליקציות Chrome למחשבים שולחניים.

עבור Android, נדרשים הגדלים הבאים:

  • 36px, 48px, 78px, 96px

באפליקציות ל-iOS, הגדלים הנדרשים משתנים בהתאם לתמיכה ב-iOS 6 וב-iOS 7. מספר הסמלים המינימלי הנדרש הוא:

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

רשימה מלאה של הסמלים תיראה כך בקובץ ה-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 מציגות מסך פתיחה קצר בזמן שהאפליקציה נטענת. ב-platforms/ios/[AppName]/Resources/splash יש קבוצת מסכי פתיחה של Cordova שמוגדרת כברירת מחדל.

הגדלים הנדרשים:

  • 320px x 480px + 2x
  • 768px x 1024px + 2x (iPad לאורך)
  • 1024px x 768px + 2x (iPad לרוחב)
  • 640 x 1146 פיקסלים

בשלב הזה, התמונות של מסך הפתיחה לא משתנות על ידי cca.

שלב 5: פרסום

בספריית platforms של הפרויקט יש שני פרויקטים מקוריים מלאים: אחד ל-Android ואחד ל-iOS. אתם יכולים ליצור גרסאות הפצה של הפרויקטים האלה ולפרסם אותם ב-Google Play או ב-iOS App Store.

פרסום בחנות Play

כדי לפרסם את האפליקציה ל-Android בחנות Play:

  1. מעדכנים את שני המזהים של גרסאות Android ומפעילים את 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.

פרסום בחנות האפליקציות של iOS

  1. מעדכנים את גרסת האפליקציה על ידי הגדרת המפתח CFBundleVersion ב-www/manifest.mobile.js, ולאחר מכן הרצה של cca prepare.

  2. פותחים את קובץ פרויקט ה-Xcode שנמצא בספריית platforms/ios:

    open Platform/ios/*.xcodeproj

  3. פועלים לפי ההוראות במדריך להפצת אפליקציות של Apple.

שיקולים מיוחדים

אם זו הפעם הראשונה שאתם משתמשים באפליקציות Chrome, היתרון הכי חשוב הוא שחלק מתכונות האינטרנט מושבתות. עם זאת, כמה מהן פועלות כרגע בקורדובה.

יכול להיות שאפליקציית Chrome לא תפעל כמו שצריך בנייד. כמה בעיות נפוצות בניוד לנייד:

  • בעיות פריסה במסכים קטנים, במיוחד בפריסה לאורך.
    • הצעה לתיקון: אפשר להשתמש בשאילתות מדיה של CSS כדי לבצע אופטימיזציה של התוכן להצגה במסכים קטנים יותר.
  • המערכת תתעלם מגודלי חלונות של אפליקציות Chrome שהוגדרו דרך chrome.app.window, במקום להשתמש במאפיינים המקוריים של המכשיר.
    • הצעות לתיקון: כדאי להסיר מידות של חלונות שכתובים בתוך הקוד, ולתת לאפליקציה גדלים שונים.
  • יהיה קשה להקיש באצבע על לחצנים וקישורים קטנים.
    • הצעה לתיקון: צריך לשנות את גודל יעדי המגע כך שיהיו בגודל של 44 x 44 נקודות לפחות.
  • התנהגות בלתי צפויה בעת הסתמכות על ריחוף עכבר שאינו קיים במסכי מגע.
    • הצעה לתיקון: בנוסף להעברת העכבר, אפשר להפעיל רכיבים בממשק המשתמש כמו תפריטים נפתחים ותיאורי כלים בהקשה.
  • השהיה של 300 אלפיות השנייה בהקשה.

ממשקי Chrome API נתמכים

הרבה מממשקי ה-API הבסיסיים של Chrome זמינים לאפליקציות Chrome לנייד, כולל:

  • identity - כניסה של משתמשים באמצעות OAuth2
  • payments - מכירת מוצרים וירטואליים בתוך האפליקציה לנייד
  • pushMessaging - דחיפה של הודעות אל האפליקציה שלך מהשרת
  • sockets – שליחה וקבלה של נתונים ברשת באמצעות TCP ו-UDP
  • התראות (Android בלבד) - שליחת התראות עשירות מהאפליקציה לנייד
  • storage – אחסון ואחזור של נתוני מפתח-ערך באופן מקומי
  • syncFileSystem - אחסון ואחזור של קבצים המגובים על ידי Google Drive
  • התראות - הרצת משימות מדי פעם
  • idle – זיהוי שינויים במצב 'לא פעיל' של המכונה
  • Power (הפעלה) - ביטול תכונות ניהול צריכת החשמל של המערכת

עם זאת, לא כל ממשקי ה-API של JavaScript ב-Chrome מוטמעים. ולא כל התכונות של Chrome Desktop זמינות בנייד:

  • אין תג <webview>
  • אין IndexedDB
  • אין getUserMedia()
  • אין NaCl

ניתן לעקוב אחר ההתקדמות בדף סטטוס ה-API.

כלי למפתחים של אפליקציות Chrome

הכלי למפתחים של אפליקציות Chrome (ADT) ל-Android הוא אפליקציה עצמאית ל-Android שמאפשרת להוריד ולהפעיל אפליקציית Chrome בלי להגדיר את 'צרור הכלים למפתחים' כמתואר למעלה. כדאי להשתמש ב-Chrome ADT כדי להציג במהירות תצוגה מקדימה של אפליקציית Chrome קיימת (שכבר ארוזה עם הסיומת .crx) במכשיר Android.

Chrome ADT ל-Android נמצא כרגע בגרסת טרום-אלפא. רוצים לנסות? עיינו בנתוני הגרסה של ChromeADT.apk, שם תוכלו למצוא הוראות להתקנה ולשימוש.