其他页面上的 PWA 缓存存储不起作用？

Question

我正在为我的网站开发 pwa，并将所有资产存储到缓存存储中。 问题是当检查开发工具 -> 应用程序 -> 缓存存储是否正常并保存，但是当转到其他页面并切换到开发工具缓存存储上的离线模式时未加载！

只为保存的同一页面加载缓存存储数据？ 其他页面不能访问其他页面的缓存存储吗？

 event.respondWith(
        fetch(request)
            .then(res => { // onLine
                if (request.method == 'GET') {
                    // add to cache
                    caches.open(DYNAMIC_STATIC_CACHE_NAME_VERSION)
                        .then(cache => {
                            // console.log("save to dynamic cache");
                            cache.put(request, res);
                        })
                        .catch(() => console.log("error on dynamic cache open!"));
                }
                return res.clone();
            })
            .catch(err => {
                console.log("user is offline");

                if (request.mode === 'navigate' ||
                    (request.method === 'GET' && request.headers.get('accept').includes('text/html'))
                ) {
                    return caches.match(request) || caches.match(offlineUrl);
                }
                return caches.match(request) || fetch(request);
            });

Answer 1

同一域上的页面共享缓存 API（以及 IndexedDB、LocalStorage 等）数据。

因此不同域上的页面无法访问彼此的缓存 API 数据 - 这是一种安全机制。