I have a PWA designed in Ionic and we are using it to take pictures. However the requirements is that it needs to work offline so we are storing these pictures in IndexDB.
However I have been unable to track down how much storage we will have access to in IndexDB and am concerned it will only be around 50MB or so. The the customer potentially wants to store 100 images or more offline and when it gets back to wifi it will start sending up to a remote API.
Is there any information on storage capability for indexDB when a PWA is run on a mobile device either IOS or Android?
I have seen some posts that but mainly talk about storage of the javascript files where this is actual data captured while the app is running.
NOTE: Individual images will be no more than 2-3MB each in size.
Related
We looking to develop an "App" which would have the ability to record the details of a damaged car for assessors. The idea is that a small number of assessors would have company iPads. Then when car is damaged and returned to the car yard they can visit take photos, enter some details and then upload them into the main system later. Some of the car yards may be in areas that do not have internet coverage, so offline capability is required.
Our initial thoughts were to develop an IOS App for installation on a small number of company iPads. The App could access the camera to take photos and then when the device has internet access upload the photos to the main system. However this solution could prove too costly (regarding development costs) for the customer.
I have read about PWAs and caching data, but the caching seems to be for offline read access.
If we installed chrome on an iPad and then installed a PWA then presumably
The PWA could store pictures up to 128GB * 6% = 7.68GB?
If stored using the File System API then (as long as there is plenty
of space on the system) the data will be persisted (my understanding is there is no time limit)? Or would a different type of storage be more suitable.
The offline data is obviously important (may be required in court) so are there any other concerns around persistence & stability before the images are uploaded to the main system?
Note we would prefer to use iPads (as the customer would prefer these) but we could consider other platforms.
At this stage I am really trying to find out if a PWA accessing the offline storage is likely to be feasible, practical and stable on the platform?
Firstly, iOS restricts third party web browsers (or any app that displays web pages) to using its own engine - installing Chrome on an iPad will not enable access to any web APIs that iOS/Safari doesn't already support.
So in particular:
File System API is not available on iOS, even if you're using Chrome
Cache API has a storage limitation per website of 50MB
IndexedDB has a storage limitation per website of 500MB or half the device's free space (whichever is smaller)
PWAs and their cached data are automatically wiped from devices if not used for a few weeks
the "navigator.storage" API for requiring durable data is not support on iOS, even if you're using Chrome or Firefox.
My first thought would be that if you are only going to support iPads and indefinite offline storage is a requirement, you are probably best of with a native application. Keep in mind that for this kind of application you would need the Apple Enterprise Program, which is more expensive than the regular Developer Program.
However, if you do want to use a PWA, your best bet for local storage would be the IndexedDB. As per the comment by skybondsor, browsers do indeed limit and possibly evict data after a while, according to ADM webdocs.
But reading your question, I get the sense that you do not really need persistent local storage, but rather a method ensuring that your data will eventually end up on the server. You can accomplish this by exploiting the Background Sync methodology. This allows your application to delay the upload to when a stable internet connection is available.
I am creating a Progressive web app(PWA) using angular javascript. where I need to store images and videos downloaded from the server.
I have explored on local storage and IndexedDb, both have limitation in storage size. The official document says, Safari browser allocates max of 50 MB and Chrome mobile allocates 6% of free disk space for local storage.
Is there any option to store the images and videos of large size locally and display the same in PWA app when the device is in offline?
You can't bypass the storage constraints set by the browsers(different for each browser as you have observed). Most of the browsers will let you store more(with users permissions where applicable) but that has to be noted is, these data can also be deleted by the browser without your application having any control over preventing it.
Its a snadboxed storage your browser allocated to your app and it can always take back on different scenarios.. like when the disk space goes low, user clears cache etc.,
You can rely on it as long as you have a fallback when the file is cleared. If you are thinking of storing GBs of data, this option is not for you. But if it goes couple of hundred MBs, you should be okay with most browsers, provided user accepts to allocate the space.
I previously worked on an app that used Couchbase-lite for mobile storage. this app was a native Android app. But I think it would be possible to replicate most of what that app did with a web-view via pouchdb or something similar.
I'm assuming that a webview would act the same as a browser in terms of cookies/data persistence/etc, or at least allow access to webpage that would cache information on the device.
Would there be any drawbacks for creating an offline-first mobile app via browser features instead of using a mobile devices storage? i.e. What would the cons be of creating a webview-based app that used PouchDB, instead of a cordova or native app that used Couchbase-lite?
I've seen differences of opinion across the web on this. It has been said that starting with iOS 5.1, local data storage for HTML5 content on the iPad is no longer guaranteed to be persistent, however on Apple's current Safari developer pages (https://developer.apple.com/technologies/safari/html5.html), offline persistence is suggested to be guaranteed.
Does anyone have any recent experience with this subject and able to comment on how reliable the database features of HTML5 are with Safari on iPad?
This will probably be enough information:
The w3c spec of localStorage is:
The second storage mechanism (note: localStorage) is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.
And on the Apple page:
Safari supports the latest HTML5 offline data storage features. Your application can store its information on the local machine using either a simple key/value-based data store, or a robust SQL database. The data is stored locally and persists across launches of Safari so your application doesn’t need a network connection to access the data, improving startup time and overall performance.
And searching Google (and Yahoo! because of some anti-google freaks) gives me:
In iOS 5.1 Apple have moved the location of localStorage files into a Caches folder which is subject to occasional clean up, at the behest of the OS, typically if space is short. It is likely that Apple have done this to stop localStorage being backed up to iCloud.
localStorage not accessible in IOS-6 Safari
I am not able to access localStorage in Safari (IPad with IOS-6).
For example, the following code is working fine in Windows on all browsers and on (iPad with iOS-5) but not in iOS-6:
localStorage.setItem("var","5");
alert(localStorage.getItem("var"));
Answer:
I was able to fix the issue by turning off private browsing on the iPad. I came across the solution from the reference : https://github.com/cloudhead/less.js/issues/312#issuecomment-2994845
Yes, Apple cleans up localstorage when the device is low on storage space. (I actually tested this and confirm it with a certainty).
I need to supply a single page website for a client to view offline on an iPad / iPhone.
The webpage will have Javascript, image and video assets. Reading about Cache Manifest it seems the cache on iPad is limited to 5mb.
Anyone suggest any routes forward, which ideally do not require the use of an additional app, but will allow for the offline storage of video.
You will likely have trouble with Safari to guarantee availability of your web page and videos offline.
The most reliable alternative would be to create an app using PhoneGap, because that would give you control over the video and the web page being stored offline. However that requires you to distribute it as an iOS-app to your client.
If you don't/can't distribute it as an app, you could try to find an app that is designed for offline browsing and supports video on the appstore. If you search for "Offline browser iPhone" on google or appstore you will be presented with some alternatives.