Http Plugin Capacitor, some questions

franse · July 16, 2024, 7:56pm

Just trying some moves here, no problem with capacitor cookies plugin
My app keeps the user logged in, in other words, running perfectly.

But I've founding some issues recently using capacitor http plugin just testing (recommended on some ionic topics).

Don't know how explain it, but it's seems like the app have no control about the status, or can't fetch the API.

Let me show you:

I have a login page. On success. Close the login screen
A server connect, that loads a restricted value.

This is what I see on calling the server connect:

Expected because it's restricted. So I login:

I see the 200 status. But the login screen doesn't close (like happens with cookies plugin only)
And try again the server connect:

And the value is there.
But not on the page:

<p>{{serverconnect1.data.value}}</p>

Nothing about fetch/XHR is on network tab. All appears on console:

It's like all run separately.

PS: Please note that this behavior happens only on Android environment.

Cheese · July 16, 2024, 8:06pm

This is done within the application itself by Capacitor so wouldn't show the activity in the Network tab? I am assuming... Maybe I am totally ignorant and missing something, it is well documented, my ineptitude.

What does Logcat show in Android Studio?

George · July 16, 2024, 8:10pm

The capacitor http module uses native device connectivity so it doesn’t goes through the webview own.

So that is why you don’t see it.

Advantage is that it bypasses any CORS and cookies restrictions.

However it does have some bugs in handling uploads

franse · July 16, 2024, 8:13pm

Thanks both @Cheese and @George
But how can I use it with any Wappler component?
For example the 200 login status doesn't close the login screen.

And the value is not rendered on the page..

Cheese · July 16, 2024, 8:22pm

But do you not get a response from the login Action itself? Then use a Dynamic Event to dismiss/hide the login screen? Or within the login Server Action have a Condition to check there is a result and set a cookie server side if so? Then use the cookie to control the login screen?

franse · July 16, 2024, 8:25pm

It's like nothing, absolutely nothing is rendered when it pass through the http plugin.

This is with the cookies plugin:

And this with the http plugin:

franse · July 16, 2024, 8:25pm

It's like any dynamic event or flow etc, doesn't know what's happening.

I have a button that calls the server connect, which the http plugin loads the response: 123

With the cookies plugin: click button - load server connect - value is there
With the http plugin: click button - load server connect - nothing happens.

Same behavior with anything that needs to be fetched.

Cheese · July 16, 2024, 8:28pm

What if you remove the server definition within the Capacitor.config?

{
  "appId": "com.SomeName.app",
  "appName": "SomeAPP",
  "webDir": "www",
  "plugins": {
    "CapacitorCookies": {
      "enabled": true
    },
    "CapacitorHttp": {
      "enabled": true
    }
  }
}

Why are you using the http plugin for the response? This should come from the corresponding Action?

franse · July 16, 2024, 8:38pm

Same..

Loaded correctly but not rendered.

What do you mean?
This is the code of the entire app:
How it's supposed that we work with the plugin if nothing can be printed on the app?

<!doctype html>
<html>

<head>
	<script src="dmxAppConnect/dmxAppConnect.js"></script>
	<meta charset="UTF-8">
	<title>Untitled Document</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no">
	<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
	<link rel="stylesheet" href="Framework7/6/css/framework7-bundle.min.css" />
	<script src="Framework7/6/js/framework7-bundle.min.js"></script>
	<script src="js/routes.js"></script>
	<script src="capacitor.js"></script>
	<script src="dmxAppConnect/dmxFramework7_6/dmxFramework7_6.js" defer></script>
	<link rel="stylesheet" href="dmxFramework7_icons/css/framework7-icons.css" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no">
	<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
	<script src="js/cookies.js"></script>
	<script src="js/http.js"></script>

</head>

