HTML5 offline data storage

StackOverflow https://stackoverflow.com/questions/9296189

Question

Im using HTML5 offline storage

My Index.html page

<!DOCTYPE html>
<html lang="en" manifest="/offline-cache.manifest">

<head>
    <meta charset="utf-8">
    <title>HTML5 offline code demo</title>  
</head>
<body>
       <div id="content">
        <img src="http://increaserss.com/wp-content/uploads/flickr-rss.jpg" alt="img to be cached" />
       </div>

</body>
</html>

offline-cache.manifest file

CACHE MANIFEST
#just want to cache that remote image only
http://increaserss.com/wp-content/uploads/flickr-rss.jpg

My htaccess

RewriteEngine On
AddType text/cache-manifest .manifest

After loading the page for the first time with internet and then disabled the internet and trying to access this index.html ,caching works fine but again if i hit f5 the image is not shown (only alt text is there) and when i click on the url bar and hit enter (as if were a new request) it is working fine...any way to sustain cache for a page refresh(f5) ?

Was it helpful?

Solution

I would first validate if you can pull assets that are not on your server and then cache them? I am thinking you might be blurring the lines between browser caching and HTML 5 application caching?

I would also make sure you are not using Internet Explorer as it doesn't support offline Caching.

The Cache manifest should also include a version # after the CACHE MANIFEST header (ex. # version 1.4) and the cached files should be under the CACHE: header. For example. 

CACHE MANIFEST
# version 1.4

CACHE:
images/flickr-rss.jpg

Please let us know how you made out.

OTHER TIPS

You are using a full URL, is the image not on the same server? If so, that could prevent it from getting cached. If you're using Chrome it reports the cache events to the console.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top