{"id":3170,"date":"2020-08-21T05:16:29","date_gmt":"2020-08-21T05:16:29","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=3170"},"modified":"2020-08-21T05:55:17","modified_gmt":"2020-08-21T05:55:17","slug":"in-app-browser-ionic","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/","title":{"rendered":"In-App Browser &#8211; Ionic"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>InAppBrowser plugin is used for opening a web browser inside Ionic and Cordova applications. With the help of this plugin, we can use web-based pages inside our application. To use this plugin, the following software must be installed on your machine:<\/p>\n<ol>\n<li>Node js<\/li>\n<li>Cordova<\/li>\n<li>Ionic<\/li>\n<\/ol>\n<h3>Create an ionic project using the following command:<\/h3>\n<p><code><br \/>\nnpm install -g cordova<br \/>\nnpm install -g ionic<br \/>\n<\/code><\/p>\n<p><code><br \/>\nionic start myApp blank<br \/>\n<\/code><\/p>\n<p>Where <strong><em>myApp<\/em><\/strong> is your application name and \u2018blank\u2019 is the type of application you want to create. If you want an application with tabs on the bottom you can use \u2018tabs\u2019 instead of \u2018blank\u2019.<\/p>\n<p>With the above command, your ionic <a href=\"https:\/\/studysection.com\/blog\/mobile-app-testing\/\">application<\/a> will be created. Now we are going to use InappBrowser. Instructions to use the plugin are given below:<\/p>\n<h3>Installation:<\/h3>\n<p><code><br \/>\nionic cordova plugin add cordova-plugin-inappbrowser<br \/>\nnpm install @ionic-native\/in-app-browser<br \/>\n<\/code><\/p>\n<h3>Platforms:<\/h3>\n<ul>\n<li>AmazonFire OS<\/li>\n<li>Android<\/li>\n<li>Browser<\/li>\n<li>iOS<\/li>\n<li>macOS<\/li>\n<li>Windows<\/li>\n<\/ul>\n<h3>Usage:<\/h3>\n<p>Go to <strong><em>project > src > app ><\/em><\/strong> home where home is the default page created by Ionic.<br \/>\nOpen home.page.html file and add the following code:<\/p>\n<p><code><br \/>\n&lt;ion-header><br \/>\n &lt;ion-toolbar><br \/>\n &lt;img class=\"logo\" src=\"assets\/images\/logo.png\"><br \/>\n &lt;\/ion-toolbar><br \/>\n&lt;\/ion-header><br \/>\n&lt;ion-content padding text-center><br \/>\n    &lt;ion-button class=\"primary\" shape=\"round\" (click)=\"goTo()\"><br \/>\n   \t&lt;ion-icon ios=\"ios-log-in\" md=\"md-log-in\"><\/ion-icon>Google<br \/>\n    &lt;\/ion-button><br \/>\n&lt;\/ion-content><br \/>\n<\/code><\/p>\n<h3>Add following code in home.page.ts<\/h3>\n<p><code><br \/>\nimport { Component } from '@angular\/core';<br \/>\nimport { InAppBrowser } from '@ionic-native\/in-app-browser\/ngx';<br \/>\n@Component({<br \/>\n selector: 'app-home',<br \/>\n templateUrl: 'home.page.html',<br \/>\n styleUrls: ['home.page.scss'],<br \/>\n})<br \/>\nexport class HomePage {<br \/>\noptions : {<br \/>\n   location : 'no',\/\/Or 'no'<br \/>\n   hidden : 'no', \/\/Or  'yes'<br \/>\n   clearcache : 'yes',<br \/>\n   clearsessioncache : 'yes',<br \/>\n   zoom : 'yes',\/\/Android only ,shows browser zoom controls<br \/>\n   hardwareback : 'yes',<br \/>\n   mediaPlaybackRequiresUserAction : 'no',<br \/>\n   shouldPauseOnSuspend : 'no', \/\/Android only<br \/>\n   closebuttoncaption : 'Close', \/\/iOS only<br \/>\n   toolbar : 'yes', \/\/iOS only<br \/>\n   fullscreen : 'yes',\/\/Windows only<br \/>\n   hidenavigationbuttons:'yes',<br \/>\n   toolbarposition:'bottom',<br \/>\n   toolbarcolor: '#000000',<br \/>\n   navigationbuttoncolor: '#ffffff',<br \/>\n   hideurlbar: 'yes',<br \/>\n};<br \/>\n constructor(private iab: InAppBrowser) {}<br \/>\n goTo(){<br \/>\n   let target = \"_blank\";<br \/>\n   const browser =<br \/>\n      this.iab.create('https:\/\/www.google.com\/',target,this.options);<br \/>\n     browser.show();<br \/>\n}<br \/>\n}<br \/>\n<\/code><\/p>\n<p><strong>To run the code, use the following command:<\/strong><\/p>\n<p><code><br \/>\n<strong>ionic serve<\/strong><br \/>\n<\/code><\/p>\n<p><strong>Result:<\/strong><\/p>\n<p>Above input will open the app in the browser and by clicking the Google button it will open the URL in the application.<\/p>\n<p><small><em>Those who want to pursue their careers in the IT industry, our extensive and elaborated <a href=\"https:\/\/www.studysection.com\/computer-fundamentals-foundation\">Computer Certification exam<\/a> is available for both beginners and experts. This exam will help with a deep analysis of your skills in different functionalities of computer systems.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction InAppBrowser plugin is used for opening a web browser inside Ionic and Cordova applications. With the help of this<\/p>\n","protected":false},"author":1,"featured_media":3172,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[523,524],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>In-App Browser in Ionic Cross Platform Mobile App Development<\/title>\n<meta name=\"description\" content=\"InAppBrowser plugin is used for opening a browser inside Ionic apps. With the help of this plugin, we can use web-based pages inside our app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"In-App Browser in Ionic Cross Platform Mobile App Development\" \/>\n<meta property=\"og:description\" content=\"InAppBrowser plugin is used for opening a browser inside Ionic apps. With the help of this plugin, we can use web-based pages inside our app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-21T05:16:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-21T05:55:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/08\/ionic.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"In-App Browser &#8211; Ionic\",\"datePublished\":\"2020-08-21T05:16:29+00:00\",\"dateModified\":\"2020-08-21T05:55:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/\"},\"wordCount\":233,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"App\",\"Ionic\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/\",\"url\":\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/\",\"name\":\"In-App Browser in Ionic Cross Platform Mobile App Development\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2020-08-21T05:16:29+00:00\",\"dateModified\":\"2020-08-21T05:55:17+00:00\",\"description\":\"InAppBrowser plugin is used for opening a browser inside Ionic apps. With the help of this plugin, we can use web-based pages inside our app.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"In-App Browser &#8211; Ionic\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"In-App Browser in Ionic Cross Platform Mobile App Development","description":"InAppBrowser plugin is used for opening a browser inside Ionic apps. With the help of this plugin, we can use web-based pages inside our app.","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:\/\/studysection.com\/blog\/in-app-browser-ionic\/","og_locale":"en_US","og_type":"article","og_title":"In-App Browser in Ionic Cross Platform Mobile App Development","og_description":"InAppBrowser plugin is used for opening a browser inside Ionic apps. With the help of this plugin, we can use web-based pages inside our app.","og_url":"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2020-08-21T05:16:29+00:00","article_modified_time":"2020-08-21T05:55:17+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/08\/ionic.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"In-App Browser &#8211; Ionic","datePublished":"2020-08-21T05:16:29+00:00","dateModified":"2020-08-21T05:55:17+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/"},"wordCount":233,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["App","Ionic"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/in-app-browser-ionic\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/","url":"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/","name":"In-App Browser in Ionic Cross Platform Mobile App Development","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2020-08-21T05:16:29+00:00","dateModified":"2020-08-21T05:55:17+00:00","description":"InAppBrowser plugin is used for opening a browser inside Ionic apps. With the help of this plugin, we can use web-based pages inside our app.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/in-app-browser-ionic\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/in-app-browser-ionic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"In-App Browser &#8211; Ionic"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":2155,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3170"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=3170"}],"version-history":[{"count":3,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3170\/revisions"}],"predecessor-version":[{"id":3173,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3170\/revisions\/3173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/3172"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=3170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=3170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=3170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}