能否在ServiceWorker执行过程中发起Ajax POST请求？

首先，你遇到的问题核心在于Service Worker的运行环境和你使用的jQuery不兼容，并不是这个操作本身无法实现，而是你的实现方式有误。

为什么会出现"No Transport"错误？ #

Service Worker运行在一个独立的无DOM worker环境中，它没有window、document这类浏览器端的DOM对象。你手动模拟的假document和window不仅没必要，反而会干扰jQuery的正常工作——jQuery底层依赖DOM环境初始化XMLHttpRequest（XHR）对象，在没有真实DOM的情况下，它找不到合适的网络传输方式，所以抛出了"No Transport"错误。即使你设置了jQuery.support.cors = true，也解决不了根本问题，因为jQuery本身就不适合在Service Worker环境中使用。

正确的实现方式：使用原生fetch() API #

Service Worker标准原生支持fetch() API，它专门为worker这类非DOM环境设计，不需要依赖任何DOM对象，能直接发起网络请求。下面是修改后的代码示例：

self.addEventListener('push', function(event) {
  // 收到推送通知时发起POST请求到PHP接口
  event.waitUntil(
    fetch('/your-php-endpoint.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 如果需要身份验证，可以在这里添加Token等信息
      },
      body: JSON.stringify({
        // 传递给PHP的参数
        param1: 'value1',
        param2: 'value2'
      })
    })
    .then(function(response) {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json(); // 解析PHP返回的JSON数据
    })
    .then(function(data) {
      // 处理从数据库读取到的数据，比如展示通知
      return self.registration.showNotification('新数据', {
        body: `获取到的数据：${data.someField}`
      });
    })
    .catch(function(error) {
      console.error('请求失败:', error);
    })
  );
});

额外注意事项 #

• CORS配置：确保你的PHP后端正确配置了CORS响应头，允许Service Worker所在域名的请求。比如在PHP代码开头添加：

  header("Access-Control-Allow-Origin: *"); // 生产环境建议指定具体域名
  header("Access-Control-Allow-Methods: POST");
  header("Access-Control-Allow-Headers: Content-Type");
  

• Service Worker作用域：确保你的PHP接口地址在Service Worker的作用域范围内，或者后端允许跨域访问。
• 异步处理：在Service Worker的事件处理中，一定要用event.waitUntil()包裹异步操作，这样浏览器会等待请求完成再终止Service Worker。

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