HTML5, built in offline cache

So you have a website, and you want to make sure that the users are caching your images on their computes while browsing your site?
This way you will spend less resources server side if you have many visitors, if they refresh their page they will get the store website and images on their local computer instead of asking for a new transfer.

store this as a html file, ex “index.html”

<!DOCTYPE html>
<html manifest="rule.manifest">
<body>
   <header>My first cachepage</header>
   <img src="image.jpg" alt="image">
</body>
</html>

store this in a text file as “rule.manifest”

CACHE MANIFEST
1.jpg

You are now telling the client to store both the html file, as that is default and the actual image. If you are adding more pages to your site, or images, you can make sure they store this as well by updating the .manifest file.

Let’s say you add images, 2.jpg, 3.jpg and links.html, all you need to do is:

CACHE MANIFEST
1.jpg
2.jpg
3.jpg
links.html
index.html

Notice that you will need to add index.html in case the user presses links.html. Also <head> section in Links.html will need to be appended the
<html manifest=”rule.manifest”>.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s