<!DOCTYPE HTML>
<html manifest="example.appcache">
<link rel="stylesheet" type="text/css" href="AppCache.css">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<p>Test to make sure css is being cached</p>
<img src="large.jpg">
<script src="AppCache.js"></script>
</body>
</html>
My example.appcache file has:
# v1 11/16/2011
AppCache.htm
AppCache.js
AppCache.css
large.jpg
The first time I navigated to the page, it asked
This website is asking to store data on your computer for offline use.
When I take Firefox offline and press refresh, the jpg disappears.
Q: What do I need to do to make sure the image is cached locally?
IIS does not serve unknown file types. You need to configure it to serve .appcache files with the MIME type text/cache-manifest, how you do this depends on which version of IIS you have:
In IIS6 use IIS manager
In IIS7 and later, you can either use IIS manager or add it in a mimeMap element in web.config
I just want to comment on the accepted answer here, as the mimetype mentioned does not work (at least in IIS7.5). The correct mimetype is:
text/cache-manifest
See:
https://developer.mozilla.org/en/Using_Application_Cache
http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline
Do not forget that you need
CACHE MANIFEST
At the top of you manifest document. It is required.
CACHE MANIFEST
# v1 11/16/2011
AppCache.htm
AppCache.js
AppCache.css
large.jpg
That should do the trick
Related
I was trying to host my css files on an cloud storage service but when I linked it to my website it was not executed,
so i created an small css which just changes background but yet it doesn't works.
It seems there is some problem with its server will you please tell me what could be the problem and how to use it as css
link of css file http://copy.com/Kgs8EaMF71Qa7zqo/style.css
HTML Code
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
https://developer.mozilla.org/en/docs/Incorrect_MIME_Type_for_CSS_Files
At least Gecko has a security feature for this: All stylesheets not from the same origin must be served with text/css.
In fact, you're file is served as text/plain, so the rules in it are ignored.
Due to security reasons MIME type of files hosted on copy.com is served as text/plain
So an normal link like of CSS file from copy.com will not work.
But if you still want to host your css files on this cloud storage service you can by adding ?download=1 after your link so you html should be like
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css?download=1" rel="stylesheet" type="text/css" />
there are several other cloud service like Dropbox,Google Drive where you can host your external CSS files.
I think, it may be due to MIME type, you uploaded assuming it will work as css file but its actual MIME type will be plain type text/plain but required MIME type to make it work as css file is text/css
So It Wont work.
This file worked perfectly for me.
here is the html code with the output.
<html>
<head>
<link href="http://copy.com/Kgs8EaMF71Qa7zqo/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
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
According to this tutorial my less code should work but it doesn't.
Can you please help me to get my less css to work.
Right now it does not working - Page loads with no applied styles. What am I doing wrong?
The error is:
FileError: 'localhost:1/styles.less' wasn't found (404) in styles.less
But it is there in the root?
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="_/script/less-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="header">test</div>
<h2>test h2</h2>
</body>
</html>
styles.less
LESS
#color: red;
#header {
color: #color;
}
h2 {
color: #color;
}
If you are using IIS you have to add a ".less" extension to MIME type within IIS manager. when you add a new MIMI, enter ".less" as the extension and "text/css" as the MIME type.
Assuming the website is hosted over iis express, Open the file
C:\Users\\Documents\IISExpress\config\applicationhost.config
and search for the tag
<staticContent lockAttributes="isDocFooterFileName">
and add the .less MIME as below
<mimeMap fileExtension=".latex" mimeType="application/x-latex" />
<mimeMap fileExtension=".less" mimeType="text/css" />
<mimeMap fileExtension=".lit" mimeType="application/x-ms-reader" />
Thanks for your help everyone - turns out the answer is that my localhost did not serve the mime type .less
I encountered this issue too.
None of the above fixes worked, however I did manage to fix it when I checked the folder access that the less.css file was stored in.
Adding the IUSR user to have read rights to the folder allowed the file to be distributed correctly.
It seems that your source location of your file is not correct.
<script src="_/script/less-1.4.1.min.js" type="text/javascript"></script>
I have never seen that "_" could be used for navigation. Actually, if the script folder is in the same directory as the html page, then
<script src="script/less-1.4.1.min.js" type="text/javascript"></script>
should be enough to have a working js file on your page.
I'm using IIS 7.5 but this can be the same for other IIS versions:
The mime type for less must be added to IIS. But in my case, I have to add it to "Default Web Site" using IIS Manager, NOT to my application, to be able to load less file from browser.
In my case I already had the mimeType for .less on ISS, so I checked the Web.config file of my web and removed the following line because it was causing a duplication:
<mimeMap fileExtension=".less" mimeType="text/css" />
I'm newbie to HTML 5 Application storage. Im trying a sample to test the offline storage. I have few questions. Please help.
Files used:
index.html
<html manifest="demo.manifest">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js" ></script>
</head>
<body>
<h1>some text</h1>
<p>Some text.</p>
</body>
</html>
style.css
body{background-color: #333;}
h1{color: #c94054;}
p{color: #fff;}
demo.manifest
CACHE MANIFEST
CACHE:
style.css
index.html
I know that demo.manifest MIME type has to be set to text/cache-manifest and this has to be done in the *.htaccess file. I'm using apache tomcat 6.0 server on a windows environment. I'm not able to find this file inside the server. So, I created one (test.htaccess) in the root directory of my project (which is being developed on eclipse helios) that is, in d:/eclipse-workspace/ProjectName/ and my file looks like below:
test.htaccess
AddType text/cache-manifest .manifest
But application cache does not work when I stop the server and tried to access it as below:
http://localhost:8081/ProjectName/index.html
Please let me know what have I done wrong with this...Also, Is there a way to debug application cache
On a Tomcat server the MIME types are configured via the default web.xml file, conf/web.xml
Towards the end of that file you'll find a bunch of defined MIME types. You have to add
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
as the equivalent of what you'd put in .htaccess as used by Apache and other servers.
I had the same problem. Everything looked right: paths were correct, the manifest was in my project and I could manually browse to it, MIME type was set. It simply wasn't attempting to get this file from my HTML. The problem was I hadn't included the required line at the beginning of the manifest:
CACHE MANIFEST
Not having this was causing the browser to just silently ignore the manifest tag.
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.