| <!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="Start here if you are new to Cordova. Includes installation and next steps. "> |
| |
| <title> |
| |
| |
| Architectural overview of Cordova platform - Apache Cordova |
| |
| |
| </title> |
| |
| <link rel="SHORTCUT ICON" href="/favicon.ico"/> |
| |
| |
| |
| |
| |
| |
| <link rel="canonical" href="https://cordova.apache.org/docs/en/10.x/guide/overview/"> |
| |
| <!-- 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 class="active"> |
| <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> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <div class="docs"> |
| |
| <!-- Table of Contents --> |
| <div class="hidden-xs hidden-sm site-toc-container"> |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Introduction |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/overview/index.html"> |
| Overview |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Create apps |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/cli/index.html"> |
| Create your first app |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/cli/template.html"> |
| Templates for apps |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/support/index.html"> |
| Platform support |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Develop for platforms |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/android/index.html"> |
| Android |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/ios/index.html"> |
| iOS |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/windows/index.html"> |
| Windows |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/osx/index.html"> |
| OS X |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/electron/index.html"> |
| Electron |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/platform_plugin_versioning_ref/index.html"> |
| Manage versions and platforms |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/platform_pinning/index.html"> |
| Platform pinning |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/config_ref/images.html"> |
| Customize icons |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/cordova/storage/storage.html"> |
| Store data |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/appdev/privacy/index.html"> |
| Manage privacy |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/appdev/security/index.html"> |
| Manage security |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/appdev/allowlist/index.html"> |
| Allow List |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Create plugins |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/hybrid/plugins/index.html"> |
| Create a plugin |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Develop for platforms |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/android/plugin.html"> |
| Android |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/ios/plugin.html"> |
| iOS |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/platforms/windows/plugin.html"> |
| Windows |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/plugin_ref/plugman.html"> |
| Use Plugman |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Advanced Topics |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/hybrid/webviews/index.html"> |
| Embed Cordova in native apps |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/next/index.html"> |
| Next Steps |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Reference |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/config_ref/index.html"> |
| Config.xml |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/cordova/events/events.html"> |
| Events |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-cli/index.html"> |
| CLI Reference |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/guide/appdev/hooks/index.html"> |
| Hooks |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/plugin_ref/spec.html"> |
| Plugin.xml |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <span class="toc-section-heading"> |
| Plugin APIs |
| </span> |
| |
| |
| |
| |
| |
| |
| <ul class="site-toc"> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-battery-status/index.html"> |
| Battery Status |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-camera/index.html"> |
| Camera |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-device/index.html"> |
| Device |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-dialogs/index.html"> |
| Dialogs |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-file/index.html"> |
| File |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-geolocation/index.html"> |
| Geolocation |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-inappbrowser/index.html"> |
| Inappbrowser |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-media/index.html"> |
| Media |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-media-capture/index.html"> |
| Media Capture |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-network-information/index.html"> |
| Network Information |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-screen-orientation/index.html"> |
| Screen Orientation |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-splashscreen/index.html"> |
| Splashscreen |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-statusbar/index.html"> |
| Statusbar |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| |
| <li> |
| |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-vibration/index.html"> |
| Vibration |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| </ul> |
| |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <!-- Page content --> |
| <div class="page-content-container"> |
| <div class="page-content"> |
| <div class="content-header"> |
| |
| <!-- ToC Dropdown (for XS and SM sizes only) --> |
| <div class="toc-dropdown dropdown visible-xs-block visible-sm-block"> |
| <button class="btn btn-default dropdown-toggle" type="button" id="tocDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> |
| Table of Contents |
| <span class="caret"></span> |
| </button> |
| <ul class="dropdown-menu"> |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/overview/index.html"> |
| Overview |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/cli/index.html"> |
| Create your first app |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/cli/template.html"> |
| Templates for apps |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/support/index.html"> |
| Platform support |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/android/index.html"> |
| Android |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/ios/index.html"> |
| iOS |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/windows/index.html"> |
| Windows |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/osx/index.html"> |
| OS X |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/electron/index.html"> |
| Electron |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/platform_plugin_versioning_ref/index.html"> |
| Manage versions and platforms |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/platform_pinning/index.html"> |
| Platform pinning |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/config_ref/images.html"> |
| Customize icons |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/cordova/storage/storage.html"> |
| Store data |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/appdev/privacy/index.html"> |
| Manage privacy |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/appdev/security/index.html"> |
| Manage security |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/appdev/allowlist/index.html"> |
| Allow List |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/hybrid/plugins/index.html"> |
| Create a plugin |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/android/plugin.html"> |
| Android |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/ios/plugin.html"> |
| iOS |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/platforms/windows/plugin.html"> |
| Windows |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/plugin_ref/plugman.html"> |
| Use Plugman |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/hybrid/webviews/index.html"> |
| Embed Cordova in native apps |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/next/index.html"> |
| Next Steps |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/config_ref/index.html"> |
| Config.xml |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/cordova/events/events.html"> |
| Events |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-cli/index.html"> |
| CLI Reference |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/guide/appdev/hooks/index.html"> |
| Hooks |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/plugin_ref/spec.html"> |
| Plugin.xml |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-battery-status/index.html"> |
| Battery Status |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-camera/index.html"> |
| Camera |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-device/index.html"> |
| Device |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-dialogs/index.html"> |
| Dialogs |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-file/index.html"> |
| File |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-geolocation/index.html"> |
| Geolocation |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-inappbrowser/index.html"> |
| Inappbrowser |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-media/index.html"> |
| Media |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-media-capture/index.html"> |
| Media Capture |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-network-information/index.html"> |
| Network Information |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-screen-orientation/index.html"> |
| Screen Orientation |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-splashscreen/index.html"> |
| Splashscreen |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-statusbar/index.html"> |
| Statusbar |
| </a> |
| </li> |
| |
| |
| |
| |
| <li> |
| <a class="" href="/docs/en/10.x/reference/cordova-plugin-vibration/index.html"> |
| Vibration |
| </a> |
| </li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </ul> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a class="edit" href="https://github.com/apache/cordova-docs/tree/master/www/docs/en/10.x/guide/overview/index.md"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </a> |
| |
| |
| |
| <!-- Version dropdown --> |
| <div class="dropdown"> |
| <button class="btn btn-default dropdown-toggle" type="button" id="versionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> |
| 10.x |
| |
| <span class="caret"></span> |
| </button> |
| <ul class="dropdown-menu" aria-labelledby="versionDropdown"> |
| |
| <!-- List versions available in this language --> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/dev/" class="missing-page"> |
| |
| |
| dev |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/latest/" class="missing-page"> |
| |
| |
| 12.x |
| |
| (Latest) |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/11.x/" class="missing-page"> |
| |
| |
| 11.x |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/10.x/" class="missing-page"> |
| |
| <span class="selected"> |
| |
| 10.x |
| |
| |
| </span> |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/9.x/" class="missing-page"> |
| |
| |
| 9.x |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/8.x/" class="missing-page"> |
| |
| |
| 8.x |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/7.x/" class="missing-page"> |
| |
| |
| 7.x |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/6.x/" class="missing-page"> |
| |
| |
| 6.x |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/5.4.0/" class="missing-page"> |
| |
| |
| 5.4.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/5.1.1/" class="missing-page"> |
| |
| |
| 5.1.1 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/5.0.0/" class="missing-page"> |
| |
| |
| 5.0.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/4.0.0/" class="missing-page"> |
| |
| |
| 4.0.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.6.0/" class="missing-page"> |
| |
| |
| 3.6.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.5.0/" class="missing-page"> |
| |
| |
| 3.5.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.4.0/" class="missing-page"> |
| |
| |
| 3.4.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.3.0/" class="missing-page"> |
| |
| |
| 3.3.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.2.0/" class="missing-page"> |
| |
| |
| 3.2.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.1.0/" class="missing-page"> |
| |
| |
| 3.1.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/3.0.0/" class="missing-page"> |
| |
| |
| 3.0.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.9.0/" class="missing-page"> |
| |
| |
| 2.9.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.8.0/" class="missing-page"> |
| |
| |
| 2.8.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.7.0/" class="missing-page"> |
| |
| |
| 2.7.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.6.0/" class="missing-page"> |
| |
| |
| 2.6.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.5.0/" class="missing-page"> |
| |
| |
| 2.5.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.4.0/" class="missing-page"> |
| |
| |
| 2.4.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.3.0/" class="missing-page"> |
| |
| |
| 2.3.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.2.0/" class="missing-page"> |
| |
| |
| 2.2.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.1.0/" class="missing-page"> |
| |
| |
| 2.1.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/2.0.0/" class="missing-page"> |
| |
| |
| 2.0.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.9.0/" class="missing-page"> |
| |
| |
| 1.9.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.8.1/" class="missing-page"> |
| |
| |
| 1.8.1 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.8.0/" class="missing-page"> |
| |
| |
| 1.8.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.7.0/" class="missing-page"> |
| |
| |
| 1.7.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.6.1/" class="missing-page"> |
| |
| |
| 1.6.1 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.6.0/" class="missing-page"> |
| |
| |
| 1.6.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| <li> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="/docs/en/1.5.0/" class="missing-page"> |
| |
| |
| 1.5.0 |
| |
| |
| |
| </a> |
| </li> |
| |
| </ul> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| <!-- Show warnings for special versions --> |
| <!-- dev warning --> |
| |
| |
| <!-- outdated warning --> |
| |
| <div class="alert docs-alert alert-danger" role="alert"> |
| <button type="button" class="close" data-dismiss="alert" aria-label="Close"> |
| <span aria-hidden="true">×</span> |
| </button> |
| This version of the documentation is outdated! |
| <a href="/docs/en/latest/"> |
| Click here for the latest released version. |
| </a> |
| </div> |
| |
| |
| <!-- plugin version warning --> |
| |
| |
| <div id="page-toc-source"> |
| <h1>Overview</h1> |
| |
| <p>Apache Cordova is an open-source mobile development framework. It allows you |
| to use standard web technologies - HTML5, CSS3, and JavaScript |
| for cross-platform development. Applications execute within wrappers targeted |
| to each platform, and rely on standards-compliant API bindings to |
| access each device's capabilities such as sensors, data, network status, etc.</p> |
| |
| <p>Use Apache Cordova if you are:</p> |
| |
| <ul> |
| <li> |
| <p>a mobile developer and want to extend an application across more |
| than one platform, without having to re-implement it with each |
| platform's language and tool set.</p> |
| </li> |
| <li> |
| <p>a web developer and want to deploy a web app that's packaged for |
| distribution in various app store portals.</p> |
| </li> |
| <li> |
| <p>a mobile developer interested in mixing native application |
| components with a <em>WebView</em> (special browser window) that can access |
| device-level APIs, or if you want to develop a plugin interface |
| between native and WebView components.</p> |
| </li> |
| </ul> |
| |
| <h1>Architecture</h1> |
| |
| <p>There are several components to a Cordova application. The following |
| diagram shows a high-level view of the Cordova application architecture.</p> |
| |
| <p><img src="/static/img/guide/cordovaapparchitecture.png" alt="" /></p> |
| |
| <h2>WebView</h2> |
| |
| <p>The Cordova-enabled WebView may provide the application with its |
| entire user interface. On some platforms, it can also be a component |
| within a larger, hybrid application that mixes the WebView with native |
| application components. |
| (See <a href="../hybrid/webviews/index.html">Embedding WebViews</a> for details.)</p> |
| |
| <h2>Web App</h2> |
| |
| <p>This is the part where your application code resides. The application itself is |
| implemented as a web page, by default a local file named <em>index.html</em>, that |
| references CSS, JavaScript, images, media files, or other resources |
| are necessary for it to run. The app executes in a <em>WebView</em> within the native |
| application wrapper, which you distribute to app stores.</p> |
| |
| <p>This container has a very crucial file - <a href="../../config_ref/index.html">config.xml</a> |
| file that provides information about the app and specifies parameters affecting how it |
| works, such as whether it responds to orientation shifts.</p> |
| |
| <h2>Plugins</h2> |
| |
| <p>Plugins are an integral part of the Cordova ecosystem. They provide |
| an interface for Cordova and native components to communicate with each |
| other and bindings to standard device APIs. This enables you to invoke native |
| code from JavaScript.</p> |
| |
| <p>Apache Cordova project maintains a set of plugins called the |
| <a href="../support/index.html#core-plugin-apis">Core Plugins</a>. These core |
| plugins provide your application to access device capabilities such as |
| battery, camera, contacts, etc.</p> |
| |
| <p>In addition to the core plugins, there are several third-party plugins which |
| provide additional bindings to features not necessarily available on all |
| platforms. You can search for Cordova plugins using <a href="/plugins/">plugin search</a> or <a href="https://www.npmjs.com/search?q=ecosystem%3Acordova">npm</a>. You can also |
| develop your own plugins, as described in the |
| <a href="../hybrid/plugins/index.html">Plugin Development Guide</a>. Plugins may be |
| necessary, for example, to communicate between Cordova and custom native |
| components.</p> |
| |
| <p><strong>NOTE</strong>: When you create a Cordova project it does not have |
| any plugins present. This is the new default behavior. Any plugins you |
| desire, even the core plugins, must be explicitly added.</p> |
| |
| <p>Cordova does not provide any UI widgets or MV* frameworks. Cordova provides |
| only the runtime in which those can execute. If you wish to use UI widgets |
| and/or an MV* framework, you will need to select those and include them in |
| your application.</p> |
| |
| <h2>Development Paths</h2> |
| |
| <p>Cordova provides you two basic workflows to create a mobile |
| app. While you can often use either workflow to accomplish the same |
| task, they each offer advantages:</p> |
| |
| <ul> |
| <li> |
| <p><strong>Cross-platform (CLI) workflow</strong>: Use this workflow if you want your app |
| to run on as many different mobile operating systems as possible, |
| with little need for platform-specific development. This workflow |
| centers around the <code>cordova</code> CLI. The CLI is a high-level tool that allows you to build projects |
| for many platforms at once, abstracting away much of the functionality of |
| lower-level shell scripts. The CLI copies a common set of web assets into |
| subdirectories for each mobile platform, makes any necessary |
| configuration changes for each, runs build scripts to generate |
| application binaries. The CLI also provides a common interface to |
| apply plugins to your app. To get started follow the steps in the |
| <a href="../cli/index.html">Create your first app</a> guide. Unless you have a need for the platform-centered workflow, the cross-platform workflow is recommended.</p> |
| </li> |
| <li> |
| <p><strong>Platform-centered workflow</strong>: Use this workflow if you want to |
| focus on building an app for a single platform and need to be able |
| to modify it at a lower level. You need to use this approach, for |
| example, if you want your app to mix custom native components with |
| web-based Cordova components, as discussed in |
| <a href="../hybrid/webviews/index.html">Embedding WebViews</a>. As a rule of thumb, use |
| this workflow if you need to modify the project within the SDK. This |
| workflow relies on a set of lower-level shell scripts that are tailored for |
| each supported platform, and a separate Plugman utility that allows you to |
| apply plugins. While you can use this workflow to build cross-platform |
| apps, it is generally more difficult because the lack of a |
| higher-level tool means separate build cycles and plugin |
| modifications for each platform.</p> |
| </li> |
| </ul> |
| |
| <p>When first starting out, it may be easiest to use the cross-platform |
| workflow to create an app, as described in <a href="../cli/index.html">Create your first app</a> guide. |
| You then have the option to switch to a platform-centered workflow if |
| you need the greater control the SDK provides.</p> |
| |
| <blockquote> |
| <p><strong>NOTE</strong>: Once you switch from the CLI-based workflow to one centered |
| around the platform-specific SDKs and shell tools, you can't go back. |
| The CLI maintains a common set of cross-platform source code, which on |
| each build it uses to write over platform-specific source code. To |
| preserve any modifications you make to the platform-specific assets, |
| you need to switch to the platform-centered shell tools, which ignore |
| the cross-platform source code, and instead relies on the |
| platform-specific source code.</p> |
| </blockquote> |
| |
| <h2>Installing Cordova</h2> |
| |
| <p>The installation of Cordova will differ depending on the workflow above |
| you choose:</p> |
| |
| <ul> |
| <li> |
| <p>Cross-platform workflow: See <a href="../cli/index.html">Create your first app</a> guide.</p> |
| </li> |
| <li> |
| <p>Platform-centered workflow.</p> |
| </li> |
| </ul> |
| |
| <p>After installing Cordova, it is recommended that you review the |
| <code>Develop for Platforms</code> section for the mobile platforms that you |
| will be developing for. It is also recommended that you also review the |
| <a href="../appdev/privacy/index.html">Privacy Guide</a> and |
| <a href="../appdev/security/index.html">Security Guide</a>.</p> |
| |
| |
| |
| </div> |
| </div> |
| <div class="row"> |
| <div class="blue-divider"></div> |
| <footer> |
| <div class="container-fluid"> |
| <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> |
| |
| </div> |
| </div> |
| </div> |
| |
| <script defer type="text/javascript" src="/static/js/lib/toc.min.js"></script> |
| <script defer type="text/javascript" src="/static/js/docs.js"></script> |
| |
| <script defer type="text/javascript" src="/static/js/index.js"></script> |
| <script defer type="text/javascript" src="/static/js/twitter.js"></script> |
| </body> |
| </html> |
