如何检查给定 URL 中是否存在 service-worker？答案

【问题标题】：How to check if service-worker exist in given URL?如何检查给定 URL 中是否存在 service-worker？
【发布时间】：2017-12-21 14:21:21
【问题描述】：

我可以区分给定的外部网站是否有“服务工作者”吗？

我的最佳猜测是：

从给定的 URL 中检索所有的 js 文件
搜索字符串“sw.js”

（我也不确定该怎么做）

给定的数据会是这样的：

const sitesToCheck = {
    'www.site1.com',
    'www.site2.com',
    'www.site3.com',
}

【问题讨论】：

您拥有的服务器或任何外部服务器上的 URL？
在网页上，您可以在Application Pannel > Service Workers下查看Chrome Developer Tools下

标签： javascript node.js meteor service-worker

【解决方案1】：

如果您想在代码中执行此操作，您只能在与您要检查的工作人员相同的来源中执行此操作。在同一来源中，您可以使用 getRegistration(url)（它为您提供一个将解析为 undefined 或 URL 的 ServiceWorkerRegistration object 的承诺）或 getRegistrations()（它为您提供一个 @987654324 数组的承诺@)。例如：

navigator.serviceWorker.getRegistrations().then(registrations => {
    console.log(registrations);
});

【讨论】：

如果不是同源，我还能尝试什么？
@RNA：据我所知，没有，在网络浏览器中；出于某种原因，这些东西仅限于同一来源。不是，您可以从浏览器下载所有网站的 JavaScript 并检查对navigator.serviceWorker.register 的调用（这需要大量分析，处理诸如const sw = navigator.serviceWorker; sw.register(...); 之类的事情，或const foo = "ister"; navigator["ser" + "vice" + "Work" + "er"]["reg" + foo](...);)。
在我的情况下（Chrome 90），我看到registrations 对象被包装在一个数组中。如果当前 URL 的 service worker 未激活，则数组为空。

【解决方案2】：

正如Nicolas 所建议的，这项检查可以使用无头 Chrome 来完成。

下面是一个使用Puppeteer的例子：

'use strict'

const puppeteer = require('puppeteer');

(async() => {

  try {
    // Step 1: launch browser and open a new page.
    const browser = await puppeteer.launch()
    const page = await browser.newPage()

    // Step 2: Go to a URL and wait for a service worker to register.
    var url = 'https://web.dev/'
    await page.goto(url)
    const swTarget = await browser.waitForTarget(target => target.type() === 'service_worker')

    // Step 3a: If a service worker is registered, print URL of SW file to the console 
    if(swTarget) {
      console.log(swTarget._targetInfo['url'])
    }
    // Step 4: Done. Close.
    await browser.close()

  } catch (err) {
    // The process will timeout after 30s, if no service worker is registered
    console.error(err.message)
  }
})()

【讨论】：

【解决方案3】：

您可以查看 Service Worker Detector，这是一个 Chrome 扩展程序，它通过读取 navigator.serviceWorker.controller 属性来检测网站是否注册了 Service Worker。它也可能在 other browsers supporting Web Extensions 中工作，但它看起来还没有像这样分发。

但是，它需要在浏览器中运行脚本，这可能无法满足您的需求。您可以尝试使用可编写脚本的headless Chrome。

【讨论】：

感谢您的提示，我找到了一个名为 lighthouse(developers.google.com/web/tools/lighthouse) 的工具，我会尝试让它在我的代码中运行 :)
Lighthouse 确实是目前测试 Web 应用程序以实现 Web 开发最佳实践（包括性能和 PWA）的最佳工具。
是 navigator.serviceWorker.controller 检查 service worker 是否存在的可靠方法吗？