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>
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:
Asks the server for the manifest file.
If the manifest file hasn't changed, it serves the local files.
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.
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 ?.
Related
I have a very simple HTML/CSS/JS website. When ever I make changes to it, to see the updated version I have to manually clear my cache on mobile or hard reload on PC.
Is there a way of clearing cache for your site on users browsers? I have had a look around but I seem to only find of instances of clearing server cache and libraries that I don't know have to use yet. Many thanks in advance for your help!
Browsers will cache:
the html files
the JS files
the CSS files
It's probably best to do this on the server side, but you can first try doing it on the client side as described below.
To make sure the latest html file is used, you could try adding this within the <head> of your html files:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
To make sure the latest version of "mycode.js" is used, append a new value to the file (e.g. the timestamp it was last edited):
<script src="mycode.js?v=123456789"></script>
Same thing to make sure the latest "mystyle.css" file is used:
<link rel="stylesheet" type="text/css" href="mystyle.css?v=123456789">
I've seen websites like YouTube and Gmail load fast. I know that Gmail is a Single Page App but YouTube is not, Is there a way to make a website that is not a SPA that can load this fast?
NOTE: I am using a static site
Here prefetching is done like this:
<link rel="prefetch" href="/your/webpage/link.html">
Place the above in the header of your page for each page you want to prefetch.
Your question is not clearly. You are must be focus what is your problem? Or what is your concern? Etc... Because to talking about page load faster, it is not mean SPA is faster to other technology. Its depending by your technical, system, application, networks, database, etc... A tons issue to reference to performance of the pages. Maybe security is impact to performance, hard disk of sever to slow to serve the service, workloads of framework, etc...
This post is pretty old now. I understand you need to use "hashtag urls" instead of direct ones. Direct ones can be shown as the address with history.pushState.
MDN:
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
https://developer.mozilla.org/en-US/docs/Glossary/SPA
Example of a SPA App
<!DOCTYPE html>
<html lang="en">
<head>
<script>
if (document.location.href == 'https://example.com/#page'){
history.pushState('', '', "https://example.com/page")
document.querySelector("body").
}
// use 301 redirects to make sure the /page url (without hashtag) goes to the one with a hashtag.
</script>
</head>
<body>
</body>
</html>
I'm trying to use prefetching (via a link with rel="prefetch") for a JavaScript resource in an html page. In Chrome, I see the prefetch request get kicked off with a "Type" of "javascript". If I subsequently try and fetch the same JavaScript resource by inserting a script tag into the page, I'd expect this to be fetched from the browser cache, rather than a new request being fired off to fetch the resource from the CDN. However, this is not the case. I see a new request being made with the "Type" of "script". I'm assuming that the issue is related to the mismatch in type between this request and the prefetch request.
Is there a way to force the prefetch request to use a type of script or some other way to avoid the JavaScript file being fetched again?
I've tried using an "as" attribute value of "script", but that seems to have no effect.
I'm aware that rel="preload" is an alternative option. This works, but the usual advice seems to be that preloading is only appropriate for resources you're about to use and prefetching is a better choice for resources you will use after navigating elsewhere in your web page. Chrome also warns if you use preload and don't use the resource within a few seconds.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<link rel="prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-cookies.js" />
<script type="text/javascript">
setTimeout(function() {
const scriptElement = document.createElement("script");
scriptElement.src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-cookies.js";
document.head.appendChild(scriptElement);
}, 2000);
</script>
</head>
<body>
</body>
</html>
See above for example repro code. I'd expect the script tag inside the setTimeout to use the already fetched resource, but instead I see a new request being fired off.
I figured this one out, finally. You're likely seeing this happen because Disable Cache is on in Chrome dev tools: Disabling Chrome cache for website development
This doesn't just disable previously-cached assets – it also means that something like this would download an asset twice:
<script src="foo.js">
<script src="foo.js">
With that checkbox unchecked, you should successfully see your asset getting cached:
That all being said, it is very important to note that in my testing, Chrome is not smart enough to realize that a prefetch and a regular download for the same resource is happening at the same time – it won't attempt to cache one for the other. So if your prefetching takes longer than your setTimeout millisecond value, you will see duplicate downloads!
This is certainly because what you and I are doing here is in some ways an abuse of prefetching. It's supposed to be a way to download resources used for the next navigation. C'est la vie!
Is there a way to force the prefetch request to use a type of script or some other way to avoid the JavaScript file being fetched again?
I've tried using an "as" attribute value of "script", but that seems to have no effect.
Just as a final note, the type differences of script and javascript are to be expected. This is Dev Tools trying to tell you that one of the files is going to be executed and the other is merely getting downloaded.
I am having two JSP files in my main application whereas one is MAIN.jsp and another one is CSS & JS import.jsp file.
MAIN.jsp is the main page of main application.The import.jsp file will import the CSS and JS of partner application in MAIN.jsp file which is used for support the few functionality with main application as partner.
But all the application (Main and Partner) are deployed in same server. So basically the host name of both the application will not change but context root alone will get change.
i have used jsp import tag to import the import.jsp in MAIN.jsp like mentioned below code.
MAIN.jsp
<html>
<head>
<c:import url="resourceImport/import.jsp">
</head>
<body>
</body>
</html>
import.jsp
<html>
<head>
<link url="http://hostName/DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="http://hostName/DifferentContext/sample.js" > </script>
</head>
<body>
</body>
</html>
Currently i have hard coded the partner HTTP URL in import.jsp for load all the resource in MAIN.jsp file. But moving forward we are planing to run the application in HTTP and HTTPS environment.
So how can i make it dynamic way of getting protocol in import.jsp file. I have tried following methods to get the protocol dynamically but its not working.
Method 1:
Removing Protocol and make it relative URL
<head>
<link url="//hostName/DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="//hostName/DifferentContext/sample.js" > </script>
</head>
Method 2
Removing Protocol and Host name and make it relative URL
<head>
<link url="//DifferentContext/example.css" rel="stylesheet" type="test/css">
<script type="text/javascript" src="//DifferentContext/sample.js" > </script>
</head>
So could you please anyone help me to get resolve this issue.
If there is anything that makes it worth to use https (and these days there is), I'd opt for less hassle and just go https everywhere.
No more worries, no accidental information leak and protocol change. Easier maintenance and no later update will inadvertently bring back a wrong protocol link.
Check HSTS as an option to force compliant browsers to not bother with any http connection attempt in the future.
That being said, relative links are another way to stay in the same protocol and probably beneficial: You rarely want to hard code domain names into your applications - Depending on the programming style that you're using in your app, you might want to use page-relative links (../DifferentContext/example.css) or server-relative (/DifferentContext/example.css). Protocol relative is fine as well, but hardcodes the domain name.
Yet another option is to make that location completely configurable. This way you can decide later (provided that you've changed all occurrences to the configured value): ${config.theOtherAppBaseUrl}/example.css. With this, you can try out all the different options yourself and within 10 minutes. And change your mind later, when you come to the conclusion that it's worth to go https everywhere.
(Note: You have an issue in your question's code: The last link refers to //DifferentContext...., which would assume that DifferentContext is a hostname - this is a protocol relative URL)
I have a simple website created using JavaScript and jQuery. The website contains 4 web pages and is hosted on a web server. The issue is I want to be able to navigate through these 4 pages when I don't have access to the server (no wifi or otherwise). The way I'm linking the pages (if that has an effect) is using
window.location.href="page1.html";
the click function for one of the buttons on the home page is as so
$("#btnOne").click(function() {
window.location.href="page1.html";
return false;
});
I thought of using post but on the jQuery website it says "Pages fetched with POST are never cached"
Is there an effective way to accomplish what I want; having the pages cached into the browser so its available to use offline?
CACHE MANIFEST
# 01-AUG-13 215
CACHE:
css/stylesheet.css
css/custom-theme/jquery.mobile-1.3.2.min.css
home.html
page1.html
page2.html
js/jquery-1.9.1.min.js
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
</head>
Sounds like what you want is the HTML5 appcache:
<html manifest="example.appcache">
...
</html>
Which lets you specify a manifest for your site and dictate what pages should be cached etc.
In the manifest file you indicate what resources you want to be cached...
CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png
# Use from network if available
NETWORK:
network.html
# Fallback content
FALLBACK:
/ fallback.html
There's some great detailed information over on HTML5 Rocks as well as some technical gotchas you might run into.
Save the four html files and any required "resource" (javascript, css, images, etc) files on your local machine. When you want to use your site off line, open the landing page on your local. Most operating systems, when you open (click on) and html file will run your default browser and render that page. Links will be followed to the additional pages. This works for sites that are static (eg. html) on the server side. They can be dynamic on the browser side.