{"id":3835,"date":"2021-09-28T17:56:10","date_gmt":"2021-09-28T17:56:10","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3835"},"modified":"2022-10-04T12:54:01","modified_gmt":"2022-10-04T16:54:01","slug":"ionic-portals-web-view","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-portals-web-view","title":{"rendered":"Ionic Portals: Introducing the Supercharged Web View for Native Apps"},"content":{"rendered":"<p>Today, we are excited to announce the official launch of our newest product: <a href=\"https:\/\/ionic.io\/portals\">Ionic Portals<\/a>. Ionic Portals offers a supercharged native Web View component for iOS and Android that enables teams to add web-based experiences to native mobile apps. Now, native and web teams can better collaborate while bringing new and existing web experiences to mobile in a safe, controlled way.<\/p>\n<p>This is our first product for native mobile developers. Watch this brief product demo then continue reading for all the juicy details.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"400\" data-src=\"https:\/\/www.youtube.com\/embed\/G9A9EI64Wig\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/p>\n<p><!--more--><\/p>\n<h2>Why Ionic Portals?<\/h2>\n<p>As many of you know, our mission as a company is to empower web developers to build high-quality mobile experiences with their existing skills, using the web tools and technologies they already know and love.<\/p>\n<p>We started with a focus on building native iOS and Android mobile apps that were entirely powered by the web. The industry originally called these \u201chybrid apps\u201d\u2014today, we call them Web Native apps.<\/p>\n<p>Ionic has traditionally seen the web as an alternative to native mobile app development. More recently, we\u2019ve come to realize that the web has a bigger role.<\/p>\n<p>In fact, it\u2019s incredibly common for traditional native apps to include some web-based functionality, like a mobile checkout flow or product catalog.  But too often, the product experience is clunky as users navigate from a fully native UI to a more sparse Web View with limited mobile stylings and no access to native features.<\/p>\n<p>For the native and web developers who have to collaborate together to create these embedded Web Views, the experience is painful and time-consuming. The stock Web Views provided by Apple and Google are bare bones. They require <a href=\"https:\/\/dev.to\/ionic\/building-a-better-web-view-for-mobile-apps-183\">hours of development time<\/a> just to enable basic functionality and they lack the kind of deep native integration that\u2019s required to develop a great end-user experience.<\/p>\n<p>We recognized the need for a better Web View and realized that Capacitor already has much of what we need to address these challenges. We set out to build our own supercharged Web View that would make it easy to add web-based experiences to an existing native app in a way that is seamless for users and a joy to build for native and web developers alike.<\/p>\n<p>Here\u2019s a quick overview of how it works and how to integrate it with your native mobile apps.<\/p>\n<h2>How Ionic Portals Works<\/h2>\n<p>To begin, let\u2019s explain what we mean by a Portal. A Portal is a mobile view for iOS and Android projects capable of displaying and running a web-based application, similar to the system Web View. You can embed multiple web apps into a native app, or embed one web app then display different pages\/screens in separate Portals (sections) of the native app. In this example, a web-based checkout screen is embedded into the native app as a Portal:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram.png\"><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"1024\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram-647x1024.png\" alt=\"portals-device-diagram\" class=\"aligncenter size-large wp-image-3848 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram-647x1024.png 647w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram-189x300.png 189w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram-768x1216.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram-970x1536.png 970w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram.png 1276w\" data-sizes=\"auto, (max-width: 647px) 100vw, 647px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 647px; --smush-placeholder-aspect-ratio: 647\/1024;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"1024\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram-647x1024.png\" alt=\"portals-device-diagram\" class=\"aligncenter size-large wp-image-3848\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram-647x1024.png 647w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram-189x300.png 189w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram-768x1216.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram-970x1536.png 970w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-device-diagram.png 1276w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><\/noscript><\/a><\/p>\n<p>These web experiences are seamlessly integrated into the native experience, making them virtually invisible to your users. Continuing the example, this means that after the user has placed their order, the order\u2019s confirmation details could be sent back to the native app, which reacts accordingly by displaying a \u201cSuccess!\u201d message.<\/p>\n<p>Let\u2019s get started. To get access simply <a href=\"https:\/\/ionic.io\/register-portals\">sign up here<\/a> for an Ionic account. Once you do, you\u2019ll see a product key that needs to be installed in your iOS and Android apps. Copy that key value, then open a native iOS or Android project.<\/p>\n<h3>iOS Configuration<\/h3>\n<p>To add Portals to your iOS project, place the following into your Podfile:<\/p>\n<pre><code class=\"language-ruby\"># Podfile\npod &#039;IonicPortals&#039;, &#039;~&gt; 0.2.0&#039;\n<\/code><\/pre>\n<p>After installing the dependency you need to register your copy of Ionic Portals at runtime. This works offline and in production. You&#8217;ll need to call <code>PortalManager.register()<\/code> with the API generated above before creating any Portals in your app.<\/p>\n<pre><code class=\"language-swift\">import SwiftUI\nimport IonicPortals\n\n@main\nclass AppDelegate: NSObject, UIApplicationDelegate {\n    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -&gt; Bool {\n        PortalManager.register(&quot;MY_API_KEY&quot;)\n        return true\n    }\n}\n<\/code><\/pre>\n<h3>Configuring Android<\/h3>\n<p>To add Portals to your Android project, place the following into your <code>build.gradle<\/code> file:<\/p>\n<pre><code class=\"language-groovy\">\/\/  Top-level build.gradle\nallprojects {\n    repositories {\n        google()\n\n        \/\/ Make sure JCenter and Maven Central are in your project repositories\n        jcenter()\n        mavenCentral()\n    }\n}\n\n\/\/  Module-level build.gradle\ndependencies {\n    implementation &#039;io.ionic:portals:0.2.0&#039;\n}\n<\/code><\/pre>\n<p>Similar to iOS, register your Portals install using the API key provided upon signup.<\/p>\n<pre><code class=\"language-kotlin\">import android.app.Application\nimport io.ionic.portals.PortalManager\n\nclass MyApplication : Application {\n    override fun onCreate(): Unit {\n        super.onCreate()\n        PortalManager.register(&quot;MY_API_KEY&quot;)\n    }}\n}\n<\/code><\/pre>\n<h3>Adding a Portal (Web App)<\/h3>\n<p>Now for the fun part! Let\u2019s open up our first Portal. Portal apps are fully functional web apps\u2014think Angular, React, or Vue. Any web app works!<\/p>\n<p>Your web application needs to be copied into your native application. On iOS, put your web assets in a directory at the same level that contains your main source and the <code>info.plist<\/code> file. In Android, your web application needs to be in the assets folder which by default is <code>src\/main\/assets<\/code>. Next, create the portal:<\/p>\n<pre><code class=\"language-swift\">\/\/ Swift or Kotlin\nPortalManager.newPortal(&quot;myPortalWebApp&quot;).create()\n<\/code><\/pre>\n<p>Check out the Portals docs for more details including how to <a href=\"https:\/\/ionic.io\/docs\/portals\/how-to\/pull-in-web-bundle\">continuously copy new versions of the web app<\/a> into the native projects.<\/p>\n<h3>Beyond the Basics<\/h3>\n<p>We installed Ionic Portals into our native iOS and Android apps then opened a Portal to our existing web app. This just scratches the surface of what you can do with Ionic Portals.<\/p>\n<p>Ionic Portals unlocks infinite possibilities, but with great power comes great responsibility. That\u2019s why Portals enforces good security practices to protect developers and users alike. Native developers can set granular permissions that designate which parts of the native app the web teams can touch. With this feature, native and web teams can safely collaborate while ensuring that no unauthorized access to data or accidental overwriting of important features and data occurs. For example, permitting the use of camera access by explicitly listing the <code>CameraPlugin<\/code> class:<\/p>\n<pre><code class=\"language-java\">\/\/ EcommerceApp.java\nPortalManager.newPortal(&quot;profile&quot;)\n  .setStartDir(&quot;webapp&quot;)\n  .addPlugin(CameraPlugin.class)\n  .setInitialContext(initialContextProfile)\n  .create();\n<\/code><\/pre>\n<p>A key goal of Ionic Portals is to allow you to deliver truly native mobile experiences from the web apps that are embedded in your native app. To accomplish this, you can access any native device feature, including camera, geolocation, haptics, and more. All of <a href=\"https:\/\/ionic.io\/docs\/portals\/how-to\/using-a-capacitor-plugin\">Capacitor\u2019s 20+ core APIs<\/a> are available in Ionic Portals. Here\u2019s how to add the <a href=\"https:\/\/capacitorjs.com\/docs\/apis\/camera\">Capacitor Camera API<\/a>:<\/p>\n<pre><code class=\"language-bash\">\/\/ Terminal: Install web package\nnpm install @capacitor\/camera\n\n\/\/ iOS: install Camera\npod install CapacitorCamera\n\n\/\/ Podfile\ndef portals_pods\n    pod &#039;Capacitor&#039;\n    pod &#039;IonicPortals&#039;\n    pod &quot;CapacitorCamera&quot;\nend\n\n\/\/ Android: build.gradle\ndependencies {\n    \/\/ Ionic Portals and Capacitor Dependencies\n    implementation &#039;io.ionic:portals:0.2.0&#039;\n\n    \/\/ Add Capacitor Core and Camera\n    implementation &#039;com.capacitorjs:core:3.2.2&#039;\n    implementation &#039;com.capacitorjs:camera:1.0.5&#039;\n}\n<\/code><\/pre>\n<p>That\u2019s not all. Coming soon, <a href=\"https:\/\/ionic.io\/appflow\/live-updates\">Appflow\u2019s Live Updates functionality<\/a> is coming to Ionic Portals! You can ship updates to each user experience within the same native mobile app without an app store review and release cycle. This includes web content (HTML\/CSS\/JavaScript) as well as images and files remotely in real time. Ship new features quickly, fix bugs on the same day they are found, perform A\/B testing, and more.<\/p>\n<p>The best part? Each Portal can be updated individually. Say you have a web team that manages the FAQ Portal, one that manages the checkout experience, and one that manages a user profile page. The checkout team can safely ship an update to their web experience whenever they want, without disrupting the other web teams or the native release process. <a href=\"http:\/\/go.ionic.io\/ionic-portals\">Sign up to be notified<\/a> when this launches this Fall.<\/p>\n<p>Our goal with Ionic Portals is to ensure you can build smooth and consistent user experiences across the entire app. We\u2019ve made this possible with additional features. Allow users to remain logged in across all screens by sharing session info and auth tokens across native and web. Create custom native plugins to expose native functionality to your web Portal. Discover all possibilities by checking out the <a href=\"https:\/\/ionic.io\/docs\/portals\">Portals docs<\/a>.<\/p>\n<h2><em>Et Tu<\/em>, Ionic?<\/h2>\n<p>Some of you may be wondering why we\u2019ve built a product designed primarily for native developers. Never fear though, we aren\u2019t turning away from the web, but rather embracing it further. From our recently published <a href=\"https:\/\/webnative.tech\/\">open letter<\/a> to the web community:<\/p>\n<blockquote><p>\n  <em>Web Native has the full capability and access to developers of the Web Platform, with the full functionality and performance benefits of traditional native apps.<\/em>\n<\/p><\/blockquote>\n<p>So in essence, this is a huge step in our evolution as a platform and the fulfillment of our Web Native vision, one where web developers push the limits of what&#8217;s possible with modern web technology and APIs.<\/p>\n<p>We\u2019re most excited that Ionic Portals opens the door for you\u2014the web development community\u2014to contribute in all areas of mobile development whether through brand new mobile apps or existing native apps.<\/p>\n<p>If you\u2019re part of a team that builds web and\/or Ionic apps as well as fully native apps, you can now reuse your existing web apps, move faster, and delight your users with compelling native mobile experiences.<\/p>\n<h2>Try Ionic Portals Today<\/h2>\n<p>I\u2019m thrilled to share that Ionic Portals is available today. Want to get the most out of Ionic Portals? Ionic offers support and advisory services. <a href=\"https:\/\/ionic.io\/contact\/sales\">Get in touch today<\/a>.<\/p>\n<p>We\u2019re excited to see what you build! <a href=\"https:\/\/ionic.io\/register-portals\">Add Ionic Portals to your native app project today<\/a> then share what you\u2019re creating with us on Twitter <a href=\"https:\/\/www.twitter.com\/ionicframework\">@IonicFramework<\/a>.<\/p>\n<p>Happy (Web Native) app building!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today, we are excited to announce the official launch of our newest product: Ionic Portals. Ionic Portals offers a supercharged native Web View component for iOS and Android that enables teams to add web-based experiences to native mobile apps. Now, native and web teams can better collaborate while bringing new and existing web experiences to [&hellip;]<\/p>\n","protected":false},"author":42,"featured_media":3837,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"6","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"533595","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/ionic-portals-introducing-the-supercharged-web-view-for-native-apps\/215525","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120],"tags":[125,151,100,227],"class_list":["post-3835","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements","tag-android","tag-capacitor","tag-ios","tag-portals"],"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>Ionic Portals: Introducing the Supercharged Web View for Native Apps - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Ionic Portals is a powerful Web View component for iOS and Android that enables teams to add web-based experiences to native mobile apps.\" \/>\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\/ionic-portals-web-view\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic Portals: Introducing the Supercharged Web View for Native Apps\" \/>\n<meta property=\"og:description\" content=\"Ionic Portals is a powerful Web View component for iOS and Android that enables teams to add web-based experiences to native mobile apps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/ionic-portals-web-view\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-28T17:56:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-04T16:54:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-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=\"Josh Thomas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@jthoms1\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Josh Thomas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view\"},\"author\":{\"name\":\"Josh Thomas\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/56ee80d98e763d4281bb3b036d972527\"},\"headline\":\"Ionic Portals: Introducing the Supercharged Web View for Native Apps\",\"datePublished\":\"2021-09-28T17:56:10+00:00\",\"dateModified\":\"2022-10-04T16:54:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view\"},\"wordCount\":1417,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-feature-image.png\",\"keywords\":[\"Android\",\"Capacitor\",\"iOS\",\"Portals\"],\"articleSection\":[\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-portals-web-view#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view\",\"url\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view\",\"name\":\"Ionic Portals: Introducing the Supercharged Web View for Native Apps - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-feature-image.png\",\"datePublished\":\"2021-09-28T17:56:10+00:00\",\"dateModified\":\"2022-10-04T16:54:01+00:00\",\"description\":\"Ionic Portals is a powerful Web View component for iOS and Android that enables teams to add web-based experiences to native mobile apps.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-portals-web-view\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-feature-image.png\",\"width\":1600,\"height\":880,\"caption\":\"portals-ga-feature-image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-portals-web-view#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic Portals: Introducing the Supercharged Web View for Native Apps\"}]},{\"@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\/56ee80d98e763d4281bb3b036d972527\",\"name\":\"Josh Thomas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/319329b7a036823215706b63e317539d1ab33e86575fe3d138975d175e641b5e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/319329b7a036823215706b63e317539d1ab33e86575fe3d138975d175e641b5e?s=96&d=mm&r=g\",\"caption\":\"Josh Thomas\"},\"sameAs\":[\"https:\/\/twitter.com\/jthoms1\",\"https:\/\/x.com\/jthoms1\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/josh\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ionic Portals: Introducing the Supercharged Web View for Native Apps - Ionic Blog","description":"Ionic Portals is a powerful Web View component for iOS and Android that enables teams to add web-based experiences to native mobile apps.","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\/ionic-portals-web-view","og_locale":"en_US","og_type":"article","og_title":"Ionic Portals: Introducing the Supercharged Web View for Native Apps","og_description":"Ionic Portals is a powerful Web View component for iOS and Android that enables teams to add web-based experiences to native mobile apps.","og_url":"https:\/\/ionic.io\/blog\/ionic-portals-web-view","og_site_name":"Ionic Blog","article_published_time":"2021-09-28T17:56:10+00:00","article_modified_time":"2022-10-04T16:54:01+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-feature-image.png","type":"image\/png"}],"author":"Josh Thomas","twitter_card":"summary_large_image","twitter_creator":"@jthoms1","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Josh Thomas","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/ionic-portals-web-view#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/ionic-portals-web-view"},"author":{"name":"Josh Thomas","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/56ee80d98e763d4281bb3b036d972527"},"headline":"Ionic Portals: Introducing the Supercharged Web View for Native Apps","datePublished":"2021-09-28T17:56:10+00:00","dateModified":"2022-10-04T16:54:01+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-portals-web-view"},"wordCount":1417,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-portals-web-view#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-feature-image.png","keywords":["Android","Capacitor","iOS","Portals"],"articleSection":["Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/ionic-portals-web-view#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/ionic-portals-web-view","url":"https:\/\/ionic.io\/blog\/ionic-portals-web-view","name":"Ionic Portals: Introducing the Supercharged Web View for Native Apps - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-portals-web-view#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-portals-web-view#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-feature-image.png","datePublished":"2021-09-28T17:56:10+00:00","dateModified":"2022-10-04T16:54:01+00:00","description":"Ionic Portals is a powerful Web View component for iOS and Android that enables teams to add web-based experiences to native mobile apps.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/ionic-portals-web-view#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/ionic-portals-web-view"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/ionic-portals-web-view#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-feature-image.png","width":1600,"height":880,"caption":"portals-ga-feature-image"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/ionic-portals-web-view#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Ionic Portals: Introducing the Supercharged Web View for Native Apps"}]},{"@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\/56ee80d98e763d4281bb3b036d972527","name":"Josh Thomas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/319329b7a036823215706b63e317539d1ab33e86575fe3d138975d175e641b5e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/319329b7a036823215706b63e317539d1ab33e86575fe3d138975d175e641b5e?s=96&d=mm&r=g","caption":"Josh Thomas"},"sameAs":["https:\/\/twitter.com\/jthoms1","https:\/\/x.com\/jthoms1"],"url":"https:\/\/ionic.io\/blog\/author\/josh"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/09\/portals-ga-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3835","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\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3835"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3835\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3837"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}