I'm developing a simple Android App where the user must fill in a very complex form, for which I believe it's much easier to use an HTML form than an Android Activity with tons of TextViews.
The data collected by the form must be sent to some remote database, and the application must be able to work offline.
I thought of two alternatives, the question is: which one would be better?
Let a WebView load a remote website with an offline manifest
Let a WebView load a local website in assets folder
My second question is related to the storage when offline, and once again I have two options, and I don't know which one is better:
Using the HTML5 local storage, and let HTML + javascript send data to the server when online again
Let my Android app catch the form data, and handle everything the Android way.
Any input will be very helpful. Thanks in advance.
Regarding the first question: depends on how often will you need to update your form. An online cached form can be updated quickly, while bundled pages are only updateable together with the app, and you will need to consider that both legacy and new clients can connect to your server at the same time (users will procrastinate updating).
Another aspect is portability. Do you envision an iOS version of your app, or perhaps a mobile site? If yes, then an HTML5 solution is definitely more portable. Also, debugging an app which is entirely HTML or entirely native is usually easier than a hybrid one -- you can stay within a single debugger.
Perhaps, one drawback of using HTML local storage inside WebView is that the data you save will be in a kind of a "black box" -- you will not be able to back it up easily.
[Added later] OK -- one drawback of putting your site into assets folder is that you'll have to use file: scheme in order to access it. This can lead to some cross-origin loading access related issues if you will try to mix your bundled content with content from the web. Check these WebView settings for example: setAllowFileAccessFromFileURLs, setAllowUniversalAccessFromFileURLs, setMixedContentMode.
Related
We are currently starting work on a project which consists of a website, plus Apps for Android, iOS and (yes) Windows phone.
The apps are identical on all three platforms, and are relatively simple, at least in theory.
They need to provide offline access to the content on the site. This is static content, so is a set of .html pages plus assets (images, css, javascript, etc.).
They need to be able to periodically update the content automatically, when an internet connection is available.
Any external links should open in the user's internet browser rather than within the app.
The app should not display any browser 'chrome' (e.g. address bar, etc.).
It seems like Cordova is a good way to go with this (though I'm open to other suggestions). However, I'm having difficulty finding any information about how to proceed.
For point 1, the way I'd imagine it working is that the app loads some form of web view pointing to file://path/to/site/index.html. Assuming the site uses relative URLs for all internal links and assets this should be sufficient to provide a fully browsable offline version of the site. The app will ship with a static export of the current site.
For point 2, I imagined that the Cordova app would occasionally run a synchornisation process, which would essentially be a number of web requests to the website's API to find out if there is new content. It would then download any new files, placing them in the file structure referred to in point 1, overwriting existing files. (For the purposes of this question, I don't care if that temporarily puts the site in an inconsistent state.)
Point 3 sounds trivial, but I'm not sure if it is. Would target="_blank" be enough? Or a bit of JavaScript to trigger some Cordova action when the link is clicked? We control the way the HTML is generated, so we can insert additional markup for offline use, if necesssary.
Can anyone offer any advice about how to handle an automatically-updating local static site in this manner? Is it even possible?
Cordova mostly does store your html files in an app and the shows the index.html (Or an other page if you define it) in an WebView.
The cool thing here is that Cordova will also provide an API to call Device APIs from JS.
Cordova does not automatically reload you html files and assets into the app. For that you would need to release a new App or you simply reload just the Data in your App and you control all of that in JavaScript.
If you do not need any Device APIs I would recommend you take a look at ServiceWorkers for caching and reloading files.
With some HTML Tags you can also create a really App like behavior after pressing "Add to homescreen".
Best Regards
Marc
I'm looking for a way to create offline order entry application for Android and Apple tablets.
Application should download product list with images.
It should allow to show large product image and allow to enter ordered quantities for products.
This order entry must work also if there is no internet connection.
If internet becomes available, entered order should submitted to server.
I looked into offline Web application sample in
http://diveintohtml5.info/offline.html
and searched sourceforge and codeplex for reference applications but haven't found any.
Most difficult seems to be showing offline images. In html5 application I found two possibilities:
Store images in Indexeddb (or in other way) and use javascript to show images
in tablet browser in offline mode.
Where to find sample for this? To to convert database data to image which is displayed in tablet ?
Create manifest containing all image urls dynamically. Tablet browser probably then loads images into offline cache and allows to show them in offline mode.
Where to find framework or sample application which can be used as starting point ?
Should I use html5 + Indexeddb + jQuery + jQuery UI or is there better way ?
Server is Linux server running C# Mono ASP.NET MVC4 application which can provide data for this planned tablet offline application and receives orders from it. I can create WebAPI controller for application.
You need to persist the images in your application and control the references using a database (search for core data for iOS and greendao for Android). Anyway you will need a mechanism to download those images from server when internet connection is available to store that.
About the orders, you can store the order locally in your database and when internet is available you sync those informations with the server, that mechanism can be called whenever you want, you need to define how will be user experience.
My suggestion: Try to break your problem in small problems and try to resolve them. Your question looks more like a general architecture question.
Here is the topics that can help you to develop these apps:
Android:
Database: greendao:
http://greendao-orm.com/
Webservice/Persistence: https://github.com/koush/ion
iOS:
Database: Core Data: https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/CoreData/cdProgrammingGuide.html
Webservice/Persistence: https://github.com/AFNetworking/AFNetworking
I hope this help you to start.
I'm a Webdev beginner, have been learning some Python/PHP/Javascript and want to help a friend of mine with a project.
She's conducting a large scale survey of old houses/windows, and fills in forms (similar to Google Forms). However, she doesnt always have 3G coverage on her phone, so she wants some way of uploading the data when she gets online, and she wants to be able to upload photos and attach these to the forms.
I've found a javascript-library which makes use of html5 localstorage, but I havent understood if localstorage also accepts file uploads? Also, when you have submitted one form you would need internet access to open up the form again to submit another form.
Are there libraries or projects around that would help me with some of this, so I dont have to reinvent the wheel?
This is going to be very difficult to do with a web app. Your going to have to rely on something like AJAX to send the data and if it times out store in local storage and keep retrying every few minutes, because a web app has no access to anything like checking the wifi status etc.
Also that there is a limit to the size you can use in html5 local storage:
What is the max size of localStorage values?
, this is not going to work if you want to hold onto photos.
This would require a native or minimum a hybrid app (like phonegap) to store the data on the actual device in a file or SQLite database. This way you can store what you like, have access to the status of the internet connection and even have prompts to appear on the screen (when the app is in the background) to remind her that there are still some that need to be uploaded.
It will be much more reliable and stable this way
You can create an app which stores the data (form) in the Local DB (ie SQLite) of the App.
Once she is online (mostly wifi) she can start uploading the data.
This question has been brought up a ton, but I have not found a clear answer. I'd rather not take the JS injection approach, because I feel that I should not have to...
Basically what I'm doing is making an Android application that will act as an offline counterpart to a web site. When synced up, it will pull any changes to the sites html, JS, and CSS files if needed. Then while offline, it will display that in the WebView.
I want to be able to pull data from the form as if it were online, but pull it from the WebView and save it into a DB on the device. Then, when back online, the application will sync that data to the actual web site database.
I know how to get this to work with GET, but I'd much rather pull sensitive in with a POST.
We have a mobile workforce using Android Galaxy tabs and use the MobiControl MDM product to sync detailed briefing files to and from the devices on a constant basis.
Rather than having the user search through a sea of irrelevant briefs in order to find the one they want, and to provide a nicer more activity specific UI, I would like to create an app which allows a user to tap a client from a list and then show links to the relevant files plus custom content such as recent news and summaries of activity.
I started to create locally stored HTML files (saved on the internal sdcard) with the idea of creating an app to access them using webviewer but have ran into a few problems...
1) What is the best way to access files that are stored on the sdcard using webviewer? loadData? string?
2) Although the files will be stored in client specific folders, the file names will change on a ongoing basis and these ever changing file names should be the titles of the links to allow the user to identify what they need.
Still very much at the preliminary stages of thinking and r&d so suggestions on the best route to take to achieve my goal is very much appreciated.
Ad
1) What is the best way to access files that are stored on the sdcard using webviewer? loadData? string?
loadUrl() should work.
BTW, your item "2)" is not a question.