| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| <meta name="format-detection" content="telephone=no"> |
| <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> |
| <meta name="description" content=" "> |
| |
| <title> |
| |
| Apache Cordova |
| |
| </title> |
| |
| <link rel="SHORTCUT ICON" href="/favicon.ico"/> |
| |
| |
| |
| |
| |
| |
| <link rel="canonical" href="https://cordova.apache.org/"> |
| |
| <!-- CSS --> |
| <link rel="stylesheet" type="text/css" href="/static/css/main.css"> |
| <link rel="stylesheet" type="text/css" href="/static/css/lib/syntax.css"> |
| |
| <!-- Fonts --> |
| <!-- For attribution information, see www/attributions.html --> |
| <link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300,700italic,400italic,300italic' rel='stylesheet' type='text/css'> |
| |
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
| <!--[if lt IE 9]> |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
| <![endif]--> |
| <script type="text/javascript"> |
| var disqus_developer = 1; // this would set it to developer mode |
| </script> |
| |
| <!-- JS --> |
| <script defer type="text/javascript" src="/static/js/lib/jquery-2.1.1.min.js"></script> |
| <script defer type="text/javascript" src="/static/js/lib/bootstrap.min.js"></script> |
| |
| <!-- Matomo --> |
| <script> |
| var _paq = window._paq = window._paq || []; |
| /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ |
| _paq.push(['trackPageView']); |
| _paq.push(['enableLinkTracking']); |
| (function() { |
| var u="https://analytics.apache.org/"; |
| _paq.push(['setTrackerUrl', u+'matomo.php']); |
| _paq.push(['setSiteId', '16']); |
| var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; |
| g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); |
| })(); |
| </script> |
| <!-- End Matomo Code --> |
| |
| |
| </head> |
| |
| <body> |
| <header> |
| <a class="scroll-point pt-top" name="top"></a> |
| <nav class="navbar navbar-inverse navbar-fixed-top"> |
| <div class="container-fluid"> |
| <div class="navbar-header"> |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> |
| <span class="sr-only">Toggle navigation</span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| <a class="navbar-brand" href="/"><img id="logo_top" src="/static/img/cordova-logo-newbrand.svg"/></a> |
| </div> |
| <div id="navbar" class="navbar-collapse collapse"> |
| <div class="nav_bar_center"> |
| <ul class="nav navbar-nav"> |
| <li > |
| <a href="/docs/en/latest/">Documentation</a> |
| </li> |
| <li > |
| <a href="/plugins">Plugins</a> |
| </li> |
| <li > |
| <a href="/blog" id="blog_button">Blog<span class="badge" id="new_blog_count"></span></a> |
| </li> |
| <li > |
| <a href="/contribute">Contribute</a> |
| </li> |
| <li > |
| <a href="/contribute/team.html">Team</a> |
| </li> |
| <li> |
| <a href="/#getstarted">Get Started</a> |
| </li> |
| <li> |
| <form class="navbar-form navbar-right" id="header-search-form" role="search"> |
| <div class="input-group"> |
| |
| </div> |
| </form> |
| </li> |
| </ul> |
| </div> |
| </div><!--/.navbar-collapse --> |
| </div> |
| </nav> |
| <div id="_fixed_navbar_spacer" style="padding-top:50px"></div> |
| </header> |
| |
| <!-- Main jumbotron for a primary marketing message or call to action --> |
| <div id="hero"> |
| <div class="container vertical-center-parent"> |
| <div id="hero_section" class="row vertical-center-child"> |
| <div class="col-xs-12 col-sm-5 cordova-bot"> |
| <img src="/static/img/cordova_bot.png" /> |
| </div> |
| <div class="col-xs-12 col-sm-7 hero_content"> |
| <img class="hero_logo hidden-xs" src="/static/img/cordova-logo-newbrand-textonly.svg" /> |
| <!-- <img class="hero_logo visible-xs" src="/static/img/logo_full_2.svg" /> --> |
| <p>Mobile apps with <em>HTML</em>, <em>CSS</em> & <em>JS</em></p> |
| <p>Target multiple platforms with <em>one code base</em></p> |
| <p>Free and <em>open source</em></p> |
| <div class="hero_supported_platforms"> |
| <img src="/static/img/platform-logos.svg" width="140px" /> |
| </div> |
| <div class="hero_buttons"> |
| <a href="#getstarted" class="col-xs-12 col-sm-5 btn btn-lg btn-primary"> |
| Get Started |
| </a> |
| <a href="/docs/en/latest/" class="col-xs-12 col-sm-6 btn btn-lg btn-primary"> |
| Documentation |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div id="hero_bottom_strip"> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-xs-4"> |
| <div class="row"> |
| <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_shared_code"></div></div> |
| <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Reusable code across platforms</p></div></div> |
| </div> |
| </div> |
| <div class="col-xs-4"> |
| <div class="row"> |
| <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_offline"></div></div> |
| <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Support for offline scenarios</p></div></div> |
| </div> |
| </div> |
| <div class="col-xs-4"> |
| <div class="row"> |
| <div class="col-sm-4 col-md-3"><div class="sprite_img" id="sprite_apis"></div></div> |
| <div class="col-sm-8 col-md-9"><div class="value_prop"><p>Access native device APIs</p></div></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="blue-divider"></div> |
| <div class="container get-started-section"> |
| <!-- Example row of columns --> |
| <div class="row"> |
| <div class="col-md-12 text-center"> |
| <a id="getstarted" name="getstarted" class="fragment-anchor"></a> |
| <h1>Get Started Fast</h1> |
| </div> |
| </div> |
| <!-- GETTING STARTED --> |
| <div class="row"> |
| <div class="col-md-1 col-xs-2"> |
| <div class="number_circle">1</div> |
| </div> |
| <div class="col-md-7 col-xs-10"> |
| <h2>Installing Cordova</h2> |
| <p>Cordova command-line runs on <a target="_blank" href="https://nodejs.org/">Node.js</a> and is available on |
| <a target="_blank" href="https://npmjs.org/package/cordova">NPM</a>. |
| Follow <a href="/docs/en/latest/index.html#develop-for-platforms">platform specific guides</a> |
| to install additional platform dependencies. Open a command prompt or Terminal, and type <code>npm install -g cordova</code>.</p> |
| </div> |
| <div class="col-md-4 col-xs-12"> |
| <div class="well_code"> |
| <div> |
| <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-npm-install-text">Copy</button> |
| </div> |
| $ npm install -g cordova |
| <div id="copy-npm-install-text" class="copy-text">npm install -g cordova</div> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-1 col-xs-2"> |
| <div class="number_circle">2</div> |
| </div> |
| <div class="col-md-7 col-xs-10"> |
| <h2>Create a project</h2> |
| <p>Create a blank Cordova project using the command-line tool. Navigate to the directory where you wish to create your project and type <code>cordova create <path></code>.</p> |
| <p>For a complete set of options, type <code>cordova help create</code>.</p> |
| </div> |
| <div class="col-md-4 col-xs-12"> |
| <div class="well_code"> |
| <div> |
| <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-create-text">Copy</button> |
| </div> |
| $ cordova create MyApp |
| <div id="copy-cordova-create-text" class="copy-text">cordova create MyApp</div> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-1 col-xs-2"> |
| <div class="number_circle">3</div> |
| </div> |
| <div class="col-md-7 col-xs-10"> |
| <h2>Add a platform</h2> |
| <p>After creating a Cordova project, navigate to the project directory. From the project directory, you need to add a platform for which you want to build your app.</p> |
| <p>To add a platform, type <code>cordova platform add <platform name></code>.</p> |
| <p>For a complete list of platforms you can add, run <code>cordova platform</code>.</p> |
| </div> |
| <div class="col-md-4 col-xs-12"> |
| <div class="well_code"> |
| <div> |
| <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-platform-add-text">Copy</button> |
| </div> |
| <p>$ cd MyApp</p> |
| <p>$ cordova platform add browser</p> |
| <div id="copy-cordova-platform-add-text" class="copy-text">cd MyApp cordova platform add browser</div> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-1 col-xs-2"> |
| <div class="number_circle">4</div> |
| </div> |
| <div class="col-md-7 col-xs-10"> |
| <h2>Run your app</h2> |
| <p>From the command line, run <code>cordova run <platform name></code>.</p> |
| </div> |
| <div class="col-md-4 col-xs-12"> |
| <div class="well_code"> |
| <div> |
| <button type="button" class="btn btn btn-primary pull-right btn-copy" data-clipboard-target="copy-cordova-run-text">Copy</button> |
| </div> |
| $ cordova run browser |
| <div id="copy-cordova-run-text" class="copy-text">cordova run browser</div> |
| </div> |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col-md-1 col-xs-2"> |
| <div class="number_circle">5</div> |
| </div> |
| <div class="col-md-7 col-xs-10"> |
| <h2>Common next steps</h2> |
| <ul class="nav"> |
| <li> |
| <a href="/docs/en/latest/guide/overview/">Read the docs</a> |
| </li> |
| <li> |
| <a href="/docs/en/latest/guide/cli/#add-plugins">Add a Plugin</a> |
| </li> |
| <li> |
| <a href="/docs/en/latest/config_ref/images.html">Customize app icons</a> |
| </li> |
| <li> |
| <a href="/docs/en/latest/config_ref/">Configure Your App</a> |
| </li> |
| </ul> |
| </div> |
| <div class="col-md-4 col-xs-12"> |
| </div> |
| </div> |
| </div> |
| <!-- /container --> |
| |
| <div class="blue-divider"></div> |
| <div class="container-fluid dark vertical-aligned-columns"> |
| <div class="container"> |
| <div class="row showcase_section_intro" id="supported_platforms_section"> |
| <div class="col-md-12 text-center"> |
| <h1>Supported Platforms</h1> |
| <h2>See a list of |
| <a href="/docs/en/latest/guide/support/index.html">features supported</a> in each platform</h2> |
| <p> |
| Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms. |
| These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every |
| phone or tablet on the market today and publish to their app stores. |
| </p> |
| </div> |
| </div> |
| </div><!-- /container --> |
| |
| <div class="container-fluid supported_platforms vertical-aligned-columns"> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-md-12"> |
| <ul class="platform_logos"> |
| <li><img src="/static/img/3rdparty_logo_sprite.svg"/></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div><!-- /container-fluid --> |
| |
| <div class="blue-divider"></div> |
| <footer> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-sm-9"> |
| <h1>More Resources</h1> |
| <div class="row"> |
| <div class="col-sm-4"> |
| <h2>General</h2> |
| <ul class="nav"> |
| <li> |
| <a target="_blank" href="https://projects.apache.org/project.html?cordova">Apache Project Page</a> |
| </li> |
| <li> |
| <a href="https://www.apache.org/dyn/closer.cgi/cordova">Source Distribution</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://www.apache.org/licenses">License</a> |
| </li> |
| <li> |
| <a href="/artwork">Artwork</a> |
| </li> |
| </ul> |
| </div> |
| <div class="col-sm-4"> |
| <h2>Development</h2> |
| <ul class="nav"> |
| <li><a target="_blank" href="https://github.com/apache?utf8=%E2%9C%93&q=cordova-">Source Code</a></li> |
| <li><a target="_blank" href="https://github.com/apache/cordova#filing-a-bug">Issue Tracker</a></li> |
| <li><a target="_blank" href="https://stackoverflow.com/questions/tagged/cordova">Stack Overflow</a></li> |
| <li><a href="/contact">Mailing List</a></li> |
| <li><a href="/contribute/nightly_builds.html">Nightly builds</a></li> |
| </ul> |
| </div> |
| <div class="col-sm-4"> |
| <h2>Apache Software Foundation</h2> |
| <ul class="nav"> |
| <li> |
| <a target="_blank" href="https://www.apache.org/">About ASF</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://www.apache.org/events/current-event">Events</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://www.apache.org/foundation/thanks.html">Thanks</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://www.apache.org/security/">Security</a> |
| </li> |
| <li> |
| <a target="_blank" href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy policy</a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="col-sm-3"> |
| <h1>Contribute</h1> |
| <p style="padding-top:20px"><strong>Help Cordova move forward!</strong></p> |
| <p>Report bugs, improve the docs, or contribute to the code.</p> |
| <a href="/contribute" class="btn btn-lg btn-primary"> |
| Learn More |
| </a> |
| <p style="padding-top:20px"> <a href="https://twitter.com/apachecordova" class="twitter-follow-button" data-show-count="false">Follow @apachecordova</a></p> |
| </div> |
| </div> |
| <p class="copyright_text"> |
| Copyright © 2024 <a href="https://apache.org">The Apache Software Foundation</a>, Licensed under the <a target="_blank" href="https://www.apache.org/licenses/">Apache License, Version 2.0</a>.<br/> |
| Apache and the Apache feather logos are <a target="_blank" href="https://www.apache.org/foundation/marks/list/">trademarks</a> of The Apache Software Foundation. |
| <br/> |
| <p>See the <a href="/attributions/">attributions page</a> for other copyright & trademark notices.</p> |
| </p> |
| |
| </div> |
| </footer> |
| |
| |
| <script defer type="text/javascript" src="/static/js/index.js"></script> |
| <script defer type="text/javascript" src="/static/js/twitter.js"></script> |
| </body> |
| </html> |
