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">
Related
I'm trying to create a static webpage that is cached in the browser. However when I take down the website the browser gives a 404 error.
I'm using the manifest attribute in HTML like so.
<html manifest="manifest.appcache">
<head>
<title>Connection Verification</title>
</head>
<body>
<h3>Testing Connection...</h3>
</body>
my manifest.appcache looks like this.
CACHE MANIFEST
#Nothing to load here
I assume the top level HTML file is implied.
I am also sending the cache-control header in the response.
cache-control: public max-age:3153600
However when I bring down the webserver and reload the page it still gives a 404 error. Is there some way to force browser to cache?
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
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.
I have a webapp using offline support (a manifest file). It works correctly on Androids, iOS, RIM, and then some.
It doesn't work on TouchPad though. If I refresh the app without connectivity, I get a "No Internet Connection" error. Did anybody got a manifest file to work on TouchPads?
Here's part of my code:
My main HTML file:
<!DOCTYPE html>
<html manifest="offline/newspro.manifest">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
.
.
.
And the manifest file (sent as text/cache-manifest mime type):
CACHE MANIFEST
CACHE:
../index.html
../css/stylesheet.css
../images/logo.png
../images/progress.gif
../images/warning.png
../js/global.js
NETWORK:
*
# revision 351234
The answer to the question in the title post is "Yes" based on https://github.com/shichuan/mobile-html5-boilerplate/wiki/HTML5-Mobile-Support. TouchPad's are WebOS and WebOS supports appcache.
As for the answer to the question in the body of your post--has anyone gotten it to work?--I don't know about that, unfortunately.