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.
Related
Is HTML5 Application Cache different from browser cache?? If so, in what aspects, it is different and how this mechanism works?? And tell me how using AppCache we can improve browsing performance.. Also discuss about the pros and cons of HTML5 AppCache (its expiry and storage size limit etc.,)??
HTML5 Cache
HTML5 provides application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster Reduced server load - the
browser will only download updated/changed resources from the server
Browser cache
Internet browsers use caching to store HTML web pages by storing a copy of visited pages and then using that copy to render when you re-visit that page. If the date on the page is the same date as the previously stored copy, then the computer uses the one on your hard drive rather than re-downloading it from the internet.
References -
http://www.w3schools.com/html/html5_app_cache.asp
http://www.pctools.com/security-news/what-is-a-browser-cache/
The new HTML5 specification allows browsers to prefetch some or all of a website assets such as HTML files, images, CSS, JavaScript, and so on, while the client is connected. It is not necessary for the user to have accessed this content previously, for fetching this content. In other words, application cache can prefetch pages that have not been visited at all and are thereby unavailable in the regular browser cache. Prefetching files can speed up the site's performance, though you are of course using bandwidth to download those files initially.
AppCache has been deprecated.
See Google's note on it and Mozilla's. Google recommends using the service worker Cache API (which Mozilla classifies as an "experimental technology"). Note: compatibility with Safari is limited.
Difference
AppCache is specifically designed to allow web apps (and web sites) to be made available offline, though the same speed benefits which the normal browser cache provides, when the user is online, are also provided by AppCache.
The key difference with the Browser cache is that you can specify all the assets the browser should cache in a manifest file (conceivably your entire site) whereas the browser cache will only store the pages (and associated assets) you have actually visited.
I am just researching and playing around with HTML5 FileSystem API. I am downloading a video from the server and saving it to the local sandbox filesystem. Say a user comes to the sites, hits download on the video, it saves to the filesystem, then the user happens to go offline.
My question is, what is the best practice for checking if video is already in the filesystem and loading it from there?
Thanks
You're asking about persistent, client-side storage of video, specifically using the Directories and System API, sometimes called "File System API." I believe this is currently only supported on Chrome 28 and Opera 16 or higher – i.e., slightly less than 1 in 3 web users right now.
Per the API spec, the users will be prompted to allow the quota for the on-client storage allotment because you're requesting persistent, not transient, storage. While the persistent client storage may be handy, it's not entirely transparent to the user.
As for determining if the Chrome or Opera user has the video stored locally, simply calling getFile() file will do it; if the file doesn't exist, it simply throws an error that you can then handle to go ahead and pull down the video. That's the standard / best practice way of determining if a file has been stored locally.
PS: Yes, I see that Blackberry mobile supports the API, too. I just don't know if either of the remaining Blackberry users will have the device storage quota available for video :-)
With HTML5's offline capabilities is it possible to create an app that will persist after the connection is lost and the browser is closed? Specifically, here's what I'd like to do:
Connect to the app while online. Download the entire app including a small database it runs on.
Close the browser and disconnect.
Open the browser again while offline and load the app from the local cache.
Thanks to Mark Pilgrim's excellent book I believe I have an idea of how to accomplish the first step, I'm mainly wondering if the last step is possible. If this is possible, I'm guessing it requires some configuration of the browser. Any settings I should be aware of that aren't obvious?
Thanks very much for any help offered.
The last step should be possible - it just depends on what extent you want to implement it to. To my knowledge it shouldn't require any browser settings. You just have to be aware of the limitations of local storage, which I believe is 5mb max at the moment (for most browsers). Obviously you'd have to perform the checks for such permissions as outlined int the Dive Into Html5 guide you linked.
The quickest and dirtiest way is to simply issue a GET request to your online app. If it responds correctly, then use the online version. If not, use the local cache. Just disguise the timeout/failed response as a 'loading' screen.
I have read about how I can actually drag something from the desktop (from the operating system) to a html5 web page and it can "know" about what I am throwing at it. For example imgur for images. What other ways of interaction between html5 and a system exist.
Not a lot. Any interaction such as the one you've mentioned are those which are initiated by the user. For instance the FileReader API can only read files that the user has selected/dragged.
This is to keep the browser sandboxed so that malicious websites can not tamper with one's machine or files. However html5 gives you:
Geo-location Api lets you physically locate you're machine.
Local Storage is another new feature of html5 which lets you store a small amount of data on the user's machine. It's different from Cookies in that it has a larger space than cookies and the data isn't sent back to the server with every request.
Yes, HTML 5 supports native drag and drop:
http://dev.w3.org/html5/spec/dnd.html
If you peruse the link, you can also see "what other" things HTML 5 can do.
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.