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
Related
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'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.
Hi I have to develop an application that consists of the world cup fifa stamp album.
I have all the stamps in a png format, so in the first module i need to show the stamps that i own and the ones that not.
My original idea was to store in a database an entity called stamp that includes the image, the name of the player, the id of the stamp and the quantity that i own of each one. I don´t know which storage option to use i know that localstorage can´t store the images so I think my only option is web sql.
Is this the correct approach or the other one is to save the images like in a local folder and then using local storage save the path to the image, the id, name and number of the stamps?
Your life will be easier if you would store the images in the file system and their locations in the database.
Images must be served as static files so you will be able to access them directly
You don't need additional code to extract and stream the images
Images are easy to cache and store on the file system
The database also stores the data on the file system
For a web app you would could use multiple servers to improve performance
So yes, save the images in a local folder and use localstorage or web database to save the image paths.
For storing large amount of data you have to use SQLite for iOS and indexeddb for all other platforms.
There are two ways to access SQLite in phonegap. Either use native websql or sqliteplugin.
You can try out my library which abstract these storage mechanism. See here for example app https://github.com/yathit/cordova-sqliteplugin-todo
For storing image in the database, see here in "Storing File and Blob data" section.
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.
I have an application which downloads its product data(descipttions and images) from server and stores them localy to be available offline. For product images I'm using forge.file.cacheURL which works great but on my iPAD, this cache is being cleared during the day when I work with another apps. This causes my application to have only descipription texts available without images and user must connect to internet and synchronize again what is quite annoying. Is there a better way how to implement this scenario?
Have you tried to use the forge.prefs module for this purpose? It allows you so persistantly save key-value-pairs locally (much like HTML5 localstorage). Read more about the exact syntax in Trigger.io's official API documentation.
I'm not quite sure whether its possible to save images with this method, but you could easily transform your images into strings and vice-versa. Check out the second chapter of this post by Robert Nyman on how to save images in localStorage.