how to configure a manifest file - html

This is my first time in stackoverflow so if i break any rule or something, please tell me and ill try to fix it asap.
Im trying to configure a manifest (appcache) file to download 2 files( one html and one JS) and be able to use that HTML in offline mode, but after many trys, i couldnt configure the manifest file (or maybe is something else fail?) to store the appcache files.
At the moment i have in the same folder, 3 files: juego.html , damas.appcache and juego.js
damas.appcache:
CACHE MANIFEST
CACHE:
juego.html
juego.js
NETWORK:
*
and in the html file...
juego.html:
<!DOCTYPE html>
<html manifest="damas.appcache">
...
I dont think that more HTML code or the javascript code is needed for my explanation but if needed, ill put it.
¿How can i got the files to be stored in local?
Thanks to all

It's possible that you have an older version of the html cached. This seems to be the case because your setup looks correct, but you are missing a unique value—such as a timestamp—in your damas.appcache. The cache manifest only gets updated when there is a change to that file.
It's also possible that your mime-type is incorrect. Ensure that the mime-type set for the cache manifest is set to text/cache-manifest.
Apache:
AddType text/cache-manifest .appcache
References:
See Cache manifest on my website: http://pygeek.com
See A Beginner's Guide to Using the Application Cache: http://www.html5rocks.com/en/tutorials/appcache/beginner/

Related

Appcache not working

I have a small webapp and I am working on appcache (offline caching) feature of HTML5.
following is my Manifest file code:
File name: Manifest1.appcache
CACHE MANIFEST
#21/02/14
CACHE:
Login.htm
.........
and in my Login.htm I just have simple text to display and I have manifest="Manifest1.appcache" in html opening tag.
I have deployed this on IIS and it works fine while IIS is on, when I stop IIS I can access this page once and then i get 404. It fires (Application Cache Obsolete event). I have no clue why, please help.
not sure if this is it. But I had trouble with my manifest file and it came down to a couple file names spelled incorrectly. Have you tried validating the manifest file to make sure all files are spelled correctly?
Here's a good tool for this: http://manifest-validator.com/validate Put in the url to the cache manifest i.e. something like http://www.yoursite.com/manifest.appcache
I made a few mistakes where I accidentally didn't include the folder in the path to the image. This tool worked well to find those mistakes. Also, if you're using Grunt, there is a grunt task called grunt manifest that will auto build the manifest file to avoid spelling mistakes and so on. https://github.com/gunta/grunt-manifest
The obsolete event fires whenever the device is online (or at least if it seems that way to the browser) but the manifest file cannot be retrieved. So, shutting down the server does not simulate being offline properly, because the browser still thinks that it's online (which it is), but it can't retrieve the manifest file, which, to the browser, is the same as if you had deleted the manifest, so shutting down the server isn't how you should be testing this. The best way to simulate being offline is...being offline! Turn off wifi on your device, and then all should work well.
Also make sure that your server is configured to serve .appcache files with the text/cache-manifest MIME type, some browsers require that.

HTML5 use cache only when offline

I started to use HTML5 cache to view a simple HTML page with one css file and two js files.
My problem is that the cache is used whether I'm offline or not. But I just want to use the cache when I'm offline.
Does anyone know how to solve this?
index.html file manifest:
<html manifest="app.cache">
app.cache manifest file:
CACHE MANIFEST
/index.html
/css/style.css
/js/jquery-1.7.1.min.js
/js/functions.min.js
Thank you!
According to the standard as given at whatwg, this is possible by changing the cache mode from the default fast to the prefer-online state. There, the instructions given are to add the following at the end of your appcache manifest, after listing all the files you need available offline:
SETTINGS:
prefer-online
NETWORK:
*
Apparently the idea behind this is to allow adding basic offline support to "legacy" applications that cannot help having to change the html document everytime it is served. I have not verified that this works in any current browser.
manifest="app.cache" - not going to solve your problem. It caches all the file listed in manifest file. You have to save your data in local storage or in local db and have to retrieve data from server/local based on connection status [online/offline].

HTML5 Offline Appcache Updates Not Showing In Firefox

