It's becoming evident in my testing that there's a 5mb size limit on Mobile Safari's implementation of HTML5's application cache.
Does anyone know how to circumvent or raise this? Is there some unexposed meta tag that I should know about? I have to cache some video content for an offline app and 5mb is not going to be enough.
I tried to write a simple test with this manifest:
CACHE MANIFEST
# 2010-06-20:v4
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://peach.blender.org/wp-content/uploads/big_big_buck_bunny.jpg
http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg
http://www.thelivingmoon.com/43ancients/04images/Titan/titan5km_huygens_big.jpg
http://upload.yeuamnhac.com/musica/dan_lily/dancontent/rh108poster1big.jpg
This cache will need 11.4MB of storage.
When I open a page include that manifest file, it say something like that: "This website require to use up to 25MB of storage, do you want to increase local storage?".
I think I got what the way iOS do:
You only have 5MB for local storage (include HTML5 application cache)
If your web need more, Safari need user's agreement for some packages (up to 10MB, or 25MB, or more...)
Hope that useful for you.
This won't apply to the particular offline-video use case, but you can create Web SQL databases larger than the default 5MB in iOS by simply requesting a larger DB in the openDatabase call. For some kinds of storage, SQLite can be an acceptable solution.
Also contacted apple about this.
Read my blogpost about this here: http://techblog.viewbook.com/2011/02/mobile-safari-offline-application-cache-limit/
And my StackOverflow post here: Max size iPad / iPhone Offline Application Cache
What else is on the page?
These guys keep their pages under the limit by either splitting up the pages or replacing some of the cached images with links:
http://www.mobilenoter.com/blog/post/2010/04/06/Removing-size-limit-of-a-page.aspx
I ran a web app that was larger then 5MB on an iPad (iOS 5) although it is an iPad once the page loaded past 5MB it presented a pop-up asking the user if he/she wanted to increase the size of the cache to 10MB.
I would appear that with the latest iOS version that if a web app needs more then 5MB of cache storage it will ask the user if it has permission to increase it so the user can manage his/her own memory space.
It would also stand to reason that when you view your usage data (say via iTunes) the amount you see in the "Other" category is probably web cache mostly. Also you can see how much space is being used per website by going to Settings | Safari | Advanced | Website Data.
Not sure why every forgets about the good 'ol Web apps (remember these guys? they were around before native apps!), but they're already "offline ready," which means that you don't need to load up your application cache with every component of your app.
To the best of my knowledge, there is no limit to the size of web apps.
http://www.apple.com/webapps/
Related
I'm currently working on a web app with the request that selected pages be accessible offline after downloading. I'm aware of the HTML5 offline storage method and have no problem with it, but as far as I can tell, it's developer specified.
Question is, is there a way in which I can set it up with a function that will write to the .manifest file when, for example, the user clicks a button on the page they'd like cached locally for offline viewing?
The app in its entirety would be far too large to cache locally (not only due to the restrictions of the HTML5 local storage method, but the sheer amount of time it would take).
Suggestions of alternate methods not relying on HTML5 local storage would also be welcome.
Any help would be greatly appreciated. Thanks.
I'm building a photography site, which ideally should work offline. Caching the css/js files required is pretty straightforward. The issue is, what to do with the actual photographs.
I'm currently loading them from flickr, both a thumbnail version and a full res one. This brings me to two questions:
Is it possible to cache files that are delivered from an external source, or does everything have to come from the same domain?
It is probably too much to cache all pictures in the app-cache, because it will cause a big download the first time a user hits the site. What are the recommendations here? Is it possible to have the user explicitly turn on the full version of the app cache?
If you're not serving anything over https, you can include resources from as many origins as you want in the CACHE section. But cross-origin appcaching with https only works in Chrome today. I doubt Flickr serves images over https, so you should be fine.
Some browsers will prompt the user the first time an appcache would be downloaded, but not all (I know Firefox does, but Chrome doesn't). For more control you would have to implement some logic in your application. Maybe let users make a choice within your application, store it as a per-user setting and then only serve your page with a manifest to users who opted in.
I have a 6MB binary file in my AppEngine backed app. I need to get this file to my GWT client to do many computations. I'm trying to avoid doing the computations on the server to save my instance hours quota. But this means I have to get the file to my client somehow.
I also don't want to download it to the app each time the app is opened, that would hurt my appengine outgoing bandwidth quota.
It would be nice to download it once, then have the client somehow store it for use the next time the app is opened.
How to best do this?
A ClientBundle? Use HTML5 Storage? Is this sort of thing just not done, and should I just do the computations on the server and send the result to the client?
The most easiest way to permanently cache the file is using application cache.
Another ways is HTML5 Storage (localStorage), but there is 2.5 MB limit. To use more than that amount, you have use IndexedDB (Chrome, Firefox, IE10) and WebSQL (Safari, Opera). A wrapper library like YDN-DB help in this case.
You can use DataResource:
https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#DataResource
The only problem you face is the file size. Different browsers have different limits - I've seen 5MB and 8MB numbers. If you can compress your file to be under 5MB, you should be fine with most browsers. (By the way, it's an enormous amount of data if it can't be compressed any further.)
Also, you can detect a mobile browser (or offer a different URL for mobile version), and do computations on the server for mobile users.
I am building a mobile app that must work in Blackberry, iPhone and Android phones. I am building this mobile app in HTML5, CSS and JQuery Mobile. Then I will use PhoneGap to allow the code to run as a native mobile app for the phone. The mobile app must be able to work without connection to the internet. The only time the app must require an internet connection is when it loads for the first time, because that's when the app will download over 50 MB worth of data. Next time the app has internet connectivity, it will poll the server for more recent data to consume.
My problem lies in where do I store 50 mb worth of data which can be updated when internet connectivity exists?
Additional Notes
I've been discouraged by others to use Web SQL Database because the specification is no longer in active maintenance. I've read that localStorage and cache manifest has a storage limit of about 3-5 mb depending on the browser. From experience, I've encountered a lot of challenges working with the PhoneGap API to create one set of code that will reliably write to all of the following file systems: ios, bb, android.
Based on your needs: (store 10,000 images, 10,000 pdfs, +videos etc.) I don't think a "lightweight" HTML5 application is going to suit your needs.
I think that a native application is likely going to work much better where you have proper filesystem access to store the files on the device as needed (and even structure them better).
The HTML5 localStorage (5mb) and the WebSQL (SQLLite) (5mb-~50mb) database options really won't give you what you need as far as I can tell.
WebApp "wrappers" like PhoneGap and WebWorks (for BlackBerry) will give you the filesystem access you need, but I'm not sure if either of them have limitations that you'll hit size/quantity wise... hopefully someone with experience in these wrapper frameworks can indicate any size limits they've encountered.
What is new in HTML 5’s “offline web applications” feature which was not already available in all browsers?
Offline caching is the job of the browser — how did it become a job of HTML?
A web cache is a mechanism for the
temporary storage (caching) of web
documents, such as HTML pages and
images, to reduce bandwidth usage,
server load, and perceived lag. A web
cache stores copies of documents
passing through it; subsequent
requests may be satisfied from the
cache if certain conditions are met.
As written in Wikipedia’s article for Web cache.
And this is written for offline web cache in the W3C website:
In order to enable users to continue
interacting with Web applications and
documents even when their network
connection is unavailable — for
instance, because they are traveling
outside of their ISP's coverage area —
authors can provide a manifest which
lists the files that are needed for
the Web application to work offline
and which causes the user's browser to
keep a copy of the files for use
offline.
What is HTML 5 doing better and different in caching?
Is it similar to offline mode in Internet Explorer 5? And can we cache the data beyond the limit of amount of space set in browser?
Please give me an example so that I can understand the difference of HTML 5 offline cache, and browser caches.
Web browser caching is when browsers decide to store files locally to improve performance. HTTP allows web servers to suggest browsers how long to store the files for, and allows browsers to ask the server whether a file has changed (so that they can avoid re-downloading it).
However, it’s not designed to reliably store assets required by an offline application. It’s ultimately up to the browser whether, and for how long, it caches the files. And browsers will often stop using their cached version if they can’t contact the server to check that it’s up-to-date.
The HTML5 offline web applications spec provides web authors with the ability to tell browsers what to store for offline access, and requires browsers to keep those files up-to-date when it is online. It also provides a DOM property that tells the developer whether the browser is online or offline, and events that fire when the online status changes.
As Peeter describes in his answer, this allows web app developers to store user-inputted data whilst the user is offline, then sync it with the server when they’re online again. The developer has to do this storage and syncing manually, as the browser only provides the events indicating online status, but if the browser also supports localStorage, the developer can store the data there.
I can do no better than point you to the relevant chapter of Dive into HTML5: http://diveintohtml5.ep.io/offline.html
You can now cache dynamic data, instead of just js/css/html files / images.
Lets say you've got a todo list application open in your browser. You're connected to the internet and you're adding a bunch of stuff you have to do.
Boom, you're on an airplane without a connection. You've got 6 hours of time to kill so you decide to get some work done. You finish all of the things on your todo list (the list was still open in your browser). You select all of the items and change their state to "finished".
Your plane lands, you open up your laptop and refresh the page. All the changes you did without a connection are now synced to the server as you have a internet connection now.