I am creating a simple admin application which have the following requirements:
If user is online, fetch latest code
Else, use cached code
Now, it appears that appcache always serves the assets from cache, regardless of online/offline connection. Why is that?
Here is my manifest file:
CACHE MANIFEST
# 102
CACHE:
/intake
SETTINGS:
prefer-online
And here is my html:
<!DOCTYPE html>
<html manifest="intake.appcache">
<head>
</head>
<body>
Something, Anything!
</body>
</html>
How can I get appcache to not cache the resources when an internet connection is available?
Chrome ignores prefer-online or at least it used to. Firefox honors it, or at least it used to. So test it with Firefox.
Generally, do not rely on prefer-online as the user agent can choose to ignore it. Think of it more as advisory than compulsory.
Related
I'm not really familiar with all the meta allowing you to manage the cache client-side so i tried to make a simple example with the HTTP header "expires"
With the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="expires" content="mon, 18 Jul 2016 1:00:00 GMT" />
<title>MY TITLE</title>
</head>
<body>
MY BODY
</body>
</html>
When i load the page for the first time (cache cleared before). the page is saved in the cache but when i update my body with "MY BODY2" and reload the page, the page displays "MY BODY 2". The browser was supposed to take the page from cache (with "MY BODY") since the expiration is in july 2016, no ?
Thank you for helping me to put some light on this problem
It depends how you reload the page.
You've basically three options:
Browse to another page and then back. This should use the cache.
Press F5 or reload but. This is an explicit reload so will check with the server if there's a new version - even if it's cached - and download it if there's a newer version.
Force reload (Ctrl+F5 in some browsers). This says ignore the cache and download from scratch (even if the cached version appears to be the same as what server will send you).
I suspect you've done option 2 and didn't realise this would check with the server and assumed it would use the cache if still valid. The reason it actually checks with the server is that a reload is often done when the user suspects the content has changed, or wants to re-download it (e.g. If page didn't render properly).
Also it should be noted that meta headers in HTML are not as good as http response headers set up by the server for various reasons including browser support reasons.
And finally it's worth opening developer tools (F12 in Chrome for example) and checking network tab to see what's going on but in that case make sure you don't have "Disable cache" ticked when it's open (it's ticked by default in Chrome as most developers don't want to use a cache when developing).
I have been trying to get my HTML5 offline cache manifest to work nicely in Safari when accessing the site with HTTPS.
I have the following setup:
index.html:
<!doctype html>
<html lang="en" dir="ltr" manifest="app.appcache">
<head>
<base href="https://www.example.com">
<link rel="stylesheet" href="//some.cdn.com/styles.css" charset="utf-8">
<script src="//some.cdn.com/app.js"></script>
</head>
<body>
</body>
</html>
app.appcache
CACHE MANIFEST
//some.cdn.com/styles.css
//some.cdn.com/app.js
NETWORK:
*
Accessing my site over HTTP works fine! Assets get loaded correctly and cached; I can use my app offline
Accessing my site over HTTPS in Chrome works fine as well
Accessing my site over HTTPS in Safari breaks :-( Assets get loaded normally, but won't cache. Debugging didn't got me any further. No useful information in the logs
According to the specs, referring to another domain in the cache manifest is allowed.
I have also tried using http:// or https:// explicitly in my HTML and manifest instead of the //-notation. Of no avail.
In my search online I've found some comments about cross-domain requests and that it isn't allowed in the cache manifest, but according to the W3C specs this is allowed (and proved by the fact that the browsers I tested it cache all the assets correctly, except for the combination https & safari.
So apparently I missed an important restriction of the appcache.
As mentioned in https://www.w3.org/TR/2011/WD-html5-20110525/offline.html:
If the manifest's is https: or another scheme intended for encrypted data transfer, then all URLs in explicit sections must have the same origin as the manifest itself.
My book says that the below code will show a message box when I close the browser, navigate to a different page or refresh the page. It does not happen ! Why?
<!DOCTYPE HTML PUBLIC="-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>Body attributes</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<head>
</head>
<body onload="window.alert('Greetings!')"
onunload="window.alert('...Goodbye')">
<h1>Loaded</h1>
Go to google!
</body>
</html>
If you could run arbitrary code for an arbitrarily long amount of time when closing the page, that could be an opportunity for abuse. I wouldn’t be surprised if older browsers supported it, but new browsers stopped supporting it for security reasons.
If you want to prompt someone whether they really want to exit the web page, you can use onbeforeunload, returning a prompt message:
<body onbeforeunload="return 'I\'ll miss you!';">
Browsers have imposed limitations on what may be executed in an unload event handler. IE 11 still lets you open a new window there, but Chrome and Firefox don’t; they ignore your call to window.alert there. Chrome describes this in the console log: “Blocked alert('...Goodbye') during unload.” This means that there is not much you can do in an unload event handler, even though the event is still created and can be handled.
Instead, you can handle the unbeforeunload event, which is created before the actual unload starts. This event, implemented first in IE 4 and then copied by other browser vendors, has now been defined in the HTML5 spec, clause 5.6.11 Unloading documents. Using it, you still cannot create windows as you like, but browsers show a dialog to the user. The dialog is created by the browser, in a browser-specific manner. You can try to inject your own message into it by making your event handler return it as value, but Firefox intentionally ignores such requests.
<body onload="window.alert('Greetings!')"
onbeforeunload="return '...Goodbye'">
<h1>Loaded</h1>
Go to google!
I study JavaScript and Html 5 online and execute the codes I've learned on localhost. Recently I learned manifest attribute in html tag which is a new feature in Html 5. Then I made my own .appcache file and the problem started. Even though I'm connected to internet, the cache that's stored in my computer is being used. Here is the index.php file(But no php in code):
<html manifest="./cevrimdisi.appcache">
<head>
<meta charset="UTF-8">
<title>BAŞLIK</title>
</head>
<body>
<font id="demo">Kutay</font>
<script>
document.getElementById("demo").style.color="blue";
</script>
</body>
</html>
cevrimdisi.appcache:
CACHE MANIFEST
# 09/09/2013
CACHE:
index.php
FALLBACK:
cevrimdisi.html
NETWORK:
*
.htaccess
AddType text/cache-manifest .appcache
The cache will be used even if the browser has internet connection. There's only three ways to update the cache
The user clears their browser's data storage for your site.
The manifest file is modified. Note: updating a file listed in the manifest doesn't mean the browser will re-cache that resource. The manifest file itself must be altered.
The app cache is programatically updated.
More info here
http://www.html5rocks.com/en/tutorials/appcache/beginner/#toc-updating-cache
Im using HTML5 offline storage
My Index.html page
<!DOCTYPE html>
<html lang="en" manifest="/offline-cache.manifest">
<head>
<meta charset="utf-8">
<title>HTML5 offline code demo</title>
</head>
<body>
<div id="content">
<img src="http://increaserss.com/wp-content/uploads/flickr-rss.jpg" alt="img to be cached" />
</div>
</body>
</html>
offline-cache.manifest file
CACHE MANIFEST
#just want to cache that remote image only
http://increaserss.com/wp-content/uploads/flickr-rss.jpg
My htaccess
RewriteEngine On
AddType text/cache-manifest .manifest
After loading the page for the first time with internet and then disabled the internet and trying to access this index.html ,caching works fine but again if i hit f5 the image is not shown (only alt text is there) and when i click on the url bar and hit enter (as if were a new request) it is working fine...any way to sustain cache for a page refresh(f5) ?
I would first validate if you can pull assets that are not on your server and then cache them? I am thinking you might be blurring the lines between browser caching and HTML 5 application caching?
I would also make sure you are not using Internet Explorer as it doesn't support offline Caching.
The Cache manifest should also include a version # after the CACHE MANIFEST header (ex. # version 1.4) and the cached files should be under the CACHE: header. For example.
CACHE MANIFEST
# version 1.4
CACHE:
images/flickr-rss.jpg
Please let us know how you made out.
You are using a full URL, is the image not on the same server? If so, that could prevent it from getting cached. If you're using Chrome it reports the cache events to the console.