Made withIonicClip

Ionic Capacitor In-App-Browser Plugin - Running in Android & iOS

C

Coding Technyks

Creator on the Ionic channel

Watch on YouTube ↗

23K viewsJun 19, 202212:47 runtime

Learn how to implement the Capacitor In-App Browser plugin in your Ionic applications for both Android and iOS. This guide covers the complete setup process, from installing the plugin and configuring platform-specific settings like Android's `variables.gradle`, to opening a URL…

Chapters

#ionic#clip#frontend

Overview

This document outlines the key concepts for implementing the Capacitor In-App Browser plugin in an Ionic application for both Android and iOS. It covers installation, configuration, core usage, and event handling.

Core Implementation

The primary function is Browser.open(), which opens a given URL. It's an async function.

import { Browser } from '@capacitor/browser';

const openBrowser = async () => {
  await Browser.open({ url: 'http://capacitorjs.com/' });
};

Note
When running the app in a desktop web browser (ionic serve), this function will open the URL in a new browser tab instead of an in-app view.

Platform-Specific Configuration

Native platforms require some specific setup steps.

Android

You must update the android/variables.gradle file to specify the androidxBrowserVersion.

// In android/variables.gradle
ext {
    // ... other variables
    androidxBrowserVersion = '1.3.0'
}

Important
Before building for a native platform for the first time, run ionic build to generate the www folder, which is then copied into the native project by npx cap sync.

iOS

In Xcode, you must select a development team to sign the application before it can run on a device.

Open the project in Xcode (ionic cap open ios).
Select the root project in the navigator.
Go to the Signing & Capabilities tab.
Choose your personal or paid developer account from the Team dropdown.

Using Event Listeners

Capacitor allows you to listen for browser events. The most common is browserFinished, which fires when the user closes the in-app browser.

// Add this in your component's initialization logic
Browser.addListener('browserFinished', () => {
  console.log('User closed the browser');
});

Tip
This is useful for performing actions after the user completes a task in the browser, such as logging out or finishing a payment flow.

Another useful event is browserPageLoaded, which fires when the URL has finished loading inside the browser view.

Key Plugin Methods & Options

