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.
Related
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.
I'm trying to use caching, but I'm not sure why I'm implementing it right. When I see Page Speed tool from Google Developers, it still tells me my images are not being cached. Here's my code:
HTML:
<html lang="en" manifest="manifest.appcache">
<meta http-equiv="Cache-control" content="max-age=86400">
...
manifest.appcache:
CACHE MANIFEST
# 2015-05-27
#Static FILES
css/bootstrap.min.css
js/bootstrap.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
#Static IMGS
img/desktop_homepage.jpg
img/mobile_homepage.jpg
img/tablet_homepage.jpg
img/cargo_arrow.png
img/minus.png
img/plus.png
img/countries/at.png
img/countries/be.png
img/countries/canada.png
img/countries/ch.png
img/countries/cz.png
img/countries/de.png
img/countries/es.png
img/countries/fr.png
img/countries/gb.png
img/countries/gr.png
img/countries/hu.png
img/countries/ie.png
img/countries/it.png
img/countries/nl.png
img/countries/pt.png
img/countries/usa.png
You have to configure your server to send the images with the last-modified, max-age or etag tag.
Check this page: optimize with caching
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.
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
I'm trying to use the html5 cache to store locally office documents.
I use :
ASP.NET MVC 4 on server side
Chrome / PC and Android Browser / Galaxy Tab (Android 3.1) on client side.
Here is my (test) page (the one I was working on is a little bit complex) :
<!DOCTYPE html>
<html manifest="/HandlerManifest.ashx">
<head>
<meta name="viewport" content="width=device-width" />
<title>TestCache</title>
</head>
<body>
test1.jpg
test.docx
</body>
</html>
Here is my manifest :
CACHE MANIFEST
# v1.0.2.0 du 15/10/2012 14:57:58
CACHE:
/Data/test1.jpg
/Data/test.docx
This works fine on Chrome/Pc.
On the Galaxy Tab, I can access the jpg file, even when I m disconnected.
But when I access the docx, connected or disconnected, I have the folowing error :
Web Page not available
When I remove the manifest, everything works fine.
Do you know if I can only store some kind of files (images, css, js) on Android Web Browser ? Or if there is something wrong with what I'm doing ?