服务工作者：缓存数据再次从服务器加载，未触发获取答案

【问题标题】：service worker: cached data again loads from server, fetch is not triggered服务工作者：缓存数据再次从服务器加载，未触发获取
【发布时间】：2021-06-23 00:03:17
【问题描述】：

因此清单已被弃用，试图在快速 Web 应用程序中实现服务工作者。这是我的项目结构：

    app.js
    views  >
            login > 
                   login.ejs 
    public >
        lib
        css
        images
        html
        js
        sw.js

在我的快递应用程序中，我正在使用这样的公用文件夹：

app.use("/static", express.static(path.join(__dirname, 'public')));

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/static/sw.js').then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
        });
    });
}

并且注册成功。

还有 sw.js

const CACHE_NAME = 'v3'

// list of files
const URLS_TO_CACHE = [
    "/static/images/favicon.ico",
    "/static/lib/bootstrap/img/off.png",
    "/static/lib/bootstrap/img/on.png",
    "/static/html/help/lib/css/style.css",
    "/static/lib/templates/login/account.js"
];

self.addEventListener("install", function (event) {
    console.log("[Service Worker] install");
    event.waitUntil(caches.open(CACHE_NAME).then(function (cache) {
        console.log("[Service Worker] Caching app shell");
        return cache.addAll(URLS_TO_CACHE);
    })
        .then(function () {
            self.skipWaiting();
        }));
});

self.addEventListener('activate', function (event) {
    console.log('[ServiceWorker] Activate');
    e.waitUntil(
        caches.keys().then(function (keyList) {
            return Promise.all(keyList.map(function (key) {
                if (key !== CACHE_NAME) {
                    console.log('[ServiceWorker] Removing old cache', key);
                    return caches.delete(key);
                }
            }));
        })
    );
    return self.clients.claim();
});

self.addEventListener('fetch', e =>{
    console.log("service worker : fetching");
    e.respondWith(
        fetch(e.request).catch(() => caches.match(e.request))
        )
});

安装和激活监听器工作正常，并且 url 也被缓存到缓存存储中。

当相同的应用程序重新加载或页面导航时，不会触发 fetch 并且永远不会从服务工作者加载数据，总是从服务器加载。

但是当我在不同的浏览器选项卡中尝试例如：http://localhost:3000/static/lib/bootstrap/img/off.png 它的负载来自服务人员的获取。

当我研究时，我了解了范围，但在这里我希望我的 sw.js 文件已经在顶级范围内，

我的预期行为是：在每个页面加载/导航缓存 url 用于代替服务器调用，请为此提出任何解决方法

【问题讨论】：

您的 index html 页面是否属于 service worker 范围？

标签： javascript jquery express service-worker service-worker-events

【解决方案1】：

终于解决了范围问题，将 sw.js 文件从静态移动到项目根目录（与 app.js 并行）并像下面这样使用，问题解决了。

app.use('/sw', express.static(path.join(__dirname, '/sw.js')));

并如下更改 login.ejs

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js').then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
        });
    });
}

【讨论】：