The situation:
Made htaccess remove file extension so when I access www.example.com/index.html it will link to www.example.com/index/
Created a cache manifest (works fine so we can rule out problems with its structure)
The problem:
Even since I made htaccess change links, cache manifest no longer works for index.html
example:
CACHE MANIFEST
index.html
and in console I would get cache manifest resource fetch failed (-1).
this is probably because when the browser tries to access www.example.com/index.html it would get redirected to www.example.com/index/ and it is confused?
Is there any way to get it to cache the link directly? Thanks.
Could it be that all files that are to be stored in the cache need to be explicitly stated, or in other words, the full absolute URL has to be written or a full relative URL must be written in order for the cache to download the file.
aka
index.html
blablah.js
hello/world.png
all should work but
index/
bippitybop/js/
goodbye_cruel/world/*
won't work.
Let me know if this helps, if this question is even still active.
Related
Here is my manifest :
CACHE MANIFEST
CACHE:
//code.jquery.com/jquery-2.0.3.min.js
NETWORK:
*
My index.html which defines that manifest (<html manifest="app.manifest>) is always stored as "Master" even with the NETWORK wildcard part of my manifest.
The problem is that my MASTER index.html is stored in the cache... and won't be refreshed if it changes on the server side if the manifest file is not updated.
I've seen multiple not really beautiful solutions to that problem (like the iframe solution), so my question is : is there a clean HTML 5 way to do this ?
The clean way to do it is to only have static content in your index.html file then load the data dynamically (eg. via AJAX) to create the page the user sees. An alternative would be to have a big link which says 'Enable Offline Support' which links to a page with the manifest link in it.
Other than that, the iframe solution is the cleanest way - you're hacking around the intended use of AppCache, why do you expect that to be 'clean'? What application scenario do you have that jquery-2.0.3.min.js needs to be available offline but not the index page of the app which accesses it?
I am trying to build a web app for iphone, and I don't understand
how to cache all the files under the "images" directory ?
and I modify one file on the server like "brandDB.txt", how to make the cache manifest update this file, and this file only to avoid downloading everything again ?
Thanks
CACHE MANIFEST
# 20131104-1430
index.html
brandDB.txt
icon.png
splashiphone.png
touch-icon-iphone.png
css/style.css
images/shareicon.png
images/bourez.png
images/john.png
...
NETWORK:
*
FALLBACK:
I did a program to easily generate the cache manifest file with the complete list directly from the Windows explorer, if you need it : http://matthieu.com/cmfg/
how to cache all the files under the "images" directory ?
List them all in the manifest file (easiest to use a script to generate the list if it's a lot of files).
how to make the cache manifest update this file, and this file only to avoid downloading everything again
Ensure your HTTP headers are set correctly for the frequency of updates you expect
Update the manifest file
The browser will populate the app cache from its own cache if you've set the headers on each file to allow caching. If you want to version control the files without using HTTP headers, add a query string to the end of the file, eg. brandDB.txt?v=1 - be sure to update the reference in the application if you do that, however.
Well, What I'm going to say, unfortunately is as Jake Archibald Said:
"Application cache is a douchebag !" (Good Article on how it works (not actually a douchebag))
http://alistapart.com/article/application-cache-is-a-douchebag
Basically, you could create a script to list all your files in your image directory
and paste it inside a generated AppCache File.
Application cache will only update when its file's content is changed , you'll also need ensure that the file itself is not cached.
I think you'll be needing your clients to reload the page twice for them to actually see the updates. (You could however using javascript tell the user that the page has updated and they'll need to refresh)
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].
Every URL can be linked to a single cache manifest. But I want several cache manifests linked to a same URL. Here is the reason:
Some files I want to be cached are rarely updated and large.
So everytime the cache gets updated these large files get re-downloaded even though they may not have been changed.
So I want to split up the cache. One cache for theses rarely updated large files and another cache for the often updated light files.
Do you guys have any idea how to split up an HTML5 cache?
The most efficient way is:
a) Use far-future expiration date (max-age) on all resources mentioned in manifest's CACHE section and add timestamp suffix to each file in the CACHE section, e.g.:
CACHE:
menu_1355817388000.js
toolbar_1355817389100.js
b) When any of the above files change on the server, regen/update manifest to change the timestamp. Only the file with the modified timestamp will get downloaded next time. Mission accomplished.
Note: Reload the page twice in the browser, as on the first refresh browser downloads just the manifest and uses old cached resources to paint the page. This is done to speed up displaying the page (there are tricks to handle this issue of double refresh, but they are outside the scope of your question)
See more info in this long but best article I ever seen on appcache.
Use an iframe
Your page's cache manifest would include the light files and the cache manifest of an iframe loaded by this page would include the large files
On chrome the iframe's application cache will also be used for the page. I didn't tested this method on other browsers yet.
see a live example at http://www.timer-tab.com and if you are using chrome see its split up cache at chrome://appcache-internals/
When the manifest file is changed and the files of the application cache are downloaded again, the normal HTTP caching rules still apply. This means that if you set the correct HTTP caching headers for these large files, you'll get a 304 so these files are not downloaded again. So it's not necessary to split the application cache.
Maybe an answer but I'd more like to shed some light on my findings as a I troubleshoot my own webapp.
I've discovered that I can use 2 iframes (manifest_framework) and (manifest_media) to load the manifests, but i'm still not exactly clear how they are targetted, but I had limited success.
manifest_framework:
CACHE MANIFEST
CACHE:
appdata.ini
dialog.png
jquery.min.js
login.htm
login.js
manifest.appcache.js
NETWORK:
*
FALLBACK:
manifest_media:
CACHE MANIFEST
CACHE:
manifest_fwk.php
od/audio_track_1_1.m4a
od/audio_track_1_2.m4a
od/audio_track_1_3.m4a
od/audio_track_1_4.m4a
od/video_1.mp4
od/video_2.mp4
od/video_3.mp4
NETWORK:
*
FALLBACK:
./ webapp.php
./index.php is the page the 'landing page' which itself isn't cached but falls back to webapp.php when offline.
What I don't understand is how these link to the webapp.php page.
I am finding I can only get access to one or the other manifests cache.
The above works in mobile safari, the media would be cached, and image but not necessarily the JS or images in the framework manifest.
Anyone have more examples where multiple manifests are referenced from the one URL/page?
The W3C working group has abandoned the file system api, so it SHOULD NOT BE USED anymore.
We'll likely see it fall off the next version of Chrome.
http://www.w3.org/TR/file-system-api/
CACHE MANIFEST
# This is a comment.
# Cache manifest version 0.0.1
# If you change the version number in this comment,
# the cache manifest is no longer byte-for-byte
# identical.
demoimages/mypic.jpg
demoimages/yourpic.jpg
demoimages/ourpic.jpg
sr/scroll.js
NETWORK:
# All URLs that start with the following lines
# are whitelisted.
# whitelisted items are needed to help the site function, you could put regularly
# changing items here
http://example.com/examplepath/
http://www.example.org/otherexamplepath/
CACHE:
# Additional items to cache.
demoimages/allpics.jpg
FALLBACK:
demoimages/currentImg.jpg images/stockImage.jpg`
If the Iframe trick does not work, use the HTML5 FileSystem API
See http://updates.html5rocks.com/2012/04/Taking-an-Entire-Page-Offline-using-the-HTML5-FileSystem-API
One thing I'm not fully grasping is if the cache manifest is also acting as a prefetch when it is online for all the files listed.
For example, lets say I'm visiting:
/page1.html
Each of the pages on my site will have the same declaration:
<html manifest="/cache.manifest">
In the cache manifest file, I have:
CACHE MANIFEST
/page2.html
/page3.html
/page4.html
So what will happen is I visit /page1.html first, and when I'm online my browser will know to cache pages 2-4 also. And when I'm disconnected and I visit pages 2-4 everything will load just fine because it was already cached.
QUESTION: If I visit /page1.html, and I'm STILL connected online, and visit /page2.html, will my browser still request /page2.html, or will it not make another request to the server and use what it cached from the /cache.manifest file? Essentially acting like the prefetch link that firefox uses?
Well, the spec says "all files," without any exceptions for html files, so I figure it works for html files just like any other, it gets taken from the cache, not the server. However, I have not done any testing to confirm this. I would do the following:
Create the following cache manifest file:
CACHE MANIFEST
/page1.html
/page2.html
/page3.html
/page4.html
Include it in each of the four cache manifest files. Then:
Visit page1.html
Edit page2.html to make it different than before you visited page1.html
Visit page2.html
See which version you get.
Make sure you try it out on all browsers. I'll be interested to see your results.
When we use cache manifest it takes the files from the cache each time you load the page.
There is a solution for this.
You have to change the version number in the manifest file, If at all you have done any changes to the HTML files. so that your manifest pulls in the latest version of the HTML from the server and Stores it in Cache.
CACHE MANIFEST
#v01
/page1.html
/page2.html
/page3.html
/page4.html
You can just Increment the V01 to 02,03... So on, this will ensure your cache will have latest version of html pages
I think it takes it from the manifest file even if you are online :). Can't you try it out by uploading a file and then navigating to the page?