HTML5 Load page from offline cache only when not online

Question

I am attempting to make a webpage available offline.

I have added <html lang="en" manifest="cache.manifest"> to my page.

I have created cache.manifest with the following content:

CACHE MANIFEST
css/base.css
http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
http://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.woff
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
css/affixed-sidebar.css
css/bootstrap.css
css/components.css
css/dodfont.css
css/helpers.css
http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
http://www.parsecdn.com/js/parse-1.3.0.min.js
http://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.1/toastr.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js
http://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js
http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js
http://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=js&skin=sunburst
js/components.js
js/so-cat.js
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0
fonts/glyphicons-halflings-regular.woff
http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0
fonts/glyphicons-halflings-regular.ttf
http://fonts.googleapis.com/css?family=Raleway:400,200
http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
fonts/glyphicons-halflings-regular.woff2
fonts/glyphicons-halflings-regular.woff2
fonts/glyphicons-halflings-regular.woff
fonts/glyphicons-halflings-regular.ttf

When I first visit the page in chrome, the browser will deliver the page and cache the page and all of the resources.

I expect that when I leave the page and come back, I will be served the live version of the page and I will only ever see the cached version if the server is not available.

Instead, on every visit after the first, I am served the cached version of the page. I can confirm I am seeing the cached version because, if I change the html file and refresh the webpage, I do not see the changes. If I clear or disable the cache and refresh, I see the changes as expected.

What do I need to do to ensure that, if the server is reachable, I am always served the live version of the page and all of its resources?

Blindly, I would say that cache is always preferred by browser. Maybe in your case, another way of storing should be used... — Kaiido
@Kaiido , Is there another way to display a page offline? Storing the files directly on the local machine is not a viable solution. — Wesley Smith
Hum, I thought about indexDB, but you're right it may not be viable for so much data. Maybe a javascript call to random url var (url+?+Math.random()) could be a way to always update it, don't know how it will act if the server is unreachable though — Kaiido

sideshowbarker sideshowbarker · Accepted Answer · 2015-09-24T22:16:25

What do I need to do to ensure that, if the server is reachable, I am always served the live version of the page and all of its resources?

Unfortunately, the simple answer here is: You can’t. For real. That is, at least not if you’re using a cache manifest. This a well-known serious design bug in the HTML5 appcache/offline-cache mechanism. It’s essentially broken by design.

And that's why using appcache is basically no longer recommended. It's just too broken.

And that's why the Offline Web applications section of the HTML Standard now says this:

This feature is in the process of being removed from the Web platform. (This is a long process that takes many years.) Using any of the offline Web application features at this time is highly discouraged. Use service workers instead.

The only way to work around it and make clients quit using the cached contents is: completely remove your cache.manifest file from the server.

Do that and they’ll go back to fetching the current content.

The good news is that there’s a much better solution for offline Web applications in the works: Service Worker—more specifically, the Service Worker Cache and CacheStorage interfaces.

HTML5 Load page from offline cache only when not online

2 Answers