Service Worker:无法在 Fetch 事件

问题描述

我在 page.html 文件旁边有一个 Service Worker 文件 (sw.js)

- folder
  - assets
    - js.js
    - css.css
  - page.html
  - sw.js
- other

网址是:

https://example.com/folder/page.html?a=1

Service Worker 已在 js.js 文件注册

if ("serviceWorker" in window.navigator) {
    window.navigator.serviceWorker.register("/folder/sw.js");
}

sw.js内容如下:

self.addEventListener("install",function(event){
    event.waitUntil(
        caches.open(CACHE_NAME_STATIC)
            .then(function(cache) {
                cache.addAll([
                    "/folder/assets/js.js","/folder/assets/css.css",// Other Resources
                ]);
            })
    );
});

self.addEventListener("fetch",function(event) {
    console.log("FETCH EVENT",event.request.url); // No "/page.html" logs here
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
                // From Cache
                if (response) {
                    return response;
                }
                // From Network
                else {
                    return fetch(event.request)
                        .then(function(res) {
                            return caches.open(CACHE_DYNAMIC_NAME)
                                .then(function(cache) {
                                // I want to cache /page.html?a=1 here
                                cache.put(event.request.url,res.clone());
                                return res;
                        })
                    })
                    .catch(function(err) {});
                }
            })
    );
});

一切正常,除了我无法缓存 page.html 文件,因为“获取”事件没有记录它(获取事件未列出 page.html 文件),所以我无法访问 {{ 1}} URL 动态。 而且我无法在“安装”事件上缓存 /page.html?a=1,因为我不知道 page.html?a=1 参数值是什么。

为什么 fetch 事件没有列出 ?a=
无论如何,我如何缓存 page.html

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)