I have an index.php file in my docroot. It produces output that starts with this:
<!DOCTYPE html>
<html manifest="manifest.appcache">
The manifest.appcache tells browsers to cache it for offline use. Again, the relevant parts:
CACHE MANIFEST
#version 8-25-2011
CACHE:
#internal HTML documents
#this tells the browser to cache the HTML it retrieves from http://example.com/
/
NETWORK:
*
Offline access is working fine with this setup, but updating is not working as I would expect in Firefox.
In Chrome and Safari, when I update the index.php file and then change a comment in the cache.manifest file, the browsers will grab the new index.php output and use that in the cache.
However, in Firefox, it seems to not care that I've updated the manifest.appcache file. I suspect that if I wait long enough, it will update, but I've tried waiting hours.
How can I find and eliminate my caching problem?
What HTTP cache headers are you sending with your index.php file? If you've not set things like the Cache-control: and Expires: headers then Firefox could be refreshing the application cache version of the page from it's regular cache instead of requesting it again from the server.
EDIT BY POSTER OF THE QUESTION:
For anyone that wants to know what exactly it took, here's what I put in my .htaccess file based on this answer and a perusal of http://www.diveintohtml5.info/offline.html:
<Files *.appcache>
ExpiresActive On
ExpiresDefault "access"
</Files>
Hope that helps the next person!
I know I'm really late to the party but I've been seeing this issue in Firefox for years and was hoping that the underlying bug would be fixed.
Unfortunately that hasn't happened but I've finally come up with a workaround. In my case, whilst the new .appcache file is loaded and processed, a page reload does not cause the newly cached versions to be used. The process I'm using goes as follows:
index.html is loaded and specifies the .appcache file in the html tag.
The .appcache file is generated dynamically using a PHP script. The script hashes all included files to create a unique version hash, which is included in the manifest. This means a change in any files listed in the manifest forces a cache reload.
My .htaccess file has the following to prevent the .appcache manifest from being cached:
<Files *.appcache>
ExpiresActive On
ExpiresDefault "access plus 0 seconds"
</Files>
My Javascript code detects the appcache update and reloads the page once the updated files have been fetched:
appCache.addEventListener('updateready', function(e) {
console.log("Appcache update finished, reloading...");
setLoadingBar(100, "Loading...");
appCache.swapCache();
location.reload();
});
Once the page reloads, the old cache is still used in Firefox until the cache is manually cleared by the user. In all other browsers I've tested, the newly cached files take immediate affect.
The fix turned out to be painfully simple!
All that was needed was to change the location.reload() line to include the true parameter:
location.reload(true)
This seems to indicate that Firefox serves the files from it's normal cache rather than using the appcache stored files, even when the appcache'd files are newer. I'm guessing this is because Firefox puts the normal caching mechanism in front of appcache like so:
Request -> Normal cache -> Appcache -> Network request
But that's just a guess.

HTML5 Offline Storage - Cache manifest networking

I am trying to write the manifest file but I am having weird problem in FF5, its caching all despite saying to don't do so. My manifest file looks like:
CACHE MANIFEST
NETWORK:
*
any ideas?
http://www.html5rocks.com/en/tutorials/appcache/beginner/
this says if you reference the manifest file in html files as manifest attributes then it will be cached even if its not listed in manifest file.
I did a presentation about offline and local storage not long ago.
Video available here: http://www.youtube.com/watch?v=AWCk6FZMpcU
It's a bit complicated. I had to read Dive Into HTML5 multiple times and then experiment a lot to get things working.
I have an example PHP manifest "build" script here: https://github.com/JasonHanley/note5/blob/master/build.php
It seems you don't have anything set to cache, why would you need a cache manifest file if this is the case? If you are trying to cache some things I would try properly defining them under CACHE: and see if it then cache's the appropriate assets.

Setting the .htaccess MIME type to text/cache-manifest in XAMPP to view websites offline in HTML5

I've seen pretty much all the tutorials in the web about how to make your site viewable offline using the cache manifest and they all say something like this:
A manifest file must be served with the mime-type text/cache-manifest.
You may need to add a custom file type to your web server or .htaccess
configuration.
But when I look at my XAMPP directory, there aren't any files named ".htaccess" in my xampp/htdocs folder. I did a search under the xampp/ directory and there's quite a lot of them, one in each folder below:
xampp/htdocs/drupal
xampp/phpMyAdmin/setup/lib
xampp/phpMyAdmin/libraries
xampp/htdocs/xampp/sqlite
xampp/htdocs/forbidden
xampp/phpMyAdmin/contrib
My partner here says I have to make that myself inside xampp/htdocs/nameOfTheFolderOfMyWebApp but I don't quite trust him since it didn't work. Help?
This may help, at least for testing:
Since you are using PHP, you could create a PHP file named themanifestfile.php with this content:
<?php header('Content-type: text/cache-manifest'); ?>CACHE MANIFEST
demoimages/clownfish.jpg
demoimages/clownfishsmall.jpg
demoimages/flowingrock.jpg
# THE REST OF YOUR OFFLINE FILES GO HERE
Then, in your html:
<html manifest="themanifestfile.php">
I know this doesn't directly answer your question, but it may save you a lot of time fighting against apache configuration files if you only need to test your app.