<body is="dmx-app" id="index">
	<dmx-serverconnect id="serverconnect1" url="https://www.XXXX.com/dmxConnect/api/test/testmobile6/queryvalue.php" site="XXXX" credentials="true" noload="true"></dmx-serverconnect>

	<div id="app" is="dmx-f7-app" theme="aurora">
		<div class="panel panel-left panel-cover theme-dark panel-init" data-swipe="true">
			<div class="block-title">Left Panel</div>
			<div class="block">
				<p>This is a side panel.</p>
				<a href="#" class="panel-close">close me</a>
			</div>
		</div>
		<!-- Statusbar overlay -->
		<div class="statusbar"></div>

		<!-- Your main view, should have "view-main" class -->
		<div id="main" class="view view-main">
			<!-- Initial Page, "data-name" contains page name -->
			<div id="index" class="page" data-name="index">
				<div class="login-screen" id="login1">
					<div id="login1_page" data-name="login1_page" class="page login-screen-page">
						<div class="page-content login-screen-content">
							<div class="login-screen-title">My App</div>
							<form is="dmx-serverconnect-form" method="post" id="serverconnectform1" action="https://www.XXXX.com/dmxConnect/api/test/testmobile6/loginmobile.php" site="XXXX" credentials="true" dmx-on:success="login1.close()">
								<div class="list">
									<ul>
										<li class="item-content item-input">
											<div class="item-inner">
												<div class="item-title item-label">Username</div>
												<div class="item-input">
													<input type="text" name="username" placeholder="Username">
												</div>
											</div>
										</li>
										<li class="item-content item-input">
											<div class="item-inner">
												<div class="item-title item-label">Password</div>
												<div class="item-input">
													<input type="password" name="password" placeholder="Password">
												</div>
											</div>
										</li>
									</ul>
								</div>
								<div class="list">
									<ul>
										<li><a href="#" class="item-link list-button" dmx-on:click="serverconnectform1.submit()">Sign In</a></li>
									</ul>
									<div class="block-footer">
										<p>Some text about login information.</p>
										<p><a href="#" class="login-screen-close">Close Login Screen</a></p>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>

				<!-- Top Navbar -->
				<div is="dmx-f7-action-sheet" id="f7actionsheet1">
					<div class="actions-group">
						<div class="actions-button" dmx-on:click="">
							<div class="actions-button-text">Button</div>
						</div>
					</div>
				</div>
				<div class="navbar">
					<div class="navbar-bg"></div>
					<div class="navbar-inner">
						<div class="title sliding">Awesome App</div>
					</div>
				</div>

				<!-- Toolbar -->
				<div class="toolbar toolbar-bottom">
					<div class="toolbar-inner">
						<a href="#" class="link login-screen-open" data-login-screen="#login1">Login</a>
						<a href="#" class="link" dmx-on:click="serverconnect1.load({})">Load value</a>
					</div>
				</div>

				<!-- Scrollable page content -->
				<div class="page-content wappler-block">
					<p>{{serverconnect1.data.value}}</p>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

Cheese · July 16, 2024, 8:47pm

Aside from the login and cookie issues with Capacitor everything else is everyday Wappler. I'm not sure why you are using the response from the http plugin to do anything? Forgive my naivety.

franse · July 16, 2024, 8:58pm

I don't understand this.
I just enabled http plugin as it was recommended on some capacitor topics.

It's just: login - call the server connect to see some restricted value.

With this:

    "CapacitorHttp": {
      "enabled": false
    }

The login screen is closed on 200 login status, and the paragraph shows 123 when I click "load"

With this:

    "CapacitorHttp": {
      "enabled": true
    }

The login screen is not closed on 200 login status, and nothing that comes from a url (backend, api etc) is rendered.

It's like:

"Ok, I see all of it, but I can't do anything"

Cheese · July 16, 2024, 9:08pm

Very strange. I see everything that is sent to and from the server. Is Logcat chucking any red (E) flags at you?

Cheese · July 16, 2024, 9:11pm

Example from Logcat for a Server Action:

D  Handling CapacitorHttp request: http://localhost/_capacitor_https_interceptor_/www.*****.com/api/translation/applicationTranslation?language=pt

D  Handling CapacitorHttp request: http://localhost/_capacitor_https_interceptor_/www.*****.com/api/*****/userProfile/userProfile

franse · July 16, 2024, 9:12pm

Not even one red flag.
This is on load server connect:

2024-07-16 18:09:46.224  4151-4151  Capacitor/Plugin        com.definitive.app                   V  To native (Capacitor plugin): callbackId: 5316971, pluginId: CapacitorHttp, methodName: request
2024-07-16 18:09:46.225  4151-4151  Capacitor               com.definitive.app                   V  callback: 5316971, pluginId: CapacitorHttp, methodName: request, methodData: {"url":"https:\/\/www.XXXX.com\/dmxConnect\/api\/test\/testmobile6\/queryvalue.php","method":"GET","headers":{"access-control-allow-credentials":"true","access-control-allow-origin":"*","alt-svc":"h3=\":443\"; ma=2592000, h3-29=\":443\"; ma=2592000, h3-Q050=\":443\"; ma=2592000, h3-Q046=\":443\"; ma=2592000, h3-Q043=\":443\"; ma=2592000, quic=\":443\"; ma=2592000; v=\"43,46\"","cache-control":"no-store, no-cache, must-revalidate","Connection":"Keep-Alive","content-type":"application\/json; charset=utf-8","date":"Tue, 16 Jul 2024 21:09:14 GMT","expires":"Thu, 19 Nov 1981 08:52:00 GMT","Keep-Alive":"timeout=5, max=100","pragma":"no-cache","server":"LiteSpeed","vary":"Origin,Accept-Encoding","X-Android-Received-Millis":"1721164154564","X-Android-Response-Source":"NETWORK 200","X-Android-Selected-Protocol":"http\/1.1","X-Android-Sent-Millis":"1721164154361","x-generator":"DMXzone Server Connect","accept":"application\/json"},"dataType":"json"}
2024-07-16 18:09:46.238  4151-10547 TrafficStats            com.definitive.app                   D  tagSocket(185) with statsTag=0xffffffff, statsUid=-1
2024-07-16 18:09:46.840  4151-4151  Capacitor/Console       com.definitive.app                   D  File: http://localhost/ - Line 670 - Msg: CapacitorHttp XMLHttpRequest 1721164186221 https://www.XXXX.com/dmxConnect/api/test/testmobile6/queryvalue.php: 617.135986328125 ms

