Web App accessing iOS camera for QR scanning - ios

For 'check-in' purposes, my staffs have a mobile device (ios and android) that opens my web app through a browser. They then open a page and it allows them to scan a customer's qr code to check them in. I would like it to have as little user interaction as possible. All they staff needs to do is to keep the webapp open, and scan the qr code. The web app will then call an api on my server which check this customer in. So accessing the camera's view is best, i can then run a qr code scanner.
I've been able to do it for android (using getUserMedia) but it doesnt work for ios. (duhhh)
I'm currently using Vue.js(V1), and would like to keep it as it is.
Hybrid Apps: I've looked at OnsenUI(which seems to only work with vue2), Ionic(which doesnt allow me to build/run ios platform as i am using windows).
webapp is coded with vue.js(v1), running on a tomcat7 server, HTML, JS.
Are there any suggestions?

I've found a way to use Phonegap to allow this.
Edit: Phonegap allows you to create a hybrid app that seems like a native app(ios or android). All i did was install phonegap and used one of their plugins (barcodescanner). This is the refrence i used.
But, from my understanding, You'll need to publish the app on the app store, which is a lot of hassle (and cost money).

Related

Deploying app for personal use on iOS device

I want to build a very simple gallery like app (which uses the Telegram bot API to fetch images from certain telegram channel). I want to have this app for both Android and iOS device. I guess either progressive web app or flutter could be used to achieve this. I have developed native android apps before, and wish to learn PWA or flutter along with this project.
So my question is, can I deploy this app to my iOS device without enrolling in the Apple developer program? Since this is only for personal use and I do not wish to publish this app on any app store. Also, do I need to have a Mac with Xcode to do this?!
Thanks in advance!
For developing a Progressive Web App for iOS, you won't need Xcode and a Macbook since it is basically still a website with enhancements. However, bear in mind that PWA support on iOS is very limited. Android has much better PWA support.
This article gives an overview of what is currently possible

Technical differences between PWA and Hybrid App

What are the differences between a PWA and a hybrid app? This question was asked before but I haven't found found a proper answer to my question.
I know a PWA runs in the browser and you get a hybrid app from an app store.
But both are using JavaScript with HTML and CSS and both enable offline support and I can access native features like camera and local storage.
Once I have added a PWA to my Homescreen, it uses a web view to render the app right? And a hybrid app uses a web view as well, so what exactly are the differences between PWA and a hybrid app?
With Ionic I can even use the exact same code for a pwa and a hybrid app...
Roughly it is like this below:
web app (PWA) is just a web-site that declares certain capabilities using manifest file etc which can get it some special treatments (like leverage service worker, sign up for web notifications, go full screen etc IF target browser supports it). As a web-app it is super limited in its "privileges" on a system level (like persistence quota etc)
hybrid app (like Cordova for example) is a binary code that is "wrapping" your web-code and exposes certain "native" SDK capabilities via plugins. You can potentially also write your own plugin and in theory access any native SDK API this way. But since your main app code is still a web-app that runs inside of a webview it still has a lot of penalties like performance etc. But at least you can get things like storage etc.
native app is a binary build using target platform's SDK. That in
theory gives you max access to capabilities and performance at
expense of having to write separate code for each platform.
Makes sense?
Progressive Apps
Today, these apps only work on Opera, Chrome, and the Samsung mobile browser. However, these browsers take up only less than half of the mobile browser market.
In some devices, some of the features will not work. For instance, notifications on iOS devices will not work.
In some apps, cameras, fingerprint scanner, and GPS may not work or work with glitches.
Cordova/ Ionic based hybrid apps
Making the hybrid apps run efficiently on multiple platforms is no easy task. In some instances, it could cost almost the same as running native apps. The cost will depend on how close you want to get to the native app experience.
Since these apps will launch using a browser-like component, they are only as good as the component on which they run. Earlier, Google and Apple did not agree on the WebView. While it has vastly been improved, it does not have the same efficiency as running a native app.

Is it possible to convert angularjs web application to IOS app with Ibeacon search functionality?

