如何用Node.js检测网站是否支持PWA功能？

一、识别自定义Service Worker的方法 #

• 解析页面所有JavaScript代码，定位navigator.serviceWorker.register()调用
  用cheerio提取<script>标签内容，或用acorn这类JS AST解析库精准查找注册语句，提取URL参数。示例代码：

  const acorn = require('acorn');
  const walk = require('acorn-walk');
  
  function extractSWUrls(jsCode) {
    const swUrls = [];
    try {
      const ast = acorn.parse(jsCode, { ecmaVersion: 'latest' });
      walk.simple(ast, {
        CallExpression(node) {
          if (node.callee.type === 'MemberExpression' &&
              node.callee.object.type === 'MemberExpression' &&
              node.callee.object.object.name === 'navigator' &&
              node.callee.object.property.name === 'serviceWorker' &&
              node.callee.property.name === 'register') {
            const urlArg = node.arguments[0];
            if (urlArg.type === 'Literal') {
              swUrls.push(urlArg.value);
            }
          }
        }
      });
    } catch (e) {
      // 处理压缩JS等解析错误
    }
    return swUrls;
  }
  

• 检查HTTP响应头的Service-Worker字段
  请求页面时查看headers['service-worker']，有些网站会通过这个响应头直接指定Service Worker地址。
• 尝试常见自定义路径
  批量请求/sw.js、/service-worker.js、/sw-*.js这类路径，验证返回状态码200且Content-Type为application/javascript。

二、Web Manifest的全面检测 #

• 除了解析<link rel="manifest">标签，还要验证：
  • 拼接相对路径为绝对URL后，请求返回的JSON是否包含name、start_url、display等必填字段
  • 页面是否存在theme-color元标签、apple-touch-icon系列标签（属于PWA优化项）

三、模拟浏览器环境（准确率最高） #

用puppeteer无头浏览器加载页面，直接调用浏览器原生API检测，能覆盖动态注册的Service Worker场景：

const puppeteer = require('puppeteer');

async function checkPWAStatus(url) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle2' });

  // 检测Service Worker状态
  const hasValidSW = await page.evaluate(async () => {
    const registrations = await navigator.serviceWorker.getRegistrations();
    return registrations.length > 0 || navigator.serviceWorker.controller !== null;
  });

  // 检测Manifest有效性
  const hasValidManifest = await page.evaluate(async () => {
    const manifestLink = document.querySelector('link[rel="manifest"]');
    if (!manifestLink) return false;
    try {
      const res = await fetch(manifestLink.href);
      if (!res.ok) return false;
      const manifest = await res.json();
      return !!manifest.name && !!manifest.start_url && !!manifest.display;
    } catch (e) {
      return false;
    }
  });

  await browser.close();
  return { hasValidServiceWorker: hasValidSW, hasValidManifest: hasValidManifest };
}

四、额外验证项 #

• 确认网站使用HTTPS（localhost除外，PWA强制要求HTTPS环境）
• 检查Service Worker的作用域是否覆盖网站核心访问路径

内容的提问来源于stack exchange，提问作者Guen