Cheese · July 16, 2024, 9:15pm

This is an issue:

Try adding:

XMLHttpRequest

To 'Allowed Headers' (REMEMBER to upload/deploy to the remote host):

Screenshot from 2024-07-16 22-14-23

franse · July 16, 2024, 9:25pm


2024-07-16 18:21:33.680  4151-4151  Capacitor/Plugin        com.definitive.app                   V  To native (Capacitor plugin): callbackId: 32723692, pluginId: CapacitorHttp, methodName: request
2024-07-16 18:21:33.680  4151-4151  Capacitor               com.definitive.app                   V  callback: 32723692, pluginId: CapacitorHttp, methodName: request, methodData: {"url":"https:\/\/www.XXXX.com\/dmxConnect\/api\/test\/testmobile6\/queryvalue.php","method":"GET","headers":{"access-control-allow-credentials":"true","access-control-allow-origin":"*","alt-svc":"h3=\":443\"; ma=2592000, h3-29=\":443\"; ma=2592000, h3-Q050=\":443\"; ma=2592000, h3-Q046=\":443\"; ma=2592000, h3-Q043=\":443\"; ma=2592000, quic=\":443\"; ma=2592000; v=\"43,46\"","cache-control":"no-store, no-cache, must-revalidate","Connection":"Keep-Alive","content-type":"application\/json; charset=utf-8","date":"Tue, 16 Jul 2024 21:21:14 GMT","expires":"Thu, 19 Nov 1981 08:52:00 GMT","Keep-Alive":"timeout=5, max=100","pragma":"no-cache","server":"LiteSpeed","vary":"Origin,Accept-Encoding","X-Android-Received-Millis":"1721164874663","X-Android-Response-Source":"NETWORK 200","X-Android-Selected-Protocol":"http\/1.1","X-Android-Sent-Millis":"1721164874460","x-generator":"DMXzone Server Connect","accept":"application\/json"},"dataType":"json"}
2024-07-16 18:21:33.687   375-11447 resolv                  netd                                 I  GetAddrInfoHandler::run: {100 100 100 983140 10170 0}
2024-07-16 18:21:33.688   375-11449 resolv                  netd                                 I  res_nmkquery: (QUERY, IN, A)
2024-07-16 18:21:33.688   375-11448 resolv                  netd                                 I  res_nmkquery: (QUERY, IN, AAAA)
2024-07-16 18:21:33.689   375-11449 resolv                  netd                                 I  resolv_cache_lookup: FOUND IN CACHE entry=0x7b33aac79810
2024-07-16 18:21:33.689   375-11449 resolv                  netd                                 I  doQuery: rcode=0, ancount=1, return value=51
2024-07-16 18:21:33.689   375-11448 resolv                  netd                                 I  resolv_cache_lookup: FOUND IN CACHE entry=0x7b33bac7db30
2024-07-16 18:21:33.689   375-11448 resolv                  netd                                 I  doQuery: rcode=0, ancount=0, return value=86
2024-07-16 18:21:33.691  4151-11298 TrafficStats            com.definitive.app                   D  tagSocket(73) with statsTag=0xffffffff, statsUid=-1
2024-07-16 18:21:34.276  4151-4151  Capacitor/Console       com.definitive.app                   D  File: http://localhost/ - Line 670 - Msg: CapacitorHttp XMLHttpRequest 1721164893674 https://www.XXXX.com/dmxConnect/api/test/testmobile6/queryvalue.php: 600.42578125 ms

Cheese · July 16, 2024, 9:28pm

Why are you not entering these settings in the Server Connect Settings panel?

My origin contains:

capacitor://,capacitor://localhost,http://localhost,capacitor-electron://localhost,http://localhost/*,http://localhost:33865,https://www.MYDOMAIN.com,https://MYDOMAIN.com,http://localhost:43915

franse · July 16, 2024, 9:29pm

For you to see that is correctly uploaded to server

Cheese · July 16, 2024, 9:30pm

Would rather see the dialogue but appreciated none the less.

capacitor://,capacitor://localhost,http://localhost,capacitor-electron://localhost,http://localhost/*,http://localhost:33865,https://www.MYDOMAIN.com,https://MYDOMAIN.com,http://localhost:43915

Now add the above to Origin...

Click Add Mobile. Or use mine from above replacing with your domain (just as a failsafe I enter this, in both www and non www formats). And Deploy again...

Cheese · July 16, 2024, 9:37pm

All fun and games eh @franse!