Capacitor Android WebView: Back button shows blank page

I’m building an Android app using Capacitor that loads a web app (website url) in a WebView.

The Android back button mostly works as expected and it navigates back through the WebView’s history.

When the WebView reaches the first page in its history stack, pressing the back button shows a blank page instead of exiting the app. Pressing the back button again finally closes the app.

I want to prevent this blank page so that pressing back on the first page either exits the app immediately and dont show blank page at all.

I have tried back button but nothing shows in console and I can't see console when back is clicked in android studio logcat as well. let me know if I am doing something wrong. I was thinking to handle it manually via backButton but that does not help either


App.addListener('backButton', async () => {
console.log('[BACK BUTTON] pressed');
const browser = this.browserRef;

if (!browser) {
console.log('[BACK BUTTON] No browser open → exit app');
App.exitApp();
return;
}

if (browser) {
const current = this.iabHistory[this.iabHistory.length - 1] || '';
console.log('[BACK BUTTON] Current URL in history:', current);
if (!current || current === 'about:blank' || current.includes('/mobile/loader')) {
console.warn('[BACK BUTTON] At loader/blank → closing browser');

browser.close();
this.browserRef = null;
App.exitApp();
return;
}


let idx = this.iabHistory.length - 2;
let prevUrl = '';
while (idx >= 0) {
const candidate = this.iabHistory[idx];
if (candidate && candidate !== current && !candidate.includes('/mobile/loader')) {
prevUrl = candidate;
break;
}
idx--;
}

if (prevUrl) {
console.log('[BACK BUTTON] Navigating back to:', prevUrl);

browser.executeScript({ code: `window.location.replace('${prevUrl}');` });
this.iabHistory = this.iabHistory.slice(0, idx + 1);
console.log('[BACK BUTTON] jumped to', prevUrl, 'new stack=', this.iabHistory.slice());
} else {

browser.close();
this.browserRef = null;
App.exitApp();
}

} else {
console.warn('[BACK BUTTON] No previous URL → closing browser');

if (window.history.length > 1) {
window.history.back();
} else {
App.exitApp();
}
}
});

and the other code for capacitor.config.ts is as below

"@capacitor/android": "^7.4.2",
"@capacitor/app": "7.0.1",
"@capacitor/browser": "^7.0.1",
"@capacitor/camera": "^7.0.1",
"@capacitor/core": "^7.4.2",
"@capacitor/filesystem": "^7.1.4",
"@capacitor/geolocation": "^7.1.4",


and for webview I am using following

this.browserRef = this.iab.create('https://xxxxxxx.com/mobile', '_blank', { location: 'no', zoom: 'no', hardwareback: 'yes', mediaPlaybackRequiresUserAction: 'no', shouldPauseOnSuspend: 'no', allowInlineMediaPlayback: 'yes', toolbar: 'no', clearcache: 'yes', clearsessioncache: 'yes', });

Continue reading...