从 service worker 获取页面 URL 参数答案

【问题标题】：Get page URL parameters from a service worker从 service worker 获取页面 URL 参数
【发布时间】：2018-03-29 21:30:14
【问题描述】：

如何从 Service Worker 获取带有参数的页面 URL？

我试过self.registration.scope，但不包括参数。

【问题讨论】：

标签： javascript url service-worker url-parameters url-parsing

【解决方案1】：

我不清楚您是要获取服务工作者脚本的 URL，还是在服务工作者范围内打开的所有客户端页面的 URL。所以...这里是如何做到这两点：

// Get a URL object for the service worker script's location.
const swScriptUrl = new URL(self.location);

// Get URL objects for each client's location.
self.clients.matchAll({includeUncontrolled: true}).then(clients => {
  for (const client of clients) {
    const clientUrl = new URL(client.url);
  }
});

在任何一种情况下，一旦您拥有一个URL 对象，如果您对查询参数感兴趣，就可以使用它的searchParams property：

if (url.searchParams.get('key') === 'value') {
  // Do something if the URL contains key=value as a query parameter.
}

【讨论】：

我提供的调用self.clients.matchAll()的示例代码将允许您获取当前服务工作者范围内所有打开页面的URL。
我的错，我看错了，第一种方法显然是获取脚本的位置。删除我的评论以避免进一步混淆。

【解决方案2】：

可以获取waiting.scriptURL或active.scriptURL，将结果传递给URL()构造函数，获取.search对象的属性

  navigator.serviceWorker.register("sw.js?abc=123")
  .then(function(reg) {
    const scriptURL = reg.waiting && reg.waiting.scriptURL || reg.active.scriptURL;
    const url =  new URL(scriptURL);
    const queryString = url.search;
    console.log(queryString);
  }).catch(function(err) {
    console.log("err", err);
  });

【讨论】：