Apache cache does not work

Server-side cache and client-side cache are separate.You have to think differently."I pointed it out once, but even after correcting it, they still ask me that ""I set up the server side cache, but the client side cache is not done,"" and I get the impression that the questioner himself doesn't know what he wants."

First of all, what do you want from the /tmp/cache directory? You can read from the questionnaire as if you were expecting an image file to be copied under this directory in a different area of the disk, but there is no point in copying it.
You should think of it as a place where dynamically generated content or compressed content such as Content-Encoding:gzip is placed (IIS had the latter, but Apache didn't... I remember dimly).

Next, regarding the client-side cache, I don't know unless you provide not only the settings but also the response headers received by the browser.
There is also a mechanism called application cache that is completely different from the response header.Please consider this as an option.

I checked the response header image, but

Header append Cache-Control "public, max-age=86400"
Header set Expires "Mon, 26 Jul 2017 05:00 GMT"

The header is not included.First of all, you should make sure that the settings are reflected correctly, and if they are not, all the settings will have no meaning.

I heard that it is difficult to update the application cache on the server side (it is difficult to update immediately if the wrong image is delivered), so I am thinking of prioritizing local storage.

It must have been a question of not communicating with the web server.Without communication, we will not be able to know the updates on the web server side in any way.
As I pointed out first, I recommend you reconsider where and what you want to cache.

Why do you do Header set manually in addition to mod_expires?

mod_expires is a module that can be configured for Expires or max-age depending on the file format and with easy-to-understand specifications such as 日n days later とFor example, the following statement should print a header with a cache expiration of 1 month from access to the PNG image:

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType image/png "access plus 1 months"
</IfModule mod_expires.c>

If you specify such a long Expires, how do you discard the cache? A common method is to change the URL of the image when updating the image.You can simply rename the file or embed a timestamp or hash value in the query string.

Example: foo.png?v=20170210 < foo.png?v=20170308

This is a different URL than it was before the update, so the existing cache will not be used.

By the way, there is no update confirmation until Expires expires, so Last-Modified or ETag is not used.If updating URLs is troublesome, it is also a good idea to compromise with If-None-Match or If-Modified-Since by setting Expires to 0.You cannot completely lose communication.

Next, localStorage does not have an asynchronous API, so both save and eject block UI threads.The amount of data that can be stored is about 5MB, which is not very large.IndexedDB is a little better, but

• Local storage doesn't have an easy solution|Mozilla Developer Street (modest)
  
• Summary of modern browser storage capacity and research methods - HTML5 Rocks

_{You can't use the browser cache deletion feature or super reload, which is often used for cache-related issues, and you can also talk about user-side storage consuming non-cache space.}

Also, ApplicationCache using manifest files is already being discontinued, but JavaScript gives you flexibility to control the cache functionality of ServiceWorker, but browser support is not good.

With these in mind, you should consider whether Expires (or If-**) is still insufficient.