با استفاده از Apache Cordova برنامه‌های Chrome را روی موبایل اجرا کنید

زنجیره ابزار اجرای برنامه‌های Chrome در تلفن همراه در پیش‌نمایش اولیه توسعه‌دهندگان قرار دارد. با استفاده از ردیاب مشکل GitHub ، تالار گفتمان برنامه‌نویس Chrome Apps ، در Stack Overflow ، یا صفحه برنامه‌نویسان G+، نظرات خود را به ما ارائه دهید.

یک برنامه Chrome که هم روی دسک‌تاپ و هم روی موبایل اجرا می‌شود

نمای کلی

می‌توانید برنامه‌های Chrome خود را در Android و iOS از طریق یک زنجیره ابزار مبتنی بر Apache Cordova اجرا کنید، یک چارچوب توسعه‌دهی تلفن همراه منبع باز برای ساخت برنامه‌های تلفن همراه با قابلیت‌های بومی با استفاده از HTML، CSS و جاوا اسکریپت.

Apache Cordova کد وب برنامه شما را با یک پوسته برنامه بومی پیچیده می کند و به شما امکان می دهد برنامه وب ترکیبی خود را از طریق Google Play و/یا فروشگاه App Apple توزیع کنید. برای استفاده از Apache Cordova با یک برنامه Chrome موجود، از ابزار خط فرمان cca ( c ordova c hrome a pp) استفاده می‌کنید.

منابع اضافی

  • چند ملاحظات خاص وجود دارد که باید هنگام توسعه با Cordova در نظر داشته باشید. ما آنها را در بخش ملاحظات فهرست کرده ایم.
  • برای مشاهده اینکه کدام APIهای Chrome در تلفن همراه پشتیبانی می‌شوند، از صفحه وضعیت API دیدن کنید.
  • برای پیش‌نمایش برنامه Chrome خود در دستگاه Android بدون زنجیره ابزار، از ابزار برنامه‌نویس Chrome Apps (ADT) استفاده کنید.

بیایید شروع کنیم.

مرحله 1: ابزارهای توسعه خود را نصب کنید

زنجیره ابزار Chrome Apps for Mobile می‌تواند iOS 6 و بالاتر و Android 4.x+ را هدف قرار دهد.

وابستگی های توسعه برای همه پلتفرم ها

  • 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

هدف قرار دادن اندروید

هنگام توسعه یک برنامه برای اندروید، باید موارد زیر را نیز نصب کنید:

  • جاوا JDK 7 (یا بالاتر)
  • Android SDK نسخه 4.4.2 (یا بالاتر)
    • Android SDK و Android Developer Tools را که همراه با Android ADT Bundle ارائه می شوند، نصب کنید.
    • sdk/tools و sdk/platform-tools را به متغیر محیطی PATH خود اضافه کنید.
    • OS X : نسخه ای از Eclipse که با Android SDK ارائه می شود، به JRE 6 نیاز دارد. اگر باز کردن Eclipse.app از شما درخواست نمی کند JRE 6 را نصب کنید، آن را از طریق فروشگاه Mac App Store دریافت کنید.
    • لینوکس : Android SDK به کتابخانه های پشتیبانی 32 بیتی نیاز دارد. در اوبونتو، این موارد را از طریق: apt-get install ia32-libs دریافت کنید.
  • مورچه آپاچی

هدف قرار دادن 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 ثبت نام کنید
    • این برای آزمایش بر روی دستگاه های واقعی و برای ارسال به فروشگاه برنامه ضروری است.
    • اگر فقط قصد استفاده از شبیه سازهای iPhone/iPad را دارید، می توانید از ثبت نام صرفنظر کنید.

ابزار خط فرمان cca را نصب کنید

نصب cca از طریق npm:

npm install -g cca

برای به‌روزرسانی زنجیره ابزار بعداً با نسخه‌های جدید: npm update -g cca .

با اجرای این دستور از خط فرمان، تأیید کنید که همه چیز به درستی نصب شده است:

cca checkenv

شماره نسخه cca خروجی و تأییدیه نصب Android یا iOS SDK خود را خواهید دید.

مرحله 2: ایجاد یک پروژه

برای ایجاد یک پروژه پیش‌فرض Chrome App برای تلفن همراه در فهرستی به نام 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: توسعه

شما می توانید برنامه خود را به دو روش بسازید و اجرا کنید:

  • گزینه A: از خط فرمان، با استفاده از ابزار cca یا
  • گزینه B: با استفاده از یک IDE، مانند Eclipse یا Xcode. استفاده از یک IDE کاملا اختیاری است (اما اغلب مفید) برای کمک به راه اندازی، پیکربندی و اشکال زدایی برنامه موبایل ترکیبی شما.

