CODEWITHSUNDEEP
javascripthtmlcaching
Kyle
Kyle

Reputation: 1578

How can I cache my website in the user's browser?

I've found many explanations about caching, some of them even have examples but, it is kind of foggy to understand it and how to use it. I've tried to use it many times, but I've failed (I want to improve speed, I want only the necessary to be loaded from the server). Can you help me to make this page below be saved in the browser's cache, If possible give me an explanation or a different way on how to do it (it can be JS too!)?

P.S.: It can be Appcache if you give me a suitable example for this page ;).

Thanks in advance.

My Appcache file's name: offline.appcache.

CACHE MANIFEST

/style.css http://sistema.agrosys.com.br/sistema/labs/CSS_HTML/html1.html

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

<head>
  <meta name="viewport" content="width=device-width" />
  <title>page1</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div class="testing_class">Test</div>
  <div class="testing_clas">Test</div>
  <div class="testing_cla">Test</div>
  <div class="testing_cl">Test</div>
  <div class="testing_c">Test</div>
  <div class="testing_">Test</div>

</body>

</html>

Upvotes: 4

Views: 2029

Answers (2)

davguij
davguij

Reputation: 888

Reconsider using AppCache. Using it doesn't necessarily imply that your site will work offline. Basically, here are the steps that AppCache takes, regardless of the browser connection status:

  1. Asks the server for the manifest file.
  2. If the manifest file hasn't changed, it serves the local files.
  3. If the manifest file has changed, it downloads the new files, saves them and then serves them.

Since you mention that

I want to improve speed, I want only the necessary to be loaded from the server

AppCache is a perfectly valid solution.

EDIT: A quick example of using AppCache:

In the beginning of your original HTML:

<!DOCTYPE html>
<!--[if lte IE 9]>
<style>.scrollingtable > div > div > table {margin-right: 17px;}</style>
<![endif]-->
<html manifest="example.appcache">
    <head>

You just need the "manifest" in the tag. Then, the example.appcache file would be:

CACHE MANIFEST

CACHE:
http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css
http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.11.4/jquery-ui.js

NETWORK:
*
http://*
https://*

Just include in the CACHE section whatever static content your site uses.

You can also put a version number or date in the manifest file to make sure the browsers gets the new content when needed.

Upvotes: 5

Cyril Duchon-Doris
Cyril Duchon-Doris

Reputation: 14039

Caching is used to avoid redownloading files that are reused very often (across several pages or several sessions), but it targets mainly those files that fall under the category of "assets" (CSS, javascript, images, etc.), and which are expected to remain frozen. However, the content of webpage (the HTML) is NOT expected to remain frozen (eg. search results, etc.), and is usually reasonable in size, so there's no real reason to bother caching it (who still has a 56k connection really ?).

Then, there is the case of HTML "static pages", but usually those pages contain only text, and text is very light (unless you have a full book) compared to other media, so most people don't bother about it.

Now if you really want to "cache" the HTML, well it's exactly the same as keeping an offline version, so why not Appcache ?.

Upvotes: 1

Related Questions