Offline Sites in HTML5


/ Published in: HTML
Save to your folder(s)

The link has a full explanation with more detail about how this all works, as well as an example of it in action. This is just going to be the short-short version. If you have any questions check that out, if you still have questions then leave a comment and I'll help you as best I can.

First we need to define a cache manifest, to do that you simple need to add a cache manifest item to your initial HTML tag. The proper extensions is .appcache, check the first section of the source to see an example.

Then, if the server isn't set up to support the .appcache file we need to add a line to out .htaccess file, this is important because it must be servered with the proper header. See the second section for the line to add to the htaccess file.

The we need to add the files to be cached to the appcache, there is a more complete example at the link, this is just the basic format. It's in the third section below.

If you have any questions or problems implementing leave a comment and I'll help you if I can.


Copy this code and paste it in your HTML
  1. <!-- The manifest added to the opening html tag -->
  2. <html lang="en" manifest="cache.appcache">
  3.  
  4.  
  5. <!-- The line to add to the htaccess file -->
  6. AddType text/cache-manifest .appcache
  7.  
  8. <!-- The contents of the cache.appcache file -->
  9. CACHE MANIFEST
  10.  
  11. NETWORK:
  12. http://*
  13.  
  14. CACHE:
  15. # list of every file to cache
  16. index.html
  17. otherpage.html
  18. images/image1.jpg
  19. images/image2.jps
  20. # note that you can't like to remote ssl served files like this one except in chrome
  21. https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
  22.  
  23. FALLBACK:
  24. # link of fallback files, in the format "original fallback"
  25. otherpage.html offline.html
  26. # for a catch all, use a simple slash like this
  27. / offline.html

URL: http://fatfolderdesign.com/295/html5/making-offline-sitesapplications

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.