从服务工作者获取页面URL参数

Question

如何从服务工作者中获取带参数的页面URL？

我尝试过使用self.registration.scope，但它并不包括参数。

- Ethan

Answer 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属性:

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

- Jeff Posnick

---

我提供的示例代码调用 self.clients.matchAll()，可以让你获取当前服务工作者范围内所有打开页面的URL。 - Jeff Posnick

我的错，我看错了，第一种方法显然是获取脚本位置。删除我的评论以避免进一步的混淆。 - aleemb

Answer 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);
  });

- guest271314

Answer 3

ServiceWorker.scriptURL可以给你URL和它的参数。

然后，下一步是获取一个ServiceWorker对象，这取决于你想在哪里使用URL参数。

在worker脚本中，使用self.serviceWorker.scriptURL。例如：

const searchParams = new URLSearchParams(self.serviceWorker.scriptURL);

在页面脚本中，使用 scriptURL 和 navigator.serviceWorker.ready。例如：

const serviceWorkerRegistration = await navigator.serviceWorker.ready;
const activeServiceWorker = serviceWorkerRegistration.active;  
const searchParams = new URLSearchParams(activeServiceWorker.scriptURL);

然而，您可能想从register API获取一个注册对象，但上面的代码片段也应该可以工作。

- Sean Lee