I got just the react sample.
Could someone share with me how to use with vue js? I would like to put my wordpress site in an app via inAppBrowser.
I used to face the problem without any documents ( includes google, StackOverflow, ionic communicate, vue Team or maybe youtubeâŚ) talk about how to use InAppBrowser Plugins by using vue be the framework. That time is very hard for me donât know the structure of how to build InAppBrowser.
Then the only way I have is to watch youtube how people use InAppBrowser with Angular and I modify it to vue.
For me just simple like this:
for âCordovaâ
const browser = InAppBrowser.create('url', '_blank', '{ location: no }');
browser.on('loadstart').subscribe(e => {
console.log(e);
// some code....
} );
browser.on('loadstop').subscribe(e => {
console.log('loadstop', e);
// test for native phone
alert('loadstop', e) // test if I click the button or after router that link then auto browser in
App
});
browser.on('exit').subscribe(() => {
browser.close();
})
Above you can use with Capacitor, but the setup just like Cordova.
with this code. U are just only able to use in native that will be got errors in the browser if you wanna test by the browser.
the error message is said that subscribe will undefined or maybe not a function.
Below just for Capacitor
And if you wanna using Capacitor, below is the link direct to Capacitor how to use Browser (just like InAppBrowser)
https://capacitorjs.com/docs/apis/browser
import { Browser } from '@capacitor/browser';
const openCapacitorSite = async () => {
await Browser.open({ url: 'http://capacitorjs.com/' });
};
2 Likes
Thanks for helping, i will try!
Let me know if you need any additional help. I have both the Cordova InAppBrowser and Capacitor Browser working in Vue.
2 Likes
Hi @twestrick, I think I need help. I did exactly as mentioned above but my InAppBrowser.create is undefined. What should I do. Hereâs my code in vue 3
import { InAppBrowser } from â@ionic-native/in-app-browserâ;
export default defineComponent({
name: âLoginViewâ,
setup() {
const url: Ref = ref("");
const securityService: SecurityService = container.get(
TYPES.SecurityService
);
const loginHandle = async () => {
const signInRequest = await securityService.createSignInRequest();
const browser = InAppBrowser.create(signInRequest.url, â_selfâ, {
location: ânoâ,
});
browser.on(âloadstartâ).subscribe((event) => {
if (event.url.includes("#code")) {
url.value = event.url;
browser.close();
}
});
};
return {
loginHandle,
};
},
});
I think you need to declare browser outside of your loginHandle method.
Here is the code I am using:
<template>
<div class="text-center">
<ion-button @click="showWebpage">View on the web</ion-button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { InAppBrowser, InAppBrowserObject, InAppBrowserOptions } from '@ionic-native/in-app-browser'
import { IonButton } from '@ionic/vue'
import { LoadingComponent } from '@/utils/loading-component'
import { toastControllerInstance } from '@/instances'
import { ToastType } from '@/utils/toast-controller'
export default defineComponent({
name: 'WebViewer',
components: {
IonButton,
},
props: {
url: {
type: String,
required: true,
},
},
emits: {
onBrowserClose: null,
},
setup(props, { emit }) {
let browser: InAppBrowserObject
const showWebpage = (): void => {
const options: InAppBrowserOptions = {
location: 'yes',
closebuttoncaption: 'Close',
hidenavigationbuttons: 'yes',
hideurlbar: 'yes',
}
let loader: LoadingComponent
loader = new LoadingComponent({ definedText: 'Loading' })
loader.present()
browser = InAppBrowser.create(props.url, '_blank', options)
browser.on('loadstop').subscribe(() => {
loader.dismiss()
browser.show()
})
browser.on('loaderror').subscribe(() => {
toastControllerInstance.createWithJustMessage(
'An error ocurred while trying to load the external website.',
ToastType.Error
)
loader.dismiss()
})
browser.on('exit').subscribe(() => {
emit('onBrowserClose')
})
}
return {
// Methods
showWebpage,
}
},
})
</script>
3 Likes
Hi twestrick, Thanks for the reply. I solved the issue.
1 Like
@damith-a I tried to make conditional when onload on browser already stop and then it will help check the conditional. In my way just like the below code:
const makeBrowser = InAppBrowser();
const clickOpenPage = async () => {
const browser = await makeBrowser.create("url", "_selft", { location: "no" });
browser.on("loadstart").subscribe((event) => {
alert("your browser initial is ready open link direction: ", event.url);
});
browser.on("loadstop").subscribe((event) => {
let browserBoolean = false;
if (event.url.indexOf("url") !== -1 && !browserBoolean) {
// if it make current link on InAppBrowser
alert("your match the current link from inAppBrowser: ", event.url);
browser.close();
}
});
};
1 Like
This is really useful. Thanks @whitersun
1 Like
Hi twestrisk, @twestrick
iâm using ionic 7, Do you have any sample in Capacitor Browser? Or is there any way to use â@ionic-native/in-app-browser with ionic 7, vue 3
You should be able to use the Cordova In App Browser (@ionic-native) though I am only using the Capacitor plugin now. @ionic-native plugins were changed over to awesome-cordova-plugins back in 2021. The new docs are over here - In App Browser - Awesome Cordova Plugins.
Here is a snippet of my Vue component using the Capacitor Browser plugin.
import { Browser, OpenOptions } from '@capacitor/browser'
const url = 'https://google.com'
const isMobile = true
const showWebpage = async (): Promise<void> => {
const options: OpenOptions = {
url: url,
}
if (isMobile) {
await Browser.addListener('browserFinished', () => {
Browser.removeAllListeners()
emit('onBrowserClose')
})
Browser.open(options)
} else {
Browser.open(options)
emit('onBrowserClose')
}
}
// Call it
showWebpage()
1 Like
Hi @twestrick,
Thank for your support.
Iâm using Browser function for open the Identity Server 3 (login to app).
I need to close browser.
Can you help me to implement âemit(âonBrowserCloseâ)â function ?
This is just a normal Vue event that I am emitting for the parent component to listen to. I am not closing the browser programatically, the user is.
It looks like there is a Browser.close() method but itâs only available on web and iOS.
HI @twestrick
Thanks for the your reply & support.
Do you have any idea to close the browser? (close using event handler didnât work)
Be-course app state didnât change, it is inactive.
Did you not try this?
Good news. close() was just released for Android in v5.2.0 of the Browser plugin.