Question

我的目标是防止在单击电子邮件确认链接时打开另一个窗口，而是让SW用链接中的代码通知已经打开的选项卡。

是否有一个API可以让我们拦截打开邮件中的链接并处理服务人员内部的事件？

Answer 1

仅当您首先注册服务工作者时才有可能，例如，用户以某种方式打开了您的注册服务工作者的应用程序页面。

考虑以下简单页面： index.html

<!DOCTYPE html>
<html lang="en">
<body>
  Sample App
  <script src="app.js"></script>
</body>
</html>

在app.js的内容下方

if ('serviceWorker' in navigator){
    navigator.serviceWorker
        .register('./service-worker.js')
        .then(function (registration) {
            console.log("Service Worker Registered");
        })
        .catch(function (err) {
            console.log("Service Worker Failed to Register", err)
        })
}

最后是我们下面的service-worker.js文件

//Ran when SW is installed. 
self.addEventListener('install', function (event) {
    console.log("[ServiceWorker] Installed");
});

//Service Worker Activate
self.addEventListener('activate', function(event) {
    console.log("[ServiceWorker] Activating");
});

//Fetch Events
self.addEventListener('fetch', function(event) {
  var requestUrl = new URL(event.request.url);
  var keyParam = requestUrl.searchParams.get("key");

  if (requestUrl.origin === location.origin && event.request.url.includes('/confirmation')) {
          event.respondWith(
           //do something else
            new Response("ok this key is already used " + keyParam,  { "status" : 200 , "statusText" : "MyOwnResponseHaha!" })
          )
  }

})

因此，首先要得出结论，您的用户必须以某种方式打开index.html文件才能成功安装和注册服务工作者。完成此操作后，将直接发送给

的任何请求（来自电子邮件中的链接或直接位于浏览器地址栏中的请求）

http://yourdomain.com/confirmation?key=1234567

将被 service-worker.js 拦截，而将返回以下结果：

"ok this key is already used 1234567"

OBS：但是，有太多问题可能会出问题，因此我不建议您采取这种行动。例如，如何检查密钥是否已使用？或者，如果用户在Chrome中打开index.html，则该服务工作者将在Chrome中注册。例如，如果Edge是计算机的默认浏览器，则当他单击电子邮件链接时，将打开Edge实例，并且Edge浏览器将没有安装Service Worker，因此上述链接将返回404 ...尝试查找另一种方式。但是，如何将SW用作应用路由器真是令人惊讶。

如何拦截服务人员的开放网址？

1 个答案: