javascript - Service Worker 获取事件永远不会触发

Question

问题标题说明了一切。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/react-redux/sw.js').then(() => {
        console.log('registered');
    }, err => console.log(err));
}

---

编辑

看来问题的根源是路径

navigator.serviceWorker.register('/react-redux/sw.js')

如果我移动 sw 代码，那么我就有了

navigator.serviceWorker.register('swRoot.js').then(() => {

然后一切正常。我尝试了上面我能想到的所有方法，从删除/react-redux 中的前导斜杠，到添加 {scope: of './', '/'、'/react-redux'，但均无效(有些会导致错误)。

有谁知道需要什么配置魔法才能从您域的根目录以外的其他地方加载服务 worker ？

---

然后是我的整个 sw.js

self.addEventListener('install', function(event) {
    console.log('hello');
    try {
        console.log('typeof System in install', typeof System);
    } catch(e){}

    console.log('caching');
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            console.log('caching - getting');
            return cache.addAll([
                '/react-redux/a.js'
            ]);
        }).catch(function(error){ console.log('error', error) })
    );
});

console.log('ADDING FETCH')
self.addEventListener('fetch', function(event) {
    console.log('fetching ->', event.request);
    event.respondWith(
        caches.match(event.request)
                .then(function(response) {
                    // Cache hit - return response
                    if (response) {
                        return response;
                    }
                    return fetch(event.request);
                })
    );
});

我从来没有收到过 console.log('fetching ->', event.request); 消息。我什至添加了这个愚蠢的东西来试图强制解决这个问题。

setTimeout(() => fetch('/react-redux/foo.css').then(r => console.log(r)), 1000);
setInterval(() => fetch('/react-redux/foo.css').then(r => console.log(r)), 5000);

我看到 fetch 事件正在运行，但 service worker 从来没有说它正在访问那些事件处理程序。

此外，我确实收到了 SW 已注册的通知，并且当我更新 sw.js、关闭并重新打开时，我看到所有的日志语句表明一切都在正确安装。

Answer 1

您走在正确的轨道上，这似乎是一个范围界定问题。

要改变服务 worker 的范围，必须在注册时完成，如下所示:

navigator.serviceWorker.register('scripts/sw.js', { scope: '/' })

然后服务器必须在响应中返回以下 header 以确认此范围更改。

Service-Worker-Allowed: /

See this answer