New to using Capacitor, and having an issue with a HTML app on Android Tablets. Whenever I try and link to a page inside of the app, it shows a blank page.
The Index page displays fine, but it seems any link I press it goes to a blank page.
Oddly enough, it works in the android emulator AND an android phone. But not 2 tablets we tested it on.
Any idea on why this might be?
Thanks!
check the value of navigator.userAgent, Capacitor requires Chrome/Chromium/System WebView 60 or newer.
This was the only instance of “navigator.userAgent” I found in my project folder. It was in a debug folder in a file called “browser.js” is this the right location?
This is what I found there:
// Internet Explorer and Edge do not support colors.
if (typeof navigator !== ‘undefined’ && navigator.userAgent && navigator.userAgent.toLowerCase().match(/(edge|trident)/(\d+)/)) {
return false;
}
// Is webkit? http://stackoverflow.com/a/16459606/376773
// document is undefined in react-native: https://github.com/facebook/react-native/pull/1632
return (typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance) ||
// Is firebug? http://stackoverflow.com/a/398120/376773
(typeof window !== 'undefined' && window.console && (window.console.firebug || (window.console.exception && window.console.table))) ||
// Is firefox >= v31?
// https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Styling_messages
(typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31) ||
// Double check webkit in userAgent just in case we are in a worker
(typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/));
}
I mean, you have to run navigator.userAgent in your app. i.e. by opening chrome://inspect url in your desktop chrome and inspect your app remotely there, in the console tab you type navigator.userAgent and it will tell you the chrome version.
Of if you don’t know how to inspect the app, just put alert(navigator.userAgent) somewhere in your app where the code will be called on app startup.
If I’m reading it right I have version 90. Here’s a video of whats happening
Make sure your device(tablet) is connected to your computer, open google chrome on your computer and enter this link
chrome://inspect/#devices
you should get a page like this
on that page click on inspect
you should get a view of your device on the left, in the right tab clcik on console. Now clcik on the link and check the console for any errors.
sorry for the ugly drawings
I thought the white screen was from the beginning, your app is loading fine, but the white screen appears when you click a link.
How does those links look like? (code)
Or what do they do?
Thanks for the help everybody!
Okay I think whats happening is the pages that aren’t loaded are reaching out to external JS files on the web, but its being block or can’t be reached. I get this error:
Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED
I think thats causing errors all over the place and causing the page just not to load.
(For reference I’m using a older adobe product called Adobe Edge Animate to load this particular page)
Not every page uses Edge to make pages (and I can maybe NOT use this) but I have the same error when I use Adobe Animate Canvas to load online JS to do security checks. (which are failing) The bulk of the app NEEDS to do these checks.
So I think the issue is “ERR_CLEARTEXT_NOT_PERMITTED.” I’ve been looking up possible solutions, but getting conflicting answers, none that I’ve gotten to work. Any suggestions?
The only sustainable answer to ERR_CLEARTEXT_NOT_PERMITTED is to stop using cleartext, period. That means no “http:” endpoints, only “https:” ones. I don’t know anything about any of the Adobe things you are talking about, but it would surprise me greatly if there was no secure way to use them, so I would advise looking in Adobe’s documentation for how to access this stuff using secure HTTPS protocol.
While I agree with rapropos, you probably have no choice since it’s an old Adobe product and you probably don’t have any control to make those urls https.
In this stack overflow thread there are multiple ways of allowing http urls to load, from allowing only a few, to allowing all of them
