CODEWITHSUNDEEP
web-applicationshtmloffline
TinkerTank
TinkerTank

Reputation: 5815

HTML5 offline problem: Show a different page when offline

Using HTML5 offline cache, I want to display another page when I'm offline, compared to when I'm online. Shouldn't be too hard, but it doesn't work for me and after a few hours, I'm still not seeing what's going wrong.

This is my Manifest:

CACHE MANIFEST

# v15 Minute: 18


CACHE:
/Scripts/jquery-1.4.4.min.js
/Content/Site.css
# Documents
/content/lulo_flower.jpg

NETWORK:
/
#Detail screens
/Home/Details/2

FALLBACK:
/ /?offline=true
/Home/Details/2  /Home/Details/2?offline=true

Note that I don't want / and /Home/Details/2 to be cached. Instead, I want to use the online versions when I'm online, and I want to display the /?offline=true and /Home/Details/2?offline=true when I'm offline.

The website is working offline, but two things are going wrong:

1) The 'NETWORK' items aren't being honoured. When I visit the / page, it is being downloaded in the cache, probably due to a reference to the Manifest in the homepage html-tag ().

worse:

2) The 'FALLBACK' items aren't being honoured. When browsing with the webserver offline, the / just shows the original version (without ?offline=true) and the /Home/Details/2 can't be found. The ?offline=true versions are, however, in the cache: When I visit them manually with the webserver offline, they show up just fine.

Additional information: The Chrome developer console when opening the page for the first time:

Application Cache Progress event (0 of 5) http://localhost:51034/Scripts/jquery-1.4.4.min.js
:51034/:65online: yes, event: progress, status: downloading
Application Cache Progress event (1 of 5) http://localhost:51034/content/lulo_flower.jpg
:51034/:65online: yes, event: progress, status: downloading
Application Cache Progress event (2 of 5) http://localhost:51034/Content/Site.css
:51034/:65online: yes, event: progress, status: downloading
Application Cache Progress event (3 of 5) http://localhost:51034/?offline=true
:51034/:65online: yes, event: progress, status: downloading
Application Cache Progress event (4 of 5) http://localhost:51034/Home/Details/2?offline=true
:51034/:65online: yes, event: progress, status: downloading
Application Cache Progress event (5 of 5) 
:51034/:65online: yes, event: progress, status: downloading

It can be seen that the offline fallback pages are being downloaded just fine, but the redirect doesn't work. Moreover: there's a mysterious 6th item being downloaded.

Any idea's? Any better approaches to this problem?

Upvotes: 2

Views: 2322

Answers (2)

TinkerTank
TinkerTank

Reputation: 5815

For whoever wants to try this using the offline cache: Don't. I think it's not possible. The solution posed in the other answer didn't work for me. Eventually, I've implemented the method from the following blog post: http://ednortonengineeringsociety.blogspot.com/2010/10/detecting-offline-status-in-html-5.html .

For me, this works like a charm.

If you're not convinced that it can't be done with the HTML5 offline cache; I've been trying to following minimal example:

/cache.manifest:

CACHE MANIFEST

FALLBACK:
/html5/content.html /html5/offline.html

NETWORK:
/html5/content.html

/html5/index.html

<!DOCTYPE HTML>
<html manifest="/cache.manifest">
<body>
    <a href=/html5/content.html>content</a> 
</body>
</html>

/html5/content.html

<!DOCTYPE HTML>
<html>
<body>
    Online! :)
</body>
</html>

/html5/offline.html

<!DOCTYPE HTML>
<html manifest="/cache.manifest">
<body>
    Offline..   
</body>
</html>

Since the content.html is in the 'NETWORK' section. the fallback will never work.

The other option is to remove the 'NETWORK' section entirely. In this case the fallback works, but whenever the user visits the content.html when online, it will be cached. - When the user goes offline, the online version is still being displayed.

iow: It seems HTML5 offline cache is not suitable to differentiate between a user being online or offline.

Upvotes: 1

ggutenberg
ggutenberg

Reputation: 7370

I'm not sure how to do this by manipulating the cache manifest, but you can do it programmatically via JavaScript.

function errorCache(event) {
    // Either a download error occurred or the user is offline
    var offlineURL = 'http://myurl.com/?offline=true'
    window.location = offlineURL;
}

window.applicationCache.addEventListener("error", errorCache, false);

Also you have both / and /Home/Details/2 in your NETWORK and FALLBACK sections. This might be causing unnecessary grief.

Upvotes: 1

Related Questions