This week's giveaway is in the Android forum.
We're giving away four copies of Android Security Essentials Live Lessons and have Godfrey Nolan on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes HTML5 Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "HTML5 "offline" support question" Watch "HTML5 "offline" support question" New topic
Author

HTML5 "offline" support question

Toby Eggitt
Ranch Hand

Joined: Dec 08, 2004
Posts: 41
Hi all, I've been experimenting with the offline features in HTML5 on and off for a few years now. Recently, (last 12 months, perhaps) it seems to have started to work moderately well in some browsers, but I'm finding that it's still not working very reliably. Specifically, the code I have now works quite well in Chrome and Opera, but not at all in Firefox. Is this reasonable--i.e. is it plausible that Firefox doesn't implement offline correctly still, or does it indicate that my code is wrong?

I have the following:

cache.manifest (served from apache with a text/cache-manifest mime type, though lately that doesn't seem to matter like it used to)
--------------------------------------------------------------------------
CACHE MANIFEST
# 2012-05-23 15:29

CACHE:
offline.html
DSC_3033.jpg
unavailable.html

NETWORK:
available.html

FALLBACK:
available.html unavailable.html

--------------------------------------------------------------------------

Then "offline.html".
--------------------------------------------------------------------------
<html manifest="cache.manifest">
<head>
<title>Run this offline</title>
<script>
var output;
var appCache = window.applicationCache;

function init() {
output = document.getElementById("output");
var online = window.navigator.onLine;

output.innerHTML = "Browser is " + (online ? "on-" : "off-") + "line.
";
}

function checkForUpdate() {
appCache.addEventListener('updateready', handleCacheEvent);
appCache.update();
}

function handleCacheEvent(event) {
if (appCache.status == window.applicationCache.UPDATEREADY) {
// warn user that we're about to load the new version
alert("This site has been updated.\nInstalling changes");
appCache.swapCache(); // bring the new cache entries into play
window.location.reload();
}
}
</script>
</head>
<body onload="init()">
<h1>Offline operation-v18</h1>




<input type="button" onclick="checkForUpdate()" value="check for update"/>
<iframe src="available.html" width="300px" height="200px">No iFrames</iframe>
</body>
</html>
--------------------------------------------------------------------------

available.html and unavailable.html are just trivial html files that I want to have show from cache (in the case of unavailable) or from a live feed in the case of available.html

The behavior in Chrome and Opera is more or less as expected, complete with the ability to pull cache updates when clicking the "check for update" button. In those two browsers the only thing that doesn't work is the FALLBACK section of the cache. So, when the network is down, the iframe simply shows "cannot load resource" and does not use the unavailable.html fallback file. The cache does load the unavailable.html file, and does not load the available. html file, but the fallback behavior isn't working.

However, with Firefox, when I first load the app, I'm prompted about "web page wants to use storage for offline use" but the instant I disconnect, I can't reload the page in any way; it immediately and consistently shows a "cannot connect" splash.

Am I missing something, or is Firefox missing something?

Thanks,
Toby
Toby Eggitt
Ranch Hand

Joined: Dec 08, 2004
Posts: 41
Oh, wait, never mind. It turns out that Firefox has a specific "work offline" entry in the File menu. With that clicked, it works. Odd, I kinda expected the browser to be able to work out that it was offline from the fact that it was unable to make any network connections. Evidently that's far too complex a piece of logic!?!?

So, problem solved...
Toby.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
I am starting to get into the offline mode stuff now with a project, reminds me of coding back in the NN4/IE5 days where you do things differently and get different results.

Eric
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: HTML5 "offline" support question
 
Similar Threads
anchor links not workikng in Firefox after resize
Browsers
can't access iframe variable but can call iframe method
Initial Text Content for an IFrame - Firefox issue
Page section does not update after call of a4j:support in IE 9