服务人员没有可靠地拦截 fetch 事件答案

【问题标题】：service worker not intercepting fetch events reliably服务人员没有可靠地拦截 fetch 事件
【发布时间】：2020-06-13 22:30:51
【问题描述】：

我有一个用flask和nginx实现的webapp（在docker环境中）我想添加一个服务人员所以我读了here 如何设置配置使得范围是根目录（'/'）

当我启动应用程序时，我可以看到我的 Service Worker 已注册、安装并激活。这种情况按预期反复发生。
但我无法可靠地拦截 fetch 命令。

使用chrome devtools，如果我在安装中设置断点，等待并继续，然后有时，GET 操作被路由到服务工作人员（我可以从服务工作人员的 fetch 事件侦听器中看到控制台打印输出）。
当我到达这个状态时，所有的 fetch 事件都会被拦截，正如预期的那样

但如果我删除断点并正常运行程序，service worker 不会拦截 fetch 事件。

我读到here，服务工作者的范围可能会导致路由丢失。但在这种情况下，错过是系统性的，即永远不会拦截不在范围内的路径

这不是我的情况，因为在某些条件下，我的服务人员会拦截 fetch 调用。

我的设置如下。

谢谢，阿夫纳

# the file structure
/usr/src/app/web/
├── V1
│   ├── js
│   │   └── mlj
│   │   └── ...
│   │       ├── main.js
│   ├── ...
├── project
│   ├── sites
│   │   └── ...
│   │   └── views.py
└── sw1.js

------------------------------------------------------------

# the file that registers the service worker 
cat main.js
...
    navigator.serviceWorker.register("../../../sw1.js", {scope: '/'})
        .then(regisration => console.log('SW Registered1'))
        .catch(console.error);

------------------------------------------------------------

# the service worker 
cat sw1.js
const version = 1;

self.addEventListener('install', function(event) {
    console.log ('SW v%s installed at', version, new Date().toLocaleTimeString());
});


self.addEventListener('activate', function(event) {
    console.log ('SW v%s activated at', version, new Date().toLocaleTimeString());
});


self.addEventListener('fetch', function(event) {
    console.log ('SW v%s fetched at', version, new Date().toLocaleTimeString());
    if(!navigator.onLine) {
        event.respondWith(new Response('<h1> Offline :( </h1>', {headers: {'Content-Type': 'text/html'}}));
    }
    else {
        console.log (event.request.url);
        event.respondWith(fetch(event.request));
    }
});


------------------------------------------------------------

# the route to the service worker in the flask python file
cat web/project/sites/views.py
...
from flask import current_app, send_from_directory
...
@sites_blueprint.route('/sw1.js', methods=['GET'])
def sw():
    # /usr/src/app
    root_dir = os.path.dirname(os.getcwd())

    filename = 'sw1.js'

    # /usr/src/app/web
    dir1 = os.path.join(root_dir, 'web')

    return send_from_directory(dir1, filename)

【问题讨论】：

标签： service-worker

【解决方案1】：

我发现here 在 Chrome 开发者工具网络选项卡上，如果选中禁用缓存，请求将转到网络而不是 Service Worker，即 Service Worker 没有收到 fetch 事件。

通过取消选中按钮禁用缓存启用缓存后（在Chrome devtool -> Network -> Disable cache中），获取事件现在被服务工作者拦截。

附言请注意，使用bypass the cache 的快捷方式，例如在 Chrome 中：Ctrl-F5、Shift-F5，在 Firefox 中：Ctrl-F5、Ctrl-Shift-R 与取消选中按钮禁用缓存

实现相同的效果

【讨论】：