I have built an application using phone gap, and plan to release the app for Apple iOS and Android OS.
The app it's self is fairly simple, and is essentially a glorified HTML website with a few jQuery mobile add-ins for slide functionality etc.
The client have an existing document management system which under request I have amended to be compatible for mobile displays. This being so that users can write notes and save them directly into the system from their phones.
The web document management system is restricted by login and locked out to a select group of static IPs, and because the App is going public, the want the functionality with the database to be limited to the same contraints as the web system...
To all intents and purposes, they want it to be an iframe within the app. So hey, this is what I did... iFrame complete and hey presto works a dream, oh wait, non of the form features work. I can't file upload or anything like this :/
So I tried using but no such luck here :/ same issues.
Over the weekend I looked into http://docs.phonegap.com/en/2.2.0/guide_cordova-webview_android.md.html but this looks to be completely in the wrong direction.
I've been looking all weekend for iFrame alternatives that will retain functionality, and am still looking as we speak.
Can I emphasise that this functionality works in the web system on Chrome for Android, Android native browser and also iOS's safari browser.
I essentially need a way of creating something like an iframe, but with the functionality of the native browsers :/ = bamboozled...
Related
I've read a few post saying that the amazon app uses webviews pretty heavily
(sources: - https://www.quora.com/Why-does-the-Amazon-app-use-WebView-in-their-Android-and-iOS-application
and https://www.teamblind.com/post/Amazon-app--webviews-cuT4sN6C)
Now, i've played with webviews a bit in android in the past where i loaded a remote url to the webview and it loaded the exact version of that website onto the mobile app. This to me was expected. So i investigated amazon's ios app and compared it to the desktop website (in mobile view), and indeed they were very similimar. However, there were some elemets that were missing on either or platforms. i'll attach the images below:
(left is the ios app, right is the mobile view of the website on desktop)
Now I have a few questions:
when people mention "webview" for amazon's use-case are they talking about the native webview from android and ios like the Webview and WKWebview? (https://developer.android.com/guide/webapps/webview and https://developer.apple.com/documentation/webkit/wkwebview), or are they talking about hybrid app technology like apache cordova or Ionic?
If it is indeed a native webview container, can you edit the html to remove some elements? like how some stuff were missing from the mobile app that weren't on the desktop website. And also add stuff like now the mobile app has "Buy Now" button, and the "favourite icon"?
How far can i go with Webviews, in terms of having access to native features like camera, gps and all that good stuff?
When people mention "webview" for amazon's use-case are they talking
about the native webview from android and ios like the Webview and
WKWebview?
Yes, they are indeed framework webviews.
But there is a good chance that they use hybrid app tech.
If it is indeed a native webview container, can you edit the html to remove some elements? like how some stuff were missing from the mobile app that weren't on the desktop website. And also add stuff like now the mobile app has "Buy Now" button, and the "favourite icon"?
You can edit html to remove / add elements using javascript in webview BUT this is not the case here.
These sites have a specific different UI for different devices. (Desktop / Mobile)
For example: Flipkart uses a mobile version on apps which is not available on browsers, except Chrome on mobile (I guess). It just redirects the user to the respective app store to download the app.
I assume it is done by checking the User-Agent field.
How far can i go with Webviews, in terms of having access to native features like camera, gps and all that good stuff?
You can use camera and gps via webview.
More info. here and here.
I have a client with two mobile apps. The first APP1 is built natively using Java and Objective-C. The second APP2 has been build using Unity.
Now the client wants to add a common functionality to both APP1 and APP2. The functionality is some new promo screens with user interaction to win credits.
I was considering to propose WebViews for this, however I came across to Progressive Web Apps.
I would like to ask whether is it possible to add a PWA in existing apps by properly initializing WebViews. I guess that the answer is 'yes'. But is there any benefit (apart from the caching) from using PWA instead of common HTML pages since the mobile app is already there?
Thank you!
A PWA is nothing more than a regular HTML webpage, which has added bonus functionality. Those bonus functionality is the incredible ease of install (if not on iOS, at least), and the offline capabilities.
The offline capabilities mostly means that the app will work (for the most part), even when no internet is available.
The easy install functionality means that if you open the site on Chrome for Android, you can "install" the app directly, without going through the app store. This doesn't work properly on iOS, however.
However, at the end a PWA is still just a webpage. This means that it is not just an app for iOS, or Android. It is an actual webpage, with an URL you can surf to. Installing a PWA just takes a local copy, and displays it in such a way that it looks like a native app.
So, in your case, there is no real bonus of making a PWA. If I read correctly, you just need to add a simple HTML page to both apps, right? You can make this a website, and then use WebView to navigate to it, sure. But there is no need to make it a PWA; it will just run in the native app itself.
I'm trying to do some simple website application for displaying my website and add some specific functionality to it.
My idea is to do something like Facebook app for mobile. Simply I need to display a website and replace File input - users should be able to capture a picture from camera or pick it from gallery (multiple select) and attach it to a post.
TL;DR;
Check images in the bottom.
What I have tried:
Using Cordova with Camera and Image picker plugin and displaying webpage in InnAppBrowser
Taking pictures with camera and picking pictures from gallery and then uploading them to server - there is a lot of examples of it.
What troubles I have found:
InnAppBrowser is forced fullscreen so I cannot resize it and place some buttons for picking pictures under it.
What do I need:
I just need to somehow attach images (from gallery or camera) to form file input or upload them to some kind of api instead - the api would process images on server and return some IDs which I can use instead of file input in the form on page to attach images to the post. Some hidden input where I would just insert IDs of uploaded images to be attached to the post (I'd write some if conditions into my PHP script).
I need my application to be multi-platform (Android, IOS, WP) so that is the reason I'm using Apache Cordova. I've tried lot of solutions and I've searched like for 5 hours. But I wasn't able to find anything useful.
Have somebody some experience in this way? Did somebody make some kind of that application?
If you can suggest any solution (it is not important to be a Cordova but it must be multiplatform) I'd be glad!
Thanks for your time!
Images
There is screen of desktop version with normal file input:
There is my vision of mobile application version with camera and image picker option right under web browser:
I guess I was not clear. The technical answer is Cordova/Phonegap are not for creating website applications. This means technically there is no "correct way" to do what you are asking.
For a website applications, all the pages are rendered from the website and controlled from the webpage/webbrowser.
For a mobile application, all the pages that the application can directly control are rendered on the mobile device. However, pages can be rendered (and/or created) from either the server or the mobile application, but the control of the page stays with the side that rendered (or created) the page. There is clear line between the two sides that can be moved, but at the *peril* of the programmer. (There are no points for being clever here, only added security issues.)
However, the Cordova and Phonegap do have plugins.The entire purpose is to use plugins to make certain task easier. However, there is a clear line between the phone and the website. To be clear on this last part, this means that all of the "plugin services" on the phone (accelerometer, contact list, etc.) are directly available to the application, and not the website. However, some of the "services" are also available as HTML5 APIs, such 'camera' and 'geolocation' – mixing the two is dangerous. The HTML5 APIs should remain on the webserver side, if used. The UX is different for HTML5. (I will not discuss HTML5 APIs any further, as they are beyond the scope of this discussion)
To make your idea work, you will need the following "core" (or equivalent third-party) plugins
file-transfer
camera (or equivalent)
inappbrowser
On the file-transfer and camera, you can do everything from the webserver, if you want. Then the only task for the end-user is to select the appropriate folder and image. If you do this from the server-side, then you CANNOT use the plugins.
If you want to use the plugins, then you cannot use a server-side generated webpage. You must create the form on the mobile device. This means the page and the form reside on the mobile device. However, if you write your webpage correctly you can dynamically add or delete elements. This means on the mobile side you have control over every step of the user experience and can enhance that experience.
On the inappbrowser, a common trick is to put the website in an iframe. However, you have no direct control on the iframe. Another common trick is to submit to the server via an API – then have the visible webpage update separately. Another common trick is to have a webpage with a websocket that could handle the webpage update. However, this could also be done with a push to the webpage, or have the webpage do polling of the server. Again, the App has NO direct control of the webpage.
This entire thread makes the following assumptions.
There is no "correct way" to do this task.
The images (photos) are stored on a website, and are publicly available for viewing.
It also assumes that no HTML5 APIs will be used.
If I interpreted your problem statement correctly, I believe what you are looking for is access to device native services - camera & gallery - from your mobile website.
A solution that fits your design requirements is for the browser to provide such services. Unfortunately WebKit and other browsers limit such support to things like Geoposition.
The way for Cordova to help you here is if your mobile website is an stand alone HTML5/CSS/JS application that can use CORS XHR or WebSockets to communicate with webindependent Web Services.
If you can bottle your website into a set of static html/js/css files that display content from dynamic web services then you are set. That same javascript can then call navigator.camera.getPicture(success, fail, options) and file-transfer the result to a waiting web service.
That camera api is not available to the InAppBrowser just as it is not available to WebKit Chrome/Safari/Edge. Trying to control the Mobile App via the InAppBrowser is most likely to fail due to security constraints.
What you might get away with is re-imaging your browser application as a series of discrete services that return raw html snippets suited for a new mobile app. Then write your Cordova app as the top level container that manages the navigation amongst the html snippets. This server-side rendering would be most useful if it was significantly challenging enough to overwhelm the mobile platform / web services pattern (think custom video server or expert system).
#Jakub,
Cedric has essentially stated it plainly. I will restate. You understanding about Cordova/Phonegap is not correct.
From: Top Mistakes by Developers new to Cordova/Phonegap
You have hit issue #5.
I QUOTE:
From Phonegap FAQ
A PhoneGap application may only use HTML, CSS, and JavaScript. However, you can make use of network protocols (XmlHTTPRequest, Web Sockets, etc) to easily communicate with backend services written in any language. This allows your PhoneGap app to remotely access existing business processes while the device is connected to the Internet.
In addition, Apple frowns on using apps as wrappers for websites.
Quote Apple iTunes Guidelines - 2.12
Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected
To be clear, your idea may be valid, but you will likely need to rethink your internal workflow. You likely want to keep the same UI and UX.
The company I work for is exploring creating "an app" version of their online video delivery webapp. The webapp is HTML5 and streams video. Nothing too scary but a lot of the stuff is server-side authentication with third party video hosts, code that will never be in a mobile app for security reasons.
The webapp has a lovely mobile stylesheet that works fine. We want an app that:
Shows a quick splash screen (and even that's optional)
Load the existing mobile website (not include it within the app)
And have the ability to specify an icon, give it a name and then shove it in the relevant marketplaces. That should satisfy the marketing department and it means I stay in control of what the app actually does.
Yeah, it's possibly the laziest app development ever... But, what's the simplest way to generate something like this? I was imagining there might be something out there already where you feed it your starting URL, splash screen, icon and name and it hands you back a multi-platform app.
Note: I'm not looking for something to create an app that looks like the mobile website and I'm not looking to put the content of the mobile website inside the app, I essentially just want a browser that loads the real mobile site.
Have a look at https://www.shoutem.com/. They provide a service similar to what you seem to be looking for but they charge royally for it. Considering the extra features you can easily add with their service your marketing department might just smell profit from using it and may therefore happily sign it off with their well known satanic smile.
There are a number of websites which provide easy web app development for a website. One of the famous is App Maker . Others include:http://www.viziapps.com/ and http://ibuildapp.com/
Since posting this, I have found:
http://www.websitetoapp.net/create
Feed it a URL and an Icon and it'll give you an Android app. Pay $5 and they'll disable adverts. Seems like it might be perfect for the Android half of this project.
Now, is there anything out there that will do this for other platforms?
I have a web application that is optimized for mobile viewing, so that it can be used on all smartphones (Android, iPhone, etc).
The development of the web application is nearing completion, but I would also like to have an actual downloadable app that users can put on their phones. All this app would do is literally point to the web application and ask them to log in.
Is this something that can be easily done, or will I need to develop full fledged Android and iPhone applications separately that interact with my web app somehow?
Thanks in advance.
PhoneGap is a tool that essentially will do what you are asking out of the box. If you are somewhat familiar with native development, you can also create a simple app where the main view is a web browser (see WebView (Android) or UIWebView (iOS)).
Try this.
Create apps from any web content.