iOS11 Safari: Add to Home-screen localstorage lifecycle - ios

I found Home-Screen app localstorage is not deleted by Safari clear cache.
It seems to be persistent storage, but I cannot find any documents about this.
My Question is
Is there any document about this behavior?
Home-Screen app localstorage lifecycle. when will be cleared? how to clear?
Can I use localstorage to save persistent token for PWA?
There is localstorage tester here

Local storage is not cache, it is persistent storage. You can add or delete values manually.
Apple's documentation says the following:
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.
This storage is limited to 5 MB and can be cleared if the device is running low on space, but this is the main way to store data on the user's device.
You can learn more about local storage here

Related

How much data can I store in IndexDB from a mobile phone using a PWA

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.

PWA on IOS and offline storage

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.

PWA app - Store images and videos in local storage using Angular 6

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.

iOS Any Size Limits for Local Storage

We are developing an in-house app which will have access to a large amount of image data which we would prefer to be off-line.
In short at first start-up the app will pull down the data from a server (around 3Gb) and then only get the data again when the user asks for an update. I simply want to know if there are any size limits for persistent local storage?
Again note this is an in-house app for around 100 users and they are near servers with WiFi, all devices are iOS6, retina (new basically). The updates will only be a few times a year and we may even code it so only changes are downloaded.
There are no limits to the amount of data your app can store. We have apps pulling down over 10GB of data with no trouble.
The only thing you need to be careful of is storing the data in the Caches directory (or setting the 'do not backup' flag) to avoid it being backed up to iCloud if the user has that configured on their device.

is localStorage on iPad Safari guaranteed to be persistent?

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).

Resources