4

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>
Kyle
  • 1,568
  • 2
  • 20
  • 46

2 Answers2

5

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.

Dave Alperovich
  • 32,320
  • 8
  • 79
  • 101
davguij
  • 808
  • 7
  • 12
  • I've tried Appcache, I created the manifest file and all that, but I didn't work, so I tried something easier like caching, but I can't do it :( +1 for you by the way :) – Kyle Jun 16 '15 at 13:28
  • Can you edit your question and give me a suitable example for my page using Appcache, I will mark it as the answer :) – Kyle Jun 16 '15 at 13:29
  • In my experience, AppCache is by far the easier way of implementing caching. Why didn't it work exactly? – davguij Jun 16 '15 at 13:29
  • I created that manifest file, I put it in the same folder (in the server) as the html page and the stylesheet, and then used that 'thing' in the HTML tag – Kyle Jun 16 '15 at 13:31
  • I updated my answer to include an example as per your original question. – davguij Jun 16 '15 at 13:53
  • Thank you :), so I just need to put the manifest file with my html and it's done? – Kyle Jun 16 '15 at 13:54
  • Should work that way, yep :) If you're using Chrome, open up the console when loading the site and you will see what's going on with the AppCache. – davguij Jun 16 '15 at 13:57
1

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

Cyril Duchon-Doris
  • 12,964
  • 9
  • 77
  • 164
  • I was afraid of using appcache, because I used it and failed (it didn't work), could your edit and give me a suitable example for my page? – Kyle Jun 16 '15 at 13:37
  • Could you update your question with the manifest and the HTML with AppCache you mentionned in a comment of another answer ? – Cyril Duchon-Doris Jun 16 '15 at 13:43