时间戳

首页 > 解决方案 > 服务人员没有可靠地拦截 fetch 事件

service-worker - 服务人员没有可靠地拦截 fetch 事件

问题描述

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

当我启动应用程序时，我可以看到我的服务工作者注册、安装和激活。这正如预期的那样反复发生。
但是我在可靠地拦截 fetch 命令时遇到了问题。

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

但是如果我删除断点并正常运行程序，服务工作者不会拦截 fetch 事件。

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

这不是我的情况，因为在某些条件下，我的服务人员确实会拦截 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

解决方案

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

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

ps 请注意，使用快捷方式绕过缓存，例如在 Chrome: Ctrl-F5、Shift-F5和 Firefox:Ctrl-F5中，实现与取消选中按钮禁用缓存Ctrl-Shift-R相同的效果

推荐阅读