Clever Geek Handbook

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

I have found many explanations regarding caching, some of them even have examples, but it is rather hazy to understand this and how to use it. I tried to use it many times but I failed (I want to improve the speed, I only want the download to be downloaded from the server). You can help me make this page below cached in the browser. If possible, can you give me an explanation or some other way on how to do this (it could be JS too!)?

PS: It might be Appcache if you give me a suitable example for this page;).

Thanks in advance.

My Appcache file name is 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>
Run codeHide result


+3


source to share


2 answers


Revise with AppCache

. Using this does not necessarily mean that your site will be offline. Basically, these are the steps that AppCache takes, regardless of the browser connection state:

  • asks the server for a manifest file.
  • If the manifest file has not changed, it serves for local files.
  • If the manifest file changes, it downloads the new files, saves them, and then serves them up.

Since you mention that

I want to improve the speed, I only want to download from the server

AppCache

- this is absolutely the right decision.

EDIT: A quick example of using AppCache:



At the beginning of the 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 a "manifest" in the tag. Then the example.appcache file will look like this:

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 any static content your site uses.

You can also put a version number or date in your manifest file to ensure browsers receive new content as needed.

+5


source


Caching is used to avoid reloading files that are reused (across multiple pages or multiple sessions), but are mostly files that are categorized as "assets" (CSS, javascript, images, etc.) and which, is expected to remain frozen. However, the content of the webpage (HTML) is NOT expected to remain frozen (e.g. search results, etc.) and is usually reasonably sized, so there is no real reason to cache it (who still has a 56 thousand?).

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



Now, if you really want to "cache" HTML, it is exactly the same as for the standalone version, so why not Appcache ?.

+1


source






More articles:


All Articles