My application is using Ionic 2. When a user launches, they are met by the splashscreen. After a few seconds an instance of InAppBrowser launches for them to login to a company portal. Once the browser is redirected, the browsers listens for the ‘loaderror’. At which point the browser closes, and Splashscreen.hide() is used. 9 times out of 10, the UI is frozen and the user tap or touch anything on the screen. If I put a done button to close the browser manually, 5 times out of 10 the UI freezes. My code is below:
public freshPOST() {
//declare ESO login page as well as open Inappbrowser
var url_code: any;
let url = "CLIENT_AUTH_ENDPOINT_URL";
let browser = new InAppBrowser(url, '_blank', 'location=no,zoom=yes,enableViewportScale=yes,toolbar=no');
//on redirect browser shows load error, and not url
browser.on("loaderror").subscribe((event: InAppBrowserEvent) => {
//pull code from url and store in variable
let token = event.url.split('=')[1].split('&')[0];
url_code = token;
localStorage.setItem('url_code', url_code);
//SETUP FOR POST
//headers to be sent
var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
let options = new RequestOptions({ headers: headers });
//parameters for POST request
let details = "code=" + url_code + "&client_id=CLIENT_ID&client_secret=CLIENT_SECRET&redirect_uri=REDIRECT_URI&grant_type=authorization_code";
//POST request with parameters injected
this.http.post('CLIENT_TOKEN_ENDPOINT', details, options)
.map(res => res.json())
.subscribe(
data => {
//convert response to string, pull access token, and store in variable
this.data = JSON.stringify(data)
var access_token = data.access_token;
var expires_in = data.expires_in;
var refresh_token = data.refresh_token;
//store all responses to local storage for retrieval
localStorage.setItem('access_token', access_token);
localStorage.setItem('expires_in', expires_in);
localStorage.setItem('refresh_token', refresh_token);
//launch app
//write to console success
//close browser
console.log("Successful POST and Authentication");
browser.close();
Splashscreen.hide();
},
(err) => {
//POST Failure
//close browser
console.log("post didnt work");
});
});
}
I am launching this from App.Component, and only if platform is ready. The first page is an intro page that you skip to get to the tabbed view. Thank you for any help you can provide.
The splashscreen does hide, and then the Intro page is loaded after fade. Once loaded, I cannot tap anything. I am successfully storing from the POST request, and successfully closing the browser, and successfully hiding the splashscreen. After all of that, I cannot tap anything. The function itself is successfully firing, it is the app itself is frozen. I put a GIF on the intro page to see if it freezes, but it plays, so something I suspect, isnt closing or hiding, and staying in front of the Intro page itself.
Ok, this sounds not like “freeze” but something is still on top of the actual page, as you say.
Look at my first reply again and check using your browser’s dev tools if there is a div on top or anything.
If not, it might be something from the native part. Then I suggest you remove the splash screen earlier (before you open the InAppBrowser) and see if this fixes the problem. Maybe even try to leave the InAppBrowser stuff out and show the Intro page directly, just find out to which part of the code this is related to.
Thank you. I am not able to identify a div that is in front of everything. Using the dev tools, it did throw a warning “Native: device ready did not fire within 5000ms. This can happen when plugins are in an inconsitent state.”
Thank you. I have tried so many combinations, but it seems to always hang up on the close function for Inappbrowser. That is the constant in all of this. Even with the splashscreen removed and auto close on the browser, it seems to focus on the browser, and not let me tap anything else. Has anyone encountered this?
I have tried it both ways. Both when platform is ready in App.Component, and in the success or error in the POST request. Each combination stems from the Inappbrowser close(). In the best situation, I would keep the splashscreen up until the user is authenticated, keeping them from using the app. The problem is not the splashscreen, because the only constant is the browser.
So I have narrowed this down a little. The only time to replicate the bug 100% is to tap on the input box in the website. If I run through the entire process, without every clicking inside the inappbrower input box, the app never freezes. Could this be a focus thing? The user is required to sign in through the web, to access the application, so I am guessing that the input box is still what the app is focusing on, even when the browser closes.
This ended up being a bug with the site itself. The keyboard would show, and the focus would be on an input box, but it would never refocus. This caused the tap to be focused on the keyboard, which had already closed by then.
Hello! I’m experiencing the same issue. After my inappbrowser has been closed, I noticed that some buttons on the app suddenly won’t work? Is this issue already been resolved?
Hi Vahidv,
Even i am facing the same issue(using v1.7.2 of inapp plugin) and have got struck in this. If u got any solution or workaround,please let me know.Thanks!