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/
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.
I'm developing this cordova app which is required to save some data locally in case there is no internet connection available. This dataset also contains images in the form of a base64 string. Turns out I can roughly create about 7-8 items before my localstorage starts running out.
There seems to be a 5MB limit on almost all of the local storage techniques for mobile safari. After doing some googleing I couldn't find much concrete information on how to bypass this limit, as some apps are reported to have found a way around this restriction.
I'm currently using key value storage with that comes with Quasar Framework. (https://quasar-framework.org/components/web-storage.html) I'd love to keep using their API but if it's necessary I could always change some storage related code.
Is there a way to increase the size? I've ready about prompting the user for a storage increase but it's not explained anywhere specifically.
Thanks,
I had the same problem some time ago and i found no solution for localstorage.
This article is interesting if you want more details about localstorage and its limits : https://www.raymondcamden.com/2015/04/14/blowing-up-localstorage-or-what-happens-when-you-exceed-quota
To exceed this limit, I used IndexedDB which allows me to store much more data and especially to better store them.
Raymond CAMDEN has written a very interesting article that will guide you : https://www.raymondcamden.com/2015/04/17/indexeddb-and-limits
If you want to use IDB but are afraid of its complexity, there is Dexie.js which simplifies its use : http://dexie.org/
You may be able to use more browser storage by using a different API such as IndexedDB. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria
I'm building a mobile app using Meteor. To allow for offline usage of the app, I want the app to be able to download a large-ish json file while online, then access the data in the json file, written to MongoDB, while offline.
This works fine. However, in the downloaded json file, there are plenty of references to online images that won't display in the app once the app is offline.
So, I want to be able to download (a selection of) the images referenced in the json file to the app, so that the app can access them even when offline.
(Downloading images could happen in the background for as long as a connection is available.)
There's an implementation of imgCache.js available on Atmosphere, which fails to initialize for me.
I suppose it's theoretically possible to individually load each image to a canvas, save the canvas content to MongoDB, then load the content when needed. Info on some of this is here. But, this feels rather convoluted and, if really feasible, I would expect someone to have done this before with success.
How can I do achieve caching of images for offline use in Meteor?
So, you've probably already read this article about application cache.
If the images are static, you can just include them in the manifest. Be sure you understand the manifest and cache expirations (see the article).
If the images are dynamic, you'll find some techniques to store images in local storage
If that's the case, this may be what you want.
I have an iOS app that uses Core Data and ParcelKit to sync with Dropbox. However, the Dropbox Datastore API only allows records of 100K so it will not sync images that I store in the database. Any other workaround than storing images as separate files with filenames stored in the base? It is a little fragile when user can alter the content of the imagefile-folder thus braking the link to the database.
You should not store large images in the Core Data persistent store. Apple recommends that you should only store small images, such as thumbnails, perhaps 20K max. If you go beyond that, performance will eventually degrade significantly.
Thus, you cannot really avoid storing the images in separate files and storing their name/location in Core Data. This is the recommended pattern.
I do not see why you think this is fragile. Presumably you will store the images in the app sandbox there is no way the user can fiddle with them unless the iPhone is jailbroken.
The Dropbox sync should be managed independently from this setup.
FYI Dropbox just killed the Datastore API and will take it off line in 2016. :-(
You should monitor this ParcelKit Issue:
Dropbox Datastore is Deprecated #34
https://github.com/overcommitted/ParcelKit/issues/34
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.