{"id":6378,"date":"2025-04-17T12:29:41","date_gmt":"2025-04-17T16:29:41","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=6378"},"modified":"2025-04-21T15:13:58","modified_gmt":"2025-04-21T19:13:58","slug":"how-capacitor-works-2","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/how-capacitor-works-2","title":{"rendered":"How Capacitor Works"},"content":{"rendered":"\n<p class=\"has-small-font-size\"><em>This blog post was originally written and published by Max Lynch on August 13th, 2020. This post has been edited as well as updated for content and links.<\/em><\/p>\n\n\n\n<p>Capacitor is a cross-platform native runtime for Web Native apps.<\/p>\n\n\n\n<p>Essentially, Capacitor takes modern web apps, and then packages them up to run on iOS, Android, and PWA with access to native platform features and OS-level controls.<\/p>\n\n\n\n<p>Capacitor acts as the&nbsp;<em>runtime<\/em>&nbsp;facilitating communication between the web app and the underlying OS.<\/p>\n\n\n\n<p>Let\u2019s dig in and explore how Capacitor works under the hood.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-basics\">The Basics<\/h2>\n\n\n\n<p>At a high level, Capacitor allows you to take your web apps and deploy them on iOS, Android, or the web with a single codebase:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"910\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBasic-1024x910.png\" alt=\"\" class=\"wp-image-6379 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBasic-1024x910.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBasic-300x267.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBasic-768x683.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBasic.png 1100w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/910;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"910\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBasic-1024x910.png\" alt=\"\" class=\"wp-image-6379\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBasic-1024x910.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBasic-300x267.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBasic-768x683.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBasic.png 1100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>While this is a simplistic view of what Capacitor does, if we zoom in a bit and bring in your app code, we see that Capacitor is made up of a few individual components:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"936\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorZoomed-1024x936.png\" alt=\"\" class=\"wp-image-6380 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorZoomed-1024x936.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorZoomed-300x274.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorZoomed-768x702.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorZoomed.png 1372w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/936;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"936\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorZoomed-1024x936.png\" alt=\"\" class=\"wp-image-6380\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorZoomed-1024x936.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorZoomed-300x274.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorZoomed-768x702.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorZoomed.png 1372w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>This means your web app runs inside of a Web View which is a native OS control that provides a streamlined, chrome-less browser instance. If you can imagine a typical web browser, a ton of overhead comes from the chrome and experience around the actual browsing frame. A Web View is just one instance of that browsing frame, so it\u2019s very light weight.<\/p>\n\n\n\n<p>Where most of the magic happens in the Native Bridge and the Runtime, so let\u2019s explore those.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-native-bridge\">The Native Bridge<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"1024\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge-1022x1024.png\" alt=\"\" class=\"wp-image-6381 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge-1022x1024.png 1022w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge-300x300.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge-150x150.png 150w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge-768x769.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge.png 1252w\" data-sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1022px; --smush-placeholder-aspect-ratio: 1022\/1024;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"1024\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge-1022x1024.png\" alt=\"\" class=\"wp-image-6381\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge-1022x1024.png 1022w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge-300x300.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge-150x150.png 150w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge-768x769.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorBridge.png 1252w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/noscript><\/figure>\n\n\n\n<p>That Web View needs a way to access native functionality, interact with OS level native controls, and access custom native code or 3rd party plugins. It does that using the Native Bridge inside of Capacitor.<\/p>\n\n\n\n<p>The Native Bridge is where Capacitor\u2019s&nbsp;<em>runtime<\/em>&nbsp;JS API, including all known native plugins and their methods, are exported to the Web View. The runtime API is different from the&nbsp;<code>@capacitor\/core<\/code>&nbsp;API that is imported directly into your web app, but they work together to enable Capacitor APIs to work across all supported platforms.<\/p>\n\n\n\n<p>Capacitor loads all known plugins that have been installed or coded directly into the native project, and then exports&nbsp;<code>window.Capacitor.Plugins<\/code>&nbsp;containing every loaded plugin and every known method that plugin has exported to the Web View.<\/p>\n\n\n\n<p>Finally, the bridge manages message passing and tracking native invocations between the Web View and the native runtime.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-runtime\">Runtime<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"782\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorRuntime-1024x782.png\" alt=\"\" class=\"wp-image-6382 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorRuntime-1024x782.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorRuntime-300x229.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorRuntime-768x587.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorRuntime.png 1228w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/782;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"782\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorRuntime-1024x782.png\" alt=\"\" class=\"wp-image-6382\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorRuntime-1024x782.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorRuntime-300x229.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorRuntime-768x587.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorRuntime.png 1228w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>The Native runtime is where calls from the Web View get routed to native plugins and custom native code.<\/p>\n\n\n\n<p>When the app first starts, the runtime loads any installed plugins and custom native plugins. The runtime also initializes the Web View and injects the JavaScript Symbols for all known plugins into the Web View.<\/p>\n\n\n\n<p>When plugins are invoked, the runtime processes each invocation as a message, constructs a method call to the corresponding plugin, and executes it.<\/p>\n\n\n\n<p>All calls in Capacitor are asynchronous, so the runtime manages a set of \u201cactive\u201d calls that have yet to be completed. These calls might be as simple as calling a Native API, or as complicated as opening an intent and processing the result of another app (such as the Camera on Android).<\/p>\n\n\n\n<p>Once those calls complete, a message is constructed and sent back to the Web View, which ultimately causes the original plugin call in your app to resolve.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-capacitor-apps-are-native-apps\">Capacitor Apps Are Native Apps<\/h2>\n\n\n\n<p>Capacitor works by extending a Web View with additional functionality and indirect access to full native functionality through plugins and custom native code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"656\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative-1024x656.png\" alt=\"\" class=\"wp-image-6383 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative-1024x656.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative-300x192.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative-768x492.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative-1536x983.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative.png 1562w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/656;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"656\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative-1024x656.png\" alt=\"\" class=\"wp-image-6383\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative-1024x656.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative-300x192.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative-768x492.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative-1536x983.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/CapacitorNative.png 1562w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Capacitor apps&nbsp;<em>are native apps<\/em>. The project files used to build the native iOS and Android binaries is a plain iOS app for Xcode and a plain Android app using Gradle. This means teams can add arbitrary native code to the app and invoke it from the Web View through the Capacitor Plugin API. If you\u2019d like to explore this in detail, read how&nbsp;<a href=\"https:\/\/medium.com\/@maxlynch\/cordova-ionic-apps-are-native-apps-64f9e1a995d9\">Capacitor Apps are Native Apps<\/a>.<\/p>\n\n\n\n<p>In the diagram above, the native project contains our built web assets which will be some kind of modern JS app that is built and copied to the native project. That modern JS app imports the&nbsp;<code>@capacitor\/core<\/code>&nbsp;library to code against the JavaScript symbols Capacitor generates at runtime (and to support Web APIs like&nbsp;<a href=\"https:\/\/capacitorjs.com\/docs\/apis\/camera\">Camera<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/capacitorjs.com\/docs\/apis\/share\">Share<\/a>&nbsp;for PWAs).<\/p>\n\n\n\n<p>During the&nbsp;<code>copy<\/code>&nbsp;step from the Capacitor CLI tools, the&nbsp;<code>native-bridge.js<\/code>&nbsp;is copied to the project which contains Capacitor\u2019s message passing bridge on the Web View side.<\/p>\n\n\n\n<p>Finally, any Capacitor plugins or custom native code will be in the project as well, along with any libraries that code requires.<\/p>\n\n\n\n<p>One note about Progressive Web Apps (PWA): There are some additional steps because the\u00a0<code>@capacitor\/core<\/code>\u00a0library doesn&#8217;t contain all the functionality needed for Capacitor plugins that have web support since it was branched off in earlier versions of Capacitor, so plugins like\u00a0<a href=\"https:\/\/capacitorjs.com\/docs\/apis\/camera\">Camera<\/a>,\u00a0<a href=\"https:\/\/capacitorjs.com\/docs\/apis\/filesystem\">Filesystem<\/a>, or\u00a0<a href=\"https:\/\/capacitorjs.com\/docs\/apis\/share\">Share<\/a> would need to be imported.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2>\n\n\n\n<p>Capacitor provides a runtime for Web Apps, so teams typically spend most of their time building their web app, making sure it works well on mobile form factors and has a mobile UI experience that users expect (UI frameworks like&nbsp;<a href=\"https:\/\/ionicframework.com\/\">Ionic Framework<\/a>&nbsp;provide this experience out of the box).<\/p>\n\n\n\n<p>This is in contrast to many other cross-platform mobile technologies that use native system controls. While there are benefits to doing that, the benefits to using Capacitor are a pure web development experience, truly write once run anywhere, and compatibility with the full web development ecosystem and hiring market.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This blog post was originally written and published by Max Lynch on August 13th, 2020. This post has been edited as well as updated for content and links. Capacitor is a cross-platform native runtime for Web Native apps. Essentially, Capacitor takes modern web apps, and then packages them up to run on iOS, Android, and [&hellip;]<\/p>\n","protected":false},"author":65,"featured_media":6384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[164,121,122],"tags":[151,3],"class_list":["post-6378","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business","category-engineering","category-product","tag-capacitor","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How Capacitor Works - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/how-capacitor-works-2\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Capacitor Works\" \/>\n<meta property=\"og:description\" content=\"This blog post was originally written and published by Max Lynch on August 13th, 2020. This post has been edited as well as updated for content and links. Capacitor is a cross-platform native runtime for Web Native apps. Essentially, Capacitor takes modern web apps, and then packages them up to run on iOS, Android, and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/how-capacitor-works-2\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-17T16:29:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T19:13:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"The Ionic Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"The Ionic Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2\"},\"author\":{\"name\":\"The Ionic Team\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/e246c7618b04fe8244628949bb5d7f19\"},\"headline\":\"How Capacitor Works\",\"datePublished\":\"2025-04-17T16:29:41+00:00\",\"dateModified\":\"2025-04-21T19:13:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2\"},\"wordCount\":915,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png\",\"keywords\":[\"Capacitor\",\"Ionic\"],\"articleSection\":[\"Business\",\"Engineering\",\"Product\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/how-capacitor-works-2#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2\",\"url\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2\",\"name\":\"How Capacitor Works - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png\",\"datePublished\":\"2025-04-17T16:29:41+00:00\",\"dateModified\":\"2025-04-21T19:13:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/how-capacitor-works-2\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/how-capacitor-works-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How Capacitor Works\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/e246c7618b04fe8244628949bb5d7f19\",\"name\":\"The Ionic Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/10\/ionic-team-blog.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/10\/ionic-team-blog.png\",\"caption\":\"The Ionic Team\"},\"sameAs\":[\"https:\/\/twitter.com\/ionicframework\",\"https:\/\/x.com\/ionicframework\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/theionicteam\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How Capacitor Works - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/how-capacitor-works-2","og_locale":"en_US","og_type":"article","og_title":"How Capacitor Works","og_description":"This blog post was originally written and published by Max Lynch on August 13th, 2020. This post has been edited as well as updated for content and links. Capacitor is a cross-platform native runtime for Web Native apps. Essentially, Capacitor takes modern web apps, and then packages them up to run on iOS, Android, and [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/how-capacitor-works-2","og_site_name":"Ionic Blog","article_published_time":"2025-04-17T16:29:41+00:00","article_modified_time":"2025-04-21T19:13:58+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png","type":"image\/png"}],"author":"The Ionic Team","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"The Ionic Team","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/how-capacitor-works-2#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/how-capacitor-works-2"},"author":{"name":"The Ionic Team","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/e246c7618b04fe8244628949bb5d7f19"},"headline":"How Capacitor Works","datePublished":"2025-04-17T16:29:41+00:00","dateModified":"2025-04-21T19:13:58+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/how-capacitor-works-2"},"wordCount":915,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/how-capacitor-works-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png","keywords":["Capacitor","Ionic"],"articleSection":["Business","Engineering","Product"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/how-capacitor-works-2#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/how-capacitor-works-2","url":"https:\/\/ionic.io\/blog\/how-capacitor-works-2","name":"How Capacitor Works - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/how-capacitor-works-2#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/how-capacitor-works-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png","datePublished":"2025-04-17T16:29:41+00:00","dateModified":"2025-04-21T19:13:58+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/how-capacitor-works-2#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/how-capacitor-works-2"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/how-capacitor-works-2#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/how-capacitor-works-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"How Capacitor Works"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/e246c7618b04fe8244628949bb5d7f19","name":"The Ionic Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/10\/ionic-team-blog.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/10\/ionic-team-blog.png","caption":"The Ionic Team"},"sameAs":["https:\/\/twitter.com\/ionicframework","https:\/\/x.com\/ionicframework"],"url":"https:\/\/ionic.io\/blog\/author\/theionicteam"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2025\/04\/choosecap-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=6378"}],"version-history":[{"count":3,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6378\/revisions"}],"predecessor-version":[{"id":6388,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6378\/revisions\/6388"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/6384"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=6378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=6378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=6378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}