22

I have a lot of images in a folder that are used in the application. When using the cache manifest it would be easier maintenance wise if I could specify a wild card to load all the images or files in a certain directory to be cached.

E.g.

CACHE MANIFEST
# 2011-11-3-v0.1.8
#--------------------------------
# Pages
#--------------------------------
../index.html
../edit.html
#--------------------------------
# JavaScript
#--------------------------------
../js/jquery.js
../js/main.js
#--------------------------------
# Images
#--------------------------------
../img/*.png

Can this be done? Have tried it in a few browsers with ../img/* as well but it doesn't seem to work.

zuallauz
  • 4,328
  • 11
  • 43
  • 54
  • 1
    **NOTE:** in 2017 the [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) API is rapidly replacing AppCache, and browsers are beginning to ignore a `.manifest` file - Firefox 44 even suggests using Service workers instead in the console when it finds a `.manifest` file. – Dave Everitt Jun 20 '17 at 13:36
  • As of 2022 appcache manifest is longer supported in most of the browsers: https://caniuse.com/?search=appcache – rodvlopes Jun 20 '22 at 14:07

5 Answers5

22

It would be easier, but how's it going to work? The manifest file is something which is parsed and acted upon in the browser, which has no special knowledge of files on your server other than what you've told it. If the browser sees this:

../img/*.png

What is the first image the browser should request from the server? Let's start with these:

../img/1.png
../img/2.png
../img/3.png
../img/4.png
...
../img/2147483647.png

That's all the images that might exist with a numeric name, stopping semi-arbitrarily at 231-1. How many of those 2 billion files exist in your img directory? Do you really want a browser making all those requests only to get 2 billion 404s? For completeness the browser would probably also want to request all the zero-filled equivalents:

../img/01.png
../img/02.png
../img/03.png
../img/04.png
...
../img/001.png
../img/002.png
../img/003.png
../img/004.png
...
../img/0001.png
../img/0002.png
../img/0003.png
../img/0004.png
...

Now the browser's made more than 4 billion HTTP requests for files which mostly aren't there, and it's not yet even got on to letters or punctuation in constructing the possible filenames which might exist on the server. This is not a feasible way for the manifest file to work. The server is where the files in the img directory are known, so it's on the server that the list of files has to be constructed.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • 1
    Well when the browser does the initial request to the server it just looks at the publicly available image directory and does a directory listing on that directory. That will return a list of files that it can see. Then it downloads to the browser/client only the files with extension .png. There's no need to guess what the files might be called by querying the server from 0 - a trillion filename possibilities. – zuallauz Nov 05 '11 at 00:52
  • 1
    @zuallauz Assuming the image directory is publically available, that's not really saying anything different from what I said: "The server is where the files in the img directory are known, so it's on the server that the list of files has to be constructed", except that there's no standard format for the file listing returned by a publically available image directory for the browser to parse, but there is a standard for the manifest file. – robertc Nov 05 '11 at 10:48
  • 7
    Without folder / directory listings, you could be saying "cache any file which has been loaded on this request and matches the folder i've specified" So not any image in that folder, but any image the page has referenced. – Harry B Jun 30 '13 at 13:50
17

I don't think it works that way. You'll have to specify all of the images one by one, or have a simple PHP script to loop through the directory and output the file (with the correct text/cache-manifest header of course).

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • 19
    Actually, a wildcard works **if** you allow directory listings, i.e. if you browse to ...mysite.com/img/ and you get a listing of all files in the directory. I spent most of the afternoon trying to figure out why the site was working on my development machine (which allows directory listings) but not on my test server (which does not allow listings). However, for security reasons most servers disable directory listings.... – JvO Dec 02 '13 at 17:55
  • 1
    @JvO: Interesting! I didn't know. Could you edit my answer to include that? I'll accept your suggested edit (you'll get a couple of points from it too :P) – Madara's Ghost Dec 02 '13 at 19:37
3

It would be a big security issue if browsers could request folder listings - that's why Tomcat turns that capability off by default now.

But, the browser could locate all matches to the wildcards referenced by the pages it caches. This approach would still be problematic (like, what about images not initially used but set dynamically by JavaScript, etc., and it would require that all cached items not only be downloaded but parsed as well).

stevec
  • 71
  • 4
2

If you are trying automate this process, instead of manually doing it. Use a script, or as I do I use manifestR. It will output your manifest/appcache file and all you have to do is copy and paste. I've used it successfully and usually only have to make a few changes.

Also, I recommend using the network header with the wild card:

NETWORK:
*

This allows all assets from other linked domains via JSON, for instance, to download into the cache. I believe that this is the only header where you can specify a wildcard. Like the others have said here, it's for security reasons.

Paul
  • 1,179
  • 3
  • 14
  • 38
  • 3
    You are **Wrong!** Files listed under the NETWORK: section header in the cache manifest file are white-listed resources that require a connection to the server. – Mithun Sreedharan Jul 08 '15 at 08:29
0

The cache manifest is now deprecated and you should use HTML headers to control caching.

For example:

<meta http-equiv="Cache-control" content="public">
  • Public - may be cached in public shared caches.
  • Private - may only be cached in private cache.
  • No-Cache - may not be cached.
  • No-Store - may be cached but not archived.
Dan Bray
  • 7,242
  • 3
  • 52
  • 70