通过服务工作者消息事件引发的捕获例外

Question

我无法发现服务工作者的消息事件引发的异常。.

客户使用以下代码在SW上执行命令：

  import { messageSW } from "workbox-window";

  // .. code for Workbox initialization/registration omitted

  messageSW(registration?.active, { type: "SYNC" })
    .then((results) => {
      console.log("done");
    })
    .catch((e) => {
      console.error(e);
    });

在SW（sw.js）方面，我有以下代码：

self.addEventListener("message", async (event) => {
  if (requestType === "SYNC") {
    event.ports[0].postMessage(await longRunningTask());
  }
});

只要SW不抛出任何例外，该解决方案就可以了。这意味着在执行SW上的长期运行过程之后，客户端打印了“ 完成”消息。 如果抛出了例外，什么都没有返回。

我设法通过执行以下操作来解决问题：

self.addEventListener("message", async (event) => {
  if (requestType === "SYNC") {
    try {
      event.ports[0].postMessage(await longRunningTask());
    } catch (error) {
      event.ports[0].postMessage(error);
    }
  }
});

在这种情况下 - 结果总是返回，无论如何完成 “是印刷的，但是：

1. 我如何从服务工作者那里产生例外，以便客户可以抓住和处理？
2. 总的来说，很高兴听到我正在做的事情是否是一种适当的方法，即如何从客户中调用SW上的异步代码...

Answer 1

这是我自己的解决方案，最终使用：

在服务工作者端 - 助手方法：

async function replyToSenderAsync(event, task) {
  let isCanReply = event.ports && event.ports.length >= 0;
  try {
    const result = await task();
    if (isCanReply) {
      event.ports[0].postMessage({ error: null, message: result });
    }
  } catch (error) {
    if (isCanReply) {
      event.ports[0].postMessage({ error: error, message: null });
    }
  }
}

当抓取异常时，我们设置了错误属性。使用AS：

self.addEventListener("message", async (event) => {
  const requestType = event?.data?.type;
  if (requestType === "QUEUE_CLEAR") {
    await replyToSenderAsync(event, async () => await clearQueueAsync());
  }
});

在客户端请求包装器上：

function sendMessageToSWAsync(targetSW, messageType, message) {
  return new Promise(function (resolve, reject) {
    if (
      !isServiceWorkerSupported.value ||
      !isServiceWorkerRegistered.value ||
      !targetSW
    ) {
      reject(new Error("Unable to send the message to a service worker"));
    }

    try {
      messageSW(targetSW, { type: messageType, message: message })
        .then((messageResponse) => {
          if (!messageResponse) {
            reject(new Error("Service worker responsed with empty response"));
          } else {
            if (messageResponse.error) {
              reject(messageResponse.error);
            } else {
              resolve(messageResponse.message);
            }
          }
        })
        .catch((messageError) => {
          reject(messageError);
        });
    } catch (error) {
      reject(error);
    }
  });
}

魔术是读取错误属性并在情况下拒绝承诺（因此导致异常被抛弃）。使用为

try {
    let response = await sendMessageToSWAsync(registration?.active, "QUEUE_GET_ALL");
}
catch(error) {

}

sendMessageToSWAsync(registration?.active, "QUEUE_GET_ALL")
    .then((response) => {})
    .catch((error) => {})