服务工作者：缓存数据再次从服务器加载，不会触发提取

Question

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

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

在我的express应用程序中，我使用的公用文件夹如下：

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

登录。呈现的ejs模板

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);
        });
    });
}

注册成功。

和西南部。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))
        )
});

安装

当同一个应用程序重新加载或页面导航时，读取不会触发，也不会从服务工作者加载数据，总是从服务器加载。

但是当我尝试在不同的浏览器选项卡中使用例如：http://localhost:3000/static/lib/bootstrap/img/off.png从服务人员的提取中加载。

当我研究时，我了解了范围，但这里我希望我的软件。js文件已在顶级作用域中，

我的预期行为是：在每个页面上加载/导航缓存的URL以代替服务器调用，请建议解决方法

Answer 1

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

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

并更改了登录名。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);
        });
    });
}