Browser.open(options): Opens the browser.
- url: (string) The URL to load.
- toolbarColor: (string, optional) Hex color code for the browser toolbar (e.g., #ffffff).
- presentationStyle: ('fullscreen' | 'popover', optional, iOS only) Defines how the browser is presented.
Browser.close(): Programmatically closes the in-app browser window. This will throw an error if no browser window is currently open.
Browser.addListener(eventName, listenerFunc): Adds a listener for a browser event.
Browser.removeAllListeners(): Removes all previously registered event listeners.

Introduction to the Capacitor In-App Browser

Hello friends, a very warm welcome to Coding Techniques again. Today we are going to learn about an interesting topic, which is In-App Browser. So you must have already implemented the In-App Browser, but we are going to implement this using the Capacitor plug-in, right?

So the Capacitor plug-in In-App Browser is not that different, but it is good for iOS one also. So we are going to see how that performs and we are going to see a little bit about the listener out there, how that is getting impacted, all that stuff in this particular video. So stay tuned to the end. You already like that up. So with that being said, let's dive into this video right now.

Initial Ionic Project Setup

So in this video, I have already created a new project. You can see out here, this is the command that I have used for creating a new project. And once the project is created, I have gone inside that folder and opened it up in Visual Studio Code. Then I opened the terminal out here. You can go out here and go for New Terminal. Once that is done, I have simply run ionic serve out here. Alright, this is the command. So once that is done our app is up and running.

Now we need to implement our plugin out here, right? And for doing that up, let me go to the src folder, then app folder, and let's go to the home folder out here. Let me rename it to Browser App, okay, or In-App Browser, you can write it down out there. Anything you can write. Let me remove all the content from here, okay? And also from the SCSS, I will remove everything. We don't need this full screen stuff out here and also this one too. The only thing that I'm going to have is just a button. So let me just create it up.

ion-button which I will expand to block and will pass a class out here for the margin, so ion-margin that I'm going to pass. And the name, let me give it 'Open Browser', okay? And in here I will also give a click event which I'll name it as openBrowser. Fine, let's create it out here in the TypeScript one: openBrowser.

Installing and Syncing the Capacitor Plugin

Now once this is created, we need to pass the functionality for that. So now you can see I'm already into the capacitorjs.com docs. Now from the /docs, I have gone to the APIs. Let me just show you. I'll go out here to the documentation, you go to the plugins, official plugins, and out here I've gone to the Browser one. Now once you enter out here, you simply need to copy this particular plugin to install, which I'll do it out here in a new PowerShell. Paste it.

Once that is done, before hitting the next command I need to run ionic build just to create the www folder, otherwise I cannot run this syncing part. So let's wait for it to finish. It is done. Now let me copy this command and I'll paste it out here. Now this is also done. Once everything is done, what else we have to do? For Android and iOS.

Implementing the `open` Method and Web Test

For Android we have to pass few permissions. We will work with that. Let's create our functionality at first. Let me give it out here, and then we will check in the browser also. I don't think it's going to work in the browser, but let's check it out.

So let me simply copy this up and let's go out here. Let me paste it, make it async, and this Browser I will import it from @capacitor/browser. Alright, this is done. Now if I click on this let's see what happens. I'm clicking on that and it has opened the browser in a different tab. That is happening in the browser one. Let's check it in a real device now. It should open up in an in-app browser.

Exploring Plugin Options & Adding Native Platforms

Okay, so for that I have to create the platform. So ionic cap add android.

Let's see what else we can do meanwhile that is being done. So you can add listeners also out here, whether the browser is finished or browser page is still loading. And at last you can remove all the listeners. So you can work with that also. You can close this browser by using this close function. So other things are not that much important out here. You can even give the window name that is for web only, right? Toolbar color also you can pass out here and then presentation style, whether it should be a full screen or a popover style. Which one is the default one? Defaults to full screen. That's okay. And that is only for iOS. So this changes you can do only for the iOS, otherwise it will be full screen by default, right? So that's okay.

I think the platform is added for Android. Let's add it for the iOS also. All right, this is also added. That's great.

Configuring and Building for Android

Now let me make the changes in the variables.gradle. So let me just search out here, variables. You can see it is coming up. I'm hitting Command + P to enter this one alright, just to get that searching one. Okay. Now out here what I need to do? Well it is written that for Android I need to pass something. Where was it? Yeah, this is the one. Let me copy this up and paste it out here. That will be equals to a version that I already defined out here. Let me simply copy the version and I will paste this version directly. Fine, this is the only thing that I need to do.

Now I can simply run it in my Android and iOS devices. Now let's try it out in our Android one. So what I will do, let me first sync the project. So what I will do, ionic cap sync I will use it out here. Okay, the syncing is done in Android and iOS both. Now let me open it up in Android, so ionic cap open android and you can see Android Studio has opened up. Now it is ready. Let me hit the run button and let me install it up. Alright, it is getting installed and it is installed now.

Testing the In-App Browser on Android

Now let me hit on the Open Browser button and see what happens. Alright, it has opened up the browser in the in-app browser I suppose. If I close this, I'm already into the browser, but if I click on it again and yeah, I'm in the same application only. So this is working in Android. That's pretty okay. I'm happy with this.

Even you can pass the title, I think. Now it was written somewhere. Let me just check it out. Window name you can pass, that is web only. Okay, that's okay. You can pass the toolbar color out here. We can try that up but I don't think that's needed. Toolbar color you can change when we open the browser, the toolbar color you can change but that is not necessary actually. So we can skip that up. Presentation is only for iOS so we won't touch it up and we don't need to do anything else I suppose.

Implementing the `browserFinished` Event Listener

Listener, well listeners are not that important. 'browserFinish', well if you are doing some tracking via the browser then you can check for 'browserFinish' or not, okay? But as of now, like I'm not doing anything. Just to show you what should I do?

So let me just check it out here. 'Listen for the browser finished event. It fires when the browser is closed by the user.' So basically this listener will listen to this close function, I think. If you are closing the browser then this particular listener will be triggered, okay? So you can perform some actions on this. And how you need to pass? Well basically out here I don't think it is shown. So simply you need to pass out here the event name that is browserFinished and a listener function. That means it will be a callback, okay? So you just have to pass the callback out here in this particular manner. Function, then this arrow symbol and then within that you can pass the functionality. All right, so that is what you need to do, which we always do in all the events.

All right, I'll just show you up. I won't actually use it. Let me minimize this up, then we will try for the iOS. Let me just show you at first quickly. So, Browser.addListener, where you can pass, you can see suggestion is coming, browserFinished if I'm passing. And out here in the second one, it will take the listener function. So it will be a callback only in this particular manner. Fine. You can see this is how you need to pass. That's it. And you can listen for this particular change. console.log('browser finished'). Okay, that's what you can do. And if you want to just check it out, simply let me just show you.

I'll create another button out here, 'Close Browser'. Let me just do it quickly. Copy, paste. All right, and I'll change this to closeBrowser. Close browser, but I won't be able to trigger data because for closing the browser, definitely you have to do something right in the main application, but we are into the browser at that point of time, so we cannot trigger this up. But still, let's have that up. I want to see whether if I'm closing the app directly by using the cross button out there. Let's see if it exists or not. So what I need to do, let me have async closeBrowser, and we will check this on iOS only. Fine. await Browser.close(). This is a promise of type void. So that's it, we have to do this stuff only. So that's pretty okay.

Preparing the Project for an iOS Build

Now let's try it in iOS. But before that I will sync the project for Android and iOS both. Alright, this is done. Let's open it up in iOS now. But in order to use it in iOS, well I have to change the package name also, right? So let me just do one thing, I will change the package name everywhere. I'll copy this package name and go for searching. I'll paste it out here and out here I'm going to pass the domain name at first in the reverse manner. So techniques.coding... in the reverse manner... .your app name which should be unique. So I will just have out here browserapp. There should not be any hyphen. All right, I'll replace it everywhere. I'll close all of it and sync the project again before running it in iOS. Now the syncing is done properly. Let's open it up in iOS now by using this particular command.

Building and Testing the App on iOS

Alright, the Xcode has opened up and my iPhone is showing out here, and I think the app is ready. Let me hit the run button. But before that, let me unlock my iPhone. Alright it is ready. Let me hit the run button. Okay, the build has failed. Yes, it will, because I have to go to the app and within the app what I need to do? Okay, out here in the app I have to go to the Signing and Capabilities and you can see this is a status: 'Signing for app requires a development team.' So I already have a development team, personal development team, an account that is created, which is not required to be one that same account which you might have for purchasing. This is just an account you can create it from here itself. Add an account, simply you don't have to pay for that. Okay, so once you do that up, I'll try it again. Let's see now. So this time I'm not facing any problem and it is running in my mobile application now.

Let me just show you. I'll click on 'Open Browser' and you can see it has opened the browser, the Safari one, directly in the In-App browser. Okay? Now if I hit on the close button or 'Done', let me hit on 'Done'. Now you can see out here in the console log out here, in the Xcode you can see 'browser finished'. That is what we have written, right? Let me just expand this so that we can see out here. Let's go to our home page typescript. So this is what I have passed in the console.log which is being published out here, right? So it is listening to the browser close.

Final Demonstrations and Conclusion

Now if I hit on Close Browser, it is giving me an error, 'No active window to close', right? Because there is no browser which is opened up. Okay, so Close Browser is of no means, no meaning as of now like I already told you, but still I have just shown you up. Okay? And this listener I have shown how actually this works on browserFinished. So whenever you are just closing the browser it will be hit.

Similarly, what is the other one? browserPageLoaded. So whenever the page is loaded within the browser, then this event will get triggered. So you can just check this also. Alright, it is the same one only. So this is how you can work with all this stuff. So I have shown you in Android and iOS how exactly it works. So I hope you like this video. If you like this video, do share with your friends, and if you're new out here do subscribe to your channel. This will help the channel grow. So with this I'll wrap up this video out here. Thank you very much for watching. See you guys next time.

[Music]