I'm trying to get HTML5 offline storage working in a basic way. this is my html file
<html manifest="12thPayment.appcache" lang="en" ng-app="mainApp">
this is the 12thPayment.appcache file
CACHE MANIFEST
https://cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.1.8/svg-morpheus.js
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js
PAYMENTS.html
../../js/jquery-2.1.4.min.js
../../bower_components/angular/angular.min.js
../../bower_components/angular-animate/angular-animate.js
../../bower_components/angular-aria/angular-aria.js
../../bower_components/angular-material/angular-material.js
../../uimicrokernel/uimicrokernel.js
../../js/directivelibrary.js
../../js/12thdirective.js
js/controllers/paymentModule.js
js/controllers/configPayment.js
js/controllers/paymentService.js
js/controllers/paymentAdd.js
js/controllers/paymentUpload.js
js/controllers/paymentView.js
js/controllers/paymentSingleView.js
NETWORK:
*
when i run the file online chrome console says manifest file is created but in the offline it does't work. do i need to add the text/cache-manifest. then where do i need to add it
To enable AppCache on Apache server, add the following to .htaccess:
AddType text/cache-manifest .appcache
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 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 make a web-app viewable when offline.
My index.html references the manifest like so: <!DOCTYPE html manifest="manifest.appcache">
The MIME type is correct: my .htaccess has AddType text/cache-manifest .appcache
This is what manifest.appcache looks like:
CACHE MANIFEST
# 2012-09-28:v1
CACHE:
style.css
images/logo.png
However, nothing is cached.
When I call applicationCache.status in a javascript console, it returns 0 (I think it should return 1 if successful). In Chrome, viewing chrome://appcache-internals/ also reveals that there are no application caches.
What am I doing wrong?
Well, that was stupid. Here's what I was doing wrong:
<!DOCTYPE html manifest="manifest.appcache">
Should've been:
<!DOCTYPE html>
<html manifest="manifest.appcache">
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.