I need to create an iPad application. I was considering building an HTML 5 application based on Phone Gap. This application will be a file-synchronization application and will download pdf files and images from a central database.
Would an HTML 5 application makes sense here ? ... or do I need to go native because of storage requirements? I would need at least 1 GB of storage. From my research it seems that when you create an HTML 5 application, you have limited facilities for saving files.
Did some tests on this: My conclusion is that in such case, you need to go for the native option.
This is because of a number of reasons:
The HTML 5 storage/file api has limited functionality and it is not yet fully standardized.
Furthermore, devices have different approaches for handling files especially with regards to shared storage.
Also, in some cases it is not possible to load some file types into the browser. For example, on IE (on WP) it is not possible to launch a pdf from the local file system. Sharing the data with a pdf program is not trivial because the html files are coupled with the specific application.
Related
Our main app allows our users to post media (videos and images) as well as documents on the timeline with a file size limit of 500 megabytes on a timeline.
We're currently working on a Share Extension to allow users to share files throughout the OS to that timeline. However we're running into the issue that the Share Extension has a hard memory limit of 120 megabytes.
The current implementation in our main app requires that the files selected by the user get converted to a Data object before getting compressed and then uploaded to the API via multipart form data. However to achieve this we must load the files into memory where we run into the hard memory limit.
Apple documentation is very brief and there's not a lot to be found on SO or elsewhere on how to achieve this. There are some workarounds found by storing these files (or references) in UserDefaults and then opening the main app to handle them but that kind of defeats the purpose of sharing something quickly via the extension.
What would be a way around this limit to allow us to upload these large files?
Late to this question I ran into the same issue now. The issue is the memory limit imposed by Apple on File extensions, so you can not use a data object in memory if that object is more than around 50 - 100 MB. I changed the upload to an NSURLSessionUploadTask uploadTaskWithRequest:fromFile:completionHandler:, where I upload the file from the file system directly. If you can not change that you need to provide the multipart form data and boundaries in the delegate of uploadTaskWithStreamedRequest: but consider that also here you can not read the whole file at once but have to stream it as well.
here is a question from a total beginner in mobile app development :)
I am building a React Native application for iOS platform first. I am stuck with decision on how to deliver icons to the application. Imagine:
I have a reference data set with eg travelling options (bike, motorbike, etc).
The actual set is much bigger though - I am expecting rather 100-200 items with one icon each for the UI.
These should be cached in the application.
Most of them wont change, new ones might come to the set periodically, but not even every week.
Now to the options I was thinking of:
Deliver a sqlite database with images as BLOB and update the database when new icons arrive
Deliver a sqlite database with image URLs for S3 bucket items and update the database when new icons arrive
Deliver the app with initial sqlite bundled with BLOB or URLs(?) and update over the air when new icons arrive
Do not use sqlite database at all and deliver all with REST API call on startup with image URLs. Load images when needed and cache them. Update database with new icon URLs when new icons arrive.
I think I tend to be using Option 4 because it seems least heavy on the client - he can always download the icon whenever he needs one. But it also has a latency because of downloading the icon for the first time from private s3 bucket.
However I am missing real-world experience in mobile apps and probably missing important details. Hoping for some insight from experts. Thanks for any pro and con you can deliver on this options!
You are right, no database needed at all.
So basically you have to load those icons only once and cache them inside the app. You can you something like react-native-fast-image or do caching by yourself.
If URL of icon was changed - the new image will be cached.
So on real-world apps, you usually have the image placeholders (example below) or loaders (more rare).
If you have multiple types of vehicle, you can create multiple placeholders and show them unless the original image is loading/not available.
Using react native firebase storage and firestore is a good option. The images can be loaded remotely and the caching is done automatically
I am evaluating a project that was originally targeted to be just a PWA using React and Redux.
The application needs offline support though, and needs a sizable amount of media assets (images and videos) to be available offline.
Since the service worker storage limit is just 50MB, this is not feasible for iOS.
I have toyed with the idea of using a native app wrapper that handles the storage of the media files, with most of the app remaining a Redux/React implementation.
Is there a good way to expose such assets from to the UIWebView from the native app? Or are there other common approaches for this situation?
First off all you should try to cache only that assets which are necessary for your PWA.However still if you want to store large files I would suggest you can go with IndexDB API.
IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.
Why IndexDB?
When quota exceeds on IndexedDB API, the error calls the transaction's onabort() function with Event as an argument.
When a browser requests user a permission for extending storage size, all browsers call this function only when the user doesn't allow it, otherwise, continue the transaction.
If you want know about other possible DB I would suggest you to go through this link
https://www.html5rocks.com/en/tutorials/offline/quota-research/
I am new To Intelxdk and want to know whether I can achieve the points.
Handle limited/no internet connection case
Upload file from file manager to the server
Sqlite connection, execute queries(select,add,...)
Navigate between screens using variables(Ex : user_id)
Apply UI design, and handle multiple resolutions for each platform
Download file from server to device
Use maps for a given longitude and latitude
Swipe images by fingers
Package the app for Android & iOS
Push notification configuration
Capture image from camera, save it, and upload it to server
Share text to social networks(Facebook,Twitter) using their apis
Share text to social networks using intent
Call XML webservice, and parse response
Call SOAP webservice, and parse response
Handle device rotation(landscape)
Sorry for big question,
anyone who has any details about all or one of those points. Please let me know,
I will be grateful.
I've also answered this on our forum...
Please see our demo apps and documentation for answers to your questions. I'll try to provide some quick answers below.
Many of your questions presume the XDK is providing platform services -- please note that the XDK provides debug and build services that put your HTML5 code into an embedded webview (an embedded browser window), where many of the features and functions depend on what is available in the embedded webview. This embedded webview container includes JavaScript API "extensions" that provide access to device resources that you normally would be restricted from using in a standard browser, such as access to device features and contacts, but, in general, if you can do something in a browser you can do it in the webview.
Also, keep in mind that the resources available in a webview on a mobile device (memory and CPU) are much more limited than what you are used to on the desktop browser. The desktop browser has nearly unlimited resources, that is not the case with a mobile device. You must design your app to be "lean and mean" for best results. Do not include large numbers of CSS and JS files, especially if you are only using one or two elements within those included apps.
1-Handle limited/no internet connection case
An XDK apps does not require a network connection. If your app uses a network connection it is up to you to determine the behavior when there is limited or no network connectivity. If you only try to access the network when the network is available...
2-Upload file from file manager to the server
There is no such thing as a "file manager" on a mobile device. How you locate and upload files is very device dependent and how you choose to upload them to a server is also up to you to decide. There are standard HTML5 techniques and a few APIs that can help.
3-Sqlite connection, execute queries(select,add,...)
Again, this is device/target platform dependent, it is not dictated by the XDK.
4-Navigate between screens using variables(Ex : user_id)
In general, we advise against using multi-page apps, due to JavaScript context changes, inter-page reload times and resource requirements. Single-page apps that use hidden divs to represent multiple pages tend to work better in this environment, especially if you are new to writing such apps.
5-Apply UI design, and handle multiple resolutions for each platform
Again, this is completely under your control, how well you can master things like media queries and such. The App Designer tool can help you tremendously in this regard, but it is NOT required. If you have your own layout tools you can use them and utilize the HTML/CSS they generate in your project. Or, you can write your layout by hand. For example, if you like to use Zurb Foundation as a responsive web design tool you can use it here.
6-Download file from server to device
Again, what you can do with that file when you get to the device is platform dependent.
7-Use maps for a given longitude and latitude
Not XDK dependent, use whatever network mapping service you prefer. You can get Lat and Long numbers by using the geo APIs that are extensions to the normal webview.
8-Swipe images by fingers
XDK does not dictate how you handle touch events, this is up to you to design how such events and actions are handled.
9-Package the app for Android & iOS
We provide packaging services for Android, iOS and several other mobile targets.
10-Push notification configuration
There is a push notification service built-in from AppMobi. However, we are moving to a 100% compatible Cordova contain that will allow you to (in the near future) include any push notification service that has the appropriate Cordova plugin.
11-Capture image from camera, save it, and upload it to server
There are APIs present for such actions.
12-Share text to social networks(Facebook,Twitter) using their apis
These can all be done using standard HTML5 programming techniques and do not require special services from the XDK.
13-Share text to social networks using intent
Intents depend on the specific platform.
14-Call XML webservice, and parse response
Use your favorite JS library to parse XML data, the XDK does not restrict this.
15-Call SOAP webservice, and parse response
Again, if you have a favorite JS library to parse SOAP data, the XDK does not restrict your use of such a library.
16-Handle device rotation(landscape)
Events are present in the standard webviews (precise behavior varies by platform) to help you deal with rotation.
I have large set of image arround 60 MB. I want to use these images offline, in a html5 web application. Currently I am storing image data in a sqlite table but it seems ipad safari does not support more than 50 MB of data.
Is there any way to store data in the folders at client side/ipad and then use them through javascript code or there is any alternative way to do that.
You can use the File System API, however the limitations may vary in different browsers and OSs.
https://developer.mozilla.org/en-US/docs/WebGuide/API/File_System/Introduction