گزینه A: توسعه و ساخت با استفاده از خط فرمان

از ریشه پوشه پروژه cca -generated شما:

اندروید

  • برای اجرای برنامه خود در شبیه ساز اندروید: cca emulate android
    • توجه: این مستلزم آن است که یک شبیه ساز راه اندازی کرده باشید. برای تنظیم آن می توانید android avd اجرا کنید. با اجرای android تصاویر شبیه ساز اضافی را دانلود کنید. برای اینکه تصاویر اینتل سریعتر اجرا شوند، HAXM اینتل را نصب کنید.
  • برای اجرای برنامه خود در دستگاه Android متصل: cca run android

iOS

  • برای اجرای برنامه خود در شبیه ساز iOS: cca emulate ios
  • برای اجرای برنامه خود در دستگاه iOS متصل: cca run ios
    • توجه: این مستلزم آن است که یک نمایه تامین برای دستگاه خود تنظیم کرده باشید.

گزینه B: توسعه و ساخت با استفاده از یک IDE

اندروید

  1. در Eclipse، File -> Import را انتخاب کنید.
  2. Android > Existing Android Code Into Workspace را انتخاب کنید.
  3. از مسیری که با cca ایجاد کردید وارد کنید.
    • باید انتظار داشته باشید که دو پروژه برای وارد کردن داشته باشید که یکی از آنها *-CordovaLib است.
  4. برای اجرای برنامه روی دکمه Play کلیک کنید.
    • شما باید یک Run Configuration (مانند همه برنامه های جاوا) ایجاد کنید. معمولاً اولین بار به طور خودکار از شما خواسته می شود.
    • برای اولین بار نیز باید دستگاه ها/مشابه های خود را مدیریت کنید.

iOS

  1. پروژه را در Xcode با تایپ کردن موارد زیر در پنجره ترمینال باز کنید:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. مطمئن شوید که در حال ساختن هدف مناسب هستید.

    در بالا سمت چپ (در کنار دکمه‌های Run و Stop)، یک منوی کشویی برای انتخاب پروژه و دستگاه مورد نظر وجود دارد. مطمئن شوید که YourApp انتخاب شده است و CordovaLib نیست.

  3. روی دکمه Play کلیک کنید.

ایجاد تغییرات در کد منبع برنامه شما

فایل های HTML، CSS و جاوا اسکریپت شما در دایرکتوری www پوشه پروژه cca شما قرار دارند.

مهم : پس از ایجاد تغییرات در www/ ، باید قبل از استقرار برنامه خود cca prepare را اجرا کنید. اگر cca build ، cca run یا cca emulate از خط فرمان اجرا می کنید، مرحله آماده سازی به صورت خودکار انجام می شود. اگر با استفاده از Eclipse/XCode در حال توسعه هستید، باید cca prepare به صورت دستی اجرا کنید.

اشکال زدایی

می‌توانید به همان روشی که برنامه‌های Cordova را اشکال زدایی می‌کنید، برنامه Chrome خود را در تلفن همراه اشکال‌زدایی کنید.

مرحله 4: مراحل بعدی

اکنون که یک برنامه Chrome تلفن همراه فعال دارید، راه‌های زیادی برای بهبود تجربه در دستگاه‌های تلفن همراه وجود دارد.

مانیفست موبایل

تنظیمات خاصی برای برنامه Chrome وجود دارد که فقط برای پلتفرم های تلفن همراه اعمال می شود. ما یک فایل www/manifest.mobile.json ایجاد کرده‌ایم که حاوی این موارد است، و مقادیر خاص در اسناد افزونه و این راهنما ارجاع می‌شوند.

شما باید مقادیر را در اینجا تنظیم کنید.

نمادها

برنامه‌های تلفن همراه به وضوح نمادهای کمی بیشتر از برنامه‌های Chrome رومیزی نیاز دارند.

برای اندروید، این اندازه ها مورد نیاز است:

  • 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 گنجانده شده‌اند.

اندازه های مورد نیاز عبارتند از:

  • 320px 480px + 2x
  • 768 پیکسل × 1024 پیکسل + 2 x (عمودی iPad)
  • 1024px x 768px + 2x (منظره iPad)
  • 640 پیکسل × 1146 پیکسل

تصاویر صفحه نمایش چلپ چلوپ در حال حاضر توسط cca اصلاح نشده اند.

مرحله 5: انتشار

در فهرست platforms پروژه خود، دو پروژه بومی کامل دارید: یکی برای اندروید و دیگری برای iOS. می‌توانید نسخه‌های انتشار این پروژه‌ها را بسازید و آن‌ها را در Google Play یا در اپ استور iOS منتشر کنید.

