We have a web app, created with Ionic 1.3.1, that works fine. We are now about to add functionality that will require access to a USB device. Is there a way to include USB access for simple web apps. I have searched, and there are lots of answers for testing on android devices via a USB port, but nothing on accessing non-standard USB devices by a web app on a pc.
I’m far from being highly knowledgeable about Ionic and web apps, but I’m slowly learning, so something obvious may have been missed by myself. If so, please point me.
Yes. We are embedding a website, who’s app can access the device, when their website is directly accessed. When it is embedded in our app (using a modal page), their app can not see the usb device. I’m think that Ionic does not support accessing the usb device, and may require a plugin or something, but I have only found results discussing debugging on a portable device using usb.
Ionic “just” wraps a native webview into a native app, so everything that works in a browser should also work in an Ionic app. What exactly is a “modal page”?
Sorry, I’m not as knowledgeable as I should be on the subject. We are using “$ionicModal”, so I guess we are using a modal webview. I didn’t write it, and have some difficulty seeing how all of the parts fit together. Please don’t ask why a guy with my knowledge is working on it. I just am. I’m learning slowly.
That’s the thing. When going directly to the website, which contains the app, the usb device is recognized and works fine. The site must be accessed via Google Chrome browser, as their app is using WEBUSB.
The problem is that when opening that website in our modal webview, the usb device is not recognized. Our app is really a web app, in that it is running in a browser.
You knocked me over with that feather. Are you saying that “$ionicModal” opens a Safari Webview, which I know doesn’t know about WEBUSB?
I’m sorry, I don’t expect you to give me lessons on all of this. Maybe it’s time I bite the bullet, and start taking some online training on this stuff instead of trying to learn as I go.
I can’t speak to the problem at hand, but wanted to take a step back and explain as far as the overhead picture goes.
Ionic is basically a CSS and JS library. It provides functionality via JS, and lots of platform styling via CSS.
Ionic uses Cordova, which provides a webview. This webview is basically a stripped down browser that “runs” your Ionic code (I.e. your HTML, JS, and CSS). So everything that happens inside of your Ionic app is running in this “browser”, aka the webview.
So the modal you show doesn’t provide it’s own webview, but as @Sujan12 has been alluding to it is indeed running in a webview. Just because your entire app is technically in a webview.
Hopefully that help explains some things. If not feel free to ask.
Check how your $ionicModal really works. It can not “include” a website in any way. It might add an iframe to the site, that displays a website - this would then be: Native Ionic App → Webview → Ionic HTML/JS app → ionicModal → iFrame → Website.
But I just noticed:
What does this mean exactly? How does one access the app?
We’re not actually using Cordova, but your explanation has opened my eyes somewhat. I have actually read about this in an AngularJS book, but I’m having a hard time putting all of the pieces together. I may just have to do some serious research. There are so many pieces that either fit together or don’t (node, rails, ionic, cordova, angular, etc, etc). I just have to get my head wrapped around it all. More research is where I’m headed.
Nope. $ionicModal just shows a bunch of HTML and CSS, ala bootstrap modals.
Another note is that Ionic and Cordova aren’t mutually exclusive, Ionic actually uses Cordova. Edit: As @Sujan12 points out this is only true when deployed as a native app, and not true when used as a normal web app.
If you actually deploy it as a native app. If run as a normal web app (take www and upload it to a webserver), no Cordova involved at all.
What browser are you testing this in @dbaillie? If opening the website with the USB stuff directly works, it should also work via your complicated flow - it is all just html with iframe.
Ok. So that makes sense, then. It should, just work, as all it is doing is displaying html, iframe, etc.
Yes. It is not being run as any type of phone app, it is strictly run via a browser, which is why the develop did not include Cordova, I assume. We are testing with Google Chrome, as it allows the use of WEBUSB.
My partner in crime here thinks that maybe there is a permission issue, after reading your latest response. I have heard that iframes may have additional security in them, that may be blocking access. I think, since it appears that this should work, I’ll look into the iframe issue, and may try opening it in it’s own webview, minus the iframe to test that theory out.
Thanks for all of your help (Sujan12 and SigmundFroyd). I came in as a somewhat blank palette and you two gave me some great insight. I appreciate it more than I can say.
I have to apologize. Ionic/AngularJS were all so new and spooky to me, that I just new that that is where the problem must lie. That nasty Ionic must have been blocking my USB access. How wrong I was. The solution to getting the necessary USB access was accomplished with the simple iframe setting below:
iframe.allow = “usb”
Thanks to Sujan12 and SigmundFroyd for walking me through how simple the above subjects are. Once you got it through my thick skull, that they are used to present the content within a webview, and have no huge mysterious factor, I was on my way, and could concentrate on the issue at hand. Thank you for your patience.