Search code examples
html.htaccessoffline-cachingoffline-browsing

HTML5 offline data storage

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) ?

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.