如何在电容器应用程序处于后台时继续运行阿波罗订阅？答案

【问题标题】：How to keep running apollo subscription while capacitor app is on background?如何在电容器应用程序处于后台时继续运行阿波罗订阅？
【发布时间】：2022-07-22 13:45:07
【问题描述】：

我一直在开发一个 react.js 聊天应用程序，它通过 websocket 与 apollo-client 连接工作。它使用 capacitor.js 创建跨平台的 iOS、Android 和带有 JavaScript、HTML 和 CSS 的渐进式 Web 应用程序。在聊天组件中，订阅查询开始工作并收听新消息。问题是应用程序在后台时没有收听消息。新消息在打开应用程序后立即开始加载。我想让它像 whatsapp 一样即使应用程序在后台也加载新消息。

Apollo 客户端配置

const wsLink = process.browser
  ? new SubscriptionClient(WEBSOCKET_URL, {
      reconnect: true,
      connectionParams: () => ({
        headers: {
          authorization: `Bearer ${readLocalStorage('id_token')}`,
          'x-hasura-admin-secret':
            'xxxx',
        },
      }),
    })
  : null;

订阅工作的组件

const onSubscriptionData = useCallback(
    ({ subscriptionData: { data } }: OnSubscriptionDataOptions<any>) => {
      if (selectedChatId.current) {
        setMessages([...(data.conversation || {})]);
        markAsRead();
      }
    },
    [selectedChatId.current]
  );

  const { loading: messagesLoading } = useSubscription(MESSAGE_DETAIL_SUBSCRIPTION, {
    onSubscriptionData,
    variables: {
      chat_thread_id: selectedChatId,
      user_id: user_id,
    },
  });

还有电容有background plugin

【问题讨论】：

标签： reactjs graphql apollo capacitor

【解决方案1】：

我认为您需要的是推送通知 (@capacitor/push_notifications)。

当您的服务器中发生订阅（例如新消息）时，您会向您的设备发送推送通知。推送通知将显示在设备中，当您单击/打开应用程序时，您可以从服务器获取新数据。

【讨论】：