I have developed a web application using angularjs, now i want to convert ios application with iBeacons device searching functionality.
Is it possible to do this, any one please give me advice on this?
Yes this is possible, you can repurpose your Angular single page app into a Cordova/PhoneGap container, then use appropriate plugins (which bridge platform specific native code to Javascript) to add iBeacon or other beacon support. If you don't find plugins that do what you want, you can create your own if you are comfortable working in the native languages of the platforms you want to use (Java for Android, Objective C or Swift for iOS).
Example plugins that already exist to help with this would be:
cordova-plugin-ibeacon
ngCordova Cordova Beacon
There's an example of how to go about this using Angular JS / Ionic framework here.
There is no way to directly scan for beacons in JavaScript. This is true whether you are talking about a web app running in Mobile Safari on iOS or inside a UIWebView container within a native iOS Web app.
If you want to combine JavaScript-based apps with beacons, the alternative is to build Hybrid apps using technologies like Cordova or Ionic (which is built off of Cordova). You can then use Cordova plugins that let you interact with native code that does the beacon scanning, and pass it back to your JavaScript application. One such plugin that accomplishes this is here:
https://github.com/petermetz/cordova-plugin-ibeacon
There are limitations with this approach. Beacon scanning typically has to be in the foreground, and you can't really wake up the app on beacon detection.
Full disclosure: I am the lead developer on the Android Beacon Library open source project upon which the above plugin is based.

iOS - Screen sharing in Perfecto Mobile

We were exploring various test suites for mobile automated testing and ran into this company called Perfecto Mobile. One of the features that blew me away was they are able to (without jailbreaking) effectively perform a "Remote desktop" on a physical iPad.
So, the iPad's screen is mirrored within a web application, it can register touch / swipe events on the web app and perform them on the device. The only relevant technical detail I have is that all this is being performed using commands sent over the USB cable.
I'm really curious as to how this is implemented and details on relevant Private APIs if any.
Thanks,
Teja
I'm not familiar with PerfectoMobile, but I can give you a few pointers on how this can be accomplished:
For the mirroring, one way would be to look at using AirPlay, the APIs are pretty well documented, but not to do what we're talking about which would require some serious reverse engineering, but it's definitely possible, these guys have done it. A different approach would be to run a background app that would periodically take snapshots of the main screen, and send them over a socket connection to a client. You could do this as a VNC server, and to incorporate the remote view in a web app, you could use noVNC. As far using a USB connection, in the case of the background app talking to a client over TCP, you could to a port forward.
To actually perform on the device the touch events sent from your remote viewer, most people have been using the GSEvent group of functions from the GraphicsServices private framework without needing to jailbreak the device. Again, a background app would receive over a socket an instruction such as "Tap there", instantiate the GSEvent, and inject it so it gets processed in the run loop of the most front app.
These few possibilities, at least, have been implemented successfully in different iOS apps up to iOS 6.1 (iOS7 is a different animal). You won't find any such app in the App Store, since Apple clearly prohibits the use of private frameworks in 3rd party apps, instead people deploy them in-house using Enterprise and ad-hoc provisioning profile. On Android however, there's VMLite available in the Play Store.
If you looking to share screen from ios / android, check out skreen.me. They have sample apps you can try out, also they provide libs for mobile app integration.

HTML5 mobile app - when to simply use UIWebView and when to use PhoneGap?

I am a web developer who needs to build an HTML5 mobile app - which we will need to try and submit to app stores, including Apple's App store. Therefore, I need to somehow wrap my app into a native framework.
That being said, I don't have time to learn the nitty gritty of Objective-C and figure it all out.
I am trying to decide between using a service like PhoneGap, or simply creating a smaller native app with a webview that pulls up my mobile app from my site's server.
In this case, the only native hardware that my app needs to be in touch with are push notifications (probably through Urban Airship) and Geolocation (which can be accomplished via HTML5).
When is it wise to go with something like PhoneGap vs. simply creating a UIWebView, and vice versa? Which would you suggest in this case?
Apple is loyal enough to PhoneGap apps - almost no problems with approval on iStore. You should just follow Apple Human Guidelines and everything should be OK.
PhoneGap provides lot's of different and interesting features. Also it's cross-platform - works great on iOS, Android, WP7 etc. I think it's the best way to wrap your HTML5 and JS.
Talking about pushes - if you select phonegap, i recommend to look at pushwoosh service.

Resources