How to keep running apollo subscription while capacitor app is on background?

I been developing a react.js chat application which works via websocket connection with apollo-client.It uses capacitor.js to create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS. In chat component, a subscription query starts works and listen new for new messages. The problem is that messages are not listening while the app is in the background. New messages starts loaded as soon as open app.I want to make it like whatsapp which load new messages while even app is on background.

Apollo client configuration

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

Component which subscription works

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,
    },
  });

Also capacitor has background plugin