Workbox

Question

使用 Workbox，我正在尝试处理 graphql。

有人知道为什么我从 NetworkOnly 收到这条错误消息吗？我在路由匹配器中返回 false，所以我不知道为什么 new NetworkOnly() 还在执行。这仅发生在离线模式下（无可用网络）。

The strategy could not generate a response for ... The underlying error is TypeError: Failed to fetch.

at NetworkOnly._handle (webpack://service-workers/./node_modules/workbox-strategies/NetworkOnly.js?:101:19) at async NetworkOnly._getResponse (webpack://service-workers/./node_modules/workbox-strategies/Strategy.js?:155:24)

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60 
});
 
const isGraphqlSubmitForm = async(event) => {
  const clonedRequest = event.request.clone();
  const body = await clonedRequest.json();

  if (body?.operationName === 'submitForm') {
    return true;
  }
  return false; // I MADE SURE THIS IS BEING RETURNED 
};
 
registerRoute(
  isGraphqlSubmitForm,
  new NetworkOnly({
    plugins: [bgSyncPlugin]
  }),
  'POST'
);

Answer 1

很抱歉，您看到这种行为是因为 truthiness of the return value from this function 用于确定路由是否匹配，并且 async 函数始终 returns a Promise，这是一个“真实”值。

如果您处于 Workbox 的开发模式，log message 会发出警告。

如果您可以在要匹配的请求中添加 header，那可能是同步触发路由的最简单方法，因为任何尝试访问请求 body 需要 async。如果做不到这一点，最简洁的方法就是将所有 GraphQL 请求与给定路由匹配，然后在该路由的处理程序内部，使用您需要的任何 async 逻辑来针对不同类型的流量触发不同的策略。

Workbox - NetworkOnly 执行，即使我 return false

Workbox - NetworkOnly executes even if I return false

service-worker

progressive-web-apps