Cache API doesn't work on safari ios simulator and on mac

Question

I am trying to use the following snippet code in my index.html .

<script>
        fetch('index1.js').then(response => {
            caches.open('test-cache').then(cache => {
                cache.put('index1.js', response);
            })
        })
    </script>

I have a custom domain on localhost called test-website.com . When I access this page through chrome, all is good and index1.js gets stored in cache. Now, I turn on ios Simulator and open safari in there and run the same website again. I also check this website on mac safari, but In the console, this is what I get:

Unhandled Promise Rejection: ReferenceError: Can't find variable: caches

Question 1) Why do I get this error?

Question 2) I checked the compatibility: Cache Storage API and Cache . The first one has compatibility with ios safari , second one doesn't. What's the difference between these 2? and could this be the reason why it can't find the cache?

Question 3) Apple supports service worker and it should be supporting Cache API . Otherwise it has no worth . Any idea?

Answer 1

The documentation for Cache Storage API states the following:

Note: Chrome and Safari only expose CacheStorage to the windowed context over HTTPS. window.caches will be undefined unless an SSL certificate is configured.

Ensure that you are serving and accessing the webpage over HTTPS

As far as I know, the browser will still allow the caches variable to be accessible when serving pages from localhost as a means to do testing, but this rule should not apply if you're accessing it over a custom domain test-website.com