HTML : App Cache

With app cache it is easy to make an offline version of a web application, by creating a cache manifest file.

What is App Cache?

HTML5 introduces application cache, which means that a web application is cached, and accessible without an int…


This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav

With app cache it is easy to make an offline version of a web application, by creating a cache manifest file.

What is App Cache?

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

Advantages:

  • Offline browsing - users can use the application when they're offline
  • Speed - cached resources load faster
  • Reduced server load - the browser will only download updated/changed resources from the server

How to enable app cache?

To enable application cache, include the manifest attribute in the document's tag:

<!DOCTYPE HTML>
<html manifest="index.appcache">
...
</html>

Basic Example of HTML5 cache

This is our index.html file -

<!DOCTYPE html>
<html manifest="index.appcache">
<body>
 <p>Content</p>
</body>
</html>

then we will create index.appcache file with below codes

CACHE MANIFEST
index.html

write those files that you want to be cached load index.html then go for offline mode and reload the tab.

Note: The two files must be in the same folder in this example.

More details can be found at - https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Unfortunately this feature is in progress of being deprecated so please do not use for your upcoming projects

Buy Me A Coffee

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.


This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav


Print Share Comment Cite Upload Translate Updates
APA

Rajesh Kumar Yadav | Sciencx (2021-05-12T08:00:51+00:00) HTML : App Cache. Retrieved from https://www.scien.cx/2021/05/12/html-app-cache/

MLA
" » HTML : App Cache." Rajesh Kumar Yadav | Sciencx - Wednesday May 12, 2021, https://www.scien.cx/2021/05/12/html-app-cache/
HARVARD
Rajesh Kumar Yadav | Sciencx Wednesday May 12, 2021 » HTML : App Cache., viewed ,<https://www.scien.cx/2021/05/12/html-app-cache/>
VANCOUVER
Rajesh Kumar Yadav | Sciencx - » HTML : App Cache. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/12/html-app-cache/
CHICAGO
" » HTML : App Cache." Rajesh Kumar Yadav | Sciencx - Accessed . https://www.scien.cx/2021/05/12/html-app-cache/
IEEE
" » HTML : App Cache." Rajesh Kumar Yadav | Sciencx [Online]. Available: https://www.scien.cx/2021/05/12/html-app-cache/. [Accessed: ]
rf:citation
» HTML : App Cache | Rajesh Kumar Yadav | Sciencx | https://www.scien.cx/2021/05/12/html-app-cache/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.