时间戳

首页 > 解决方案 > Firefox - 我认为每个选项卡都有一个单独的 Service Worker 实例 - 为什么？

javascript - Firefox - 我认为每个选项卡都有一个单独的 Service Worker 实例 - 为什么？

问题描述

问题陈述

我目前正在开发一个 Web 应用程序，它尝试使用服务人员在不同的选项卡之间共享数据。

在此过程中，我注意到 Firefox 和 Chrome 表现出不同的行为：

在缩小原因范围的同时，我已将问题简化为下面看到的最小示例。在 Firefox 和 Chrome 中分别打开此测试页面两次（并重新加载以让工作人员控制），我发现虽然 Chrome 计算两个选项卡上的按钮点击次数，但 Firefox 似乎为每个选项卡保留单独的计数。为什么会这样？

最小的例子

测试.html

<!doctype html>
<html lang="en">
    <head></head>
    <body>
        <script src="test-client.js"></script>
        <input type="button" id="test-button" value="Click me!" />
        <div id="test-output">Click the button!</div>
    </body>
</html>

测试客户端.js

navigator.serviceWorker.register('/test-worker.js');

document.addEventListener('DOMContentLoaded', () =>
{
    let output = document.getElementById('test-output');
    document.getElementById('test-button').addEventListener('click', () =>
    {
        fetch('/worker/count').then((r) => r.text()).then((t) => { output.innerText = t; });
    });
});

测试工作者.js

let count = 0;
self.addEventListener('fetch', (e) =>
{
    if ((new URL(e.request.url).pathname) === '/worker/count')
    {
        ++count;
        e.respondWith(new Response(''+count));
    }
    else
        e.respondWith(fetch(e.request));
});

标签： javascriptfirefoxservice-worker

解决方案

推荐阅读