در فروشگاه Play منتشر کنید

برای انتشار برنامه اندروید خود در فروشگاه Play:

  1. دو شناسه نسخه اندروید را به روز کنید، سپس 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 منتشر کنید

  1. نسخه برنامه را با تنظیم کلید CFBundleVersion در www/manifest.mobile.js به روز کنید، سپس cca prepare اجرا کنید.

  2. فایل پروژه Xcode را که در پوشه platforms/ios خود یافت می‌شود باز کنید:

    open platforms/ios/*.xcodeproj

  3. راهنمای توزیع اپلیکیشن اپل را دنبال کنید.

ملاحظات خاص

اگر با Chrome Apps تازه کار هستید، بزرگترین مشکل این است که برخی از ویژگی های وب غیرفعال هستند . با این حال، تعدادی از آنها در حال حاضر در کوردووا کار می کنند.

یک برنامه Chrome ممکن است در تلفن همراه به درستی کار نکند. برخی از مشکلات رایج در انتقال به موبایل:

  • مشکلات طرح‌بندی با صفحه‌نمایش‌های کوچک، به‌ویژه در حالت عمودی.
  • اندازه‌های پنجره برنامه Chrome تنظیم‌شده از طریق chrome.app.window نادیده گرفته می‌شود و در عوض از ابعاد اصلی دستگاه استفاده می‌شود.
    • راه حل پیشنهادی: ابعاد پنجره سخت کد شده را حذف کنید. برنامه خود را با اندازه های مختلف طراحی کنید.
  • ضربه زدن روی دکمه ها و پیوندهای کوچک با انگشت سخت خواهد بود.
    • راه حل پیشنهادی: اهداف لمسی خود را حداقل 44×44 نقطه تنظیم کنید.
  • رفتار غیرمنتظره هنگام تکیه بر شناور ماوس که در صفحه‌های لمسی وجود ندارد.
    • راه‌حل پیشنهادی: علاوه بر شناور کردن، عناصر رابط کاربری مانند فهرست‌های بازشو و نکات ابزار را با ضربه زدن فعال کنید.
  • تاخیر ضربه زدن 300 میلی‌ثانیه.

APIهای Chrome پشتیبانی شده

ما بسیاری از APIهای اصلی Chrome را در اختیار Chrome Apps for Mobile قرار داده ایم، از جمله:

  • هویت - ورود کاربران با استفاده از OAuth2
  • پرداخت ها - کالاهای مجازی را در برنامه تلفن همراه خود بفروشید
  • pushMessaging - پیام ها را از سرور خود به برنامه خود فشار دهید
  • سوکت - ارسال و دریافت داده ها از طریق شبکه با استفاده از TCP و UDP
  • اعلان‌ها (فقط اندروید) - اعلان‌های غنی را از برنامه تلفن همراه خود ارسال کنید
  • ذخیره سازی - داده های کلید-مقدار را به صورت محلی ذخیره و بازیابی کنید
  • syncFileSystem - فایل های پشتیبانی شده توسط Google Drive را ذخیره و بازیابی کنید
  • هشدارها - وظایف را به صورت دوره ای اجرا کنید
  • بیکار - تشخیص زمانی که وضعیت بیکار دستگاه تغییر می کند
  • قدرت - نادیده گرفتن ویژگی های مدیریت انرژی سیستم

با این حال، همه API های جاوا اسکریپت Chrome پیاده سازی نشده اند. و همه ویژگی‌های Chrome Desktop در تلفن همراه در دسترس نیستند:

  • بدون برچسب <webview>
  • IndexedDB وجود ندارد
  • بدون getUserMedia()
  • بدون NaCl

می توانید پیشرفت را از صفحه وضعیت API ما پیگیری کنید.

ابزار برنامه‌نویس Chrome Apps

Chrome Apps Developer Tool (ADT) برای Android یک برنامه اندرویدی مستقل است که به شما امکان می‌دهد بدون راه‌اندازی زنجیره ابزار توسعه، همانطور که در بالا توضیح داده شد، یک برنامه Chrome را دانلود و اجرا کنید. زمانی که می‌خواهید پیش‌نمایش سریع یک برنامه Chrome موجود (که قبلاً به‌عنوان crx. بسته‌بندی شده است) را در دستگاه Android خود پیش‌نمایش کنید، از Chrome ADT استفاده کنید.

Chrome ADT برای اندروید در حال حاضر در نسخه پیش آلفا است. برای امتحان کردن، یادداشت‌های انتشار ChromeADT.apk را برای دستورالعمل‌های نصب و استفاده مشاهده کنید.