Add New Hybrid Page

The following steps will guide you on how to add a new hybrid page in your app.

Step 1: Create a new Vue file

Create a new Vue file inside the /pages/hybrid folder, for example, pages/hybrid/message.vue.

Step 2: Fill the content

In the message.vue file, you will add the following code:

<template>
  <div>
    <button @click="sendMessage">Send a message</button>
    <div v-for="message in messages" :key="message">
      {{ message }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { definePageMeta } from "#imports";
import {
  listenFromPlatform,
  sendToPlatform,
} from "~/composables/hybrid/platformBridge";
import {
  eventManager,
  EVENT_ON_APP_BRIDGE_READY,
} from "~/composables/hybrid/eventManager";
import { isWebClient } from "~/config";
import { convertToJsonObject } from "~/helpers/jsonConvert";

definePageMeta({
  layout: "hybrid",
});

const messages = ref<string[]>([]);

function sendMessage() {
  sendToPlatform({
    eventName: "onSendMessage",
    payload: {
      message: "Hello from the web client",
    },
  });
}

function listenReceiveMessage() {
  listenFromPlatform({
    eventName: "doReceiveMessage",
    callback: (data) => {
      const parsedData = !isWebClient ? convertToJsonObject(data) : data;
      messages.value.push(parsedData?.message);
    },
  });
}

eventManager.on(EVENT_ON_APP_BRIDGE_READY, () => {
  listenReceiveMessage();
});
</script>

Step 3: Access the page

You can access the page by http://localhost:3000/hybrid/message.

Code Breakdown

Template

The template section defines the HTML structure of the component. It consists of two main parts: a button and a div.

1. Button

<button @click="sendMessage">Send a message</button>

The button element has a @click directive that is bound to the sendMessage function. When the button is clicked, the sendMessage function is triggered.

2. Div

<div v-for="message in messages" :key="message">
  {{ message }}
</div>

• The div element has a v-for directive that is used to loop over the messages in the messages array and display each message.
• The key attribute is set to message to ensure that Vue can keep track of the elements in the loop and re-render efficiently when there’s a change.

Script

The script section contains the JavaScript code for the component. It consists of several imports and functions that are used to implement the functionality.

1. Imports

import { ref } from "vue";
import { definePageMeta } from "#imports";
import {
  listenFromPlatform,
  sendToPlatform,
} from "~/composables/hybrid/platformBridge";
import {
  eventManager,
  EVENT_ON_APP_BRIDGE_READY,
} from "~/composables/hybrid/eventManager";
import { isWebClient } from "~/config";
import { convertToJsonObject } from "~/helpers/jsonConvert";

• ref from “vue”: This is a Vue helper function that is used to create reactive data.
• definePageMeta from “#imports”: This function is used to define the metadata for the page, such as the layout to be used.
• listenFromPlatform and sendToPlatform from “~/composables/hybrid/platformBridge”: These functions are used to listen to and send events to the platform.
• eventManager and EVENT_ON_APP_BRIDGE_READY from “~/composables/hybrid/eventManager”: eventManager is an instance of an event manager that is used to manage events in the hybrid environment, and EVENT_ON_APP_BRIDGE_READY is a constant that represents the event fired when the platform bridge is ready.
• isWebClient from “~/config”: This is a flag that indicates whether the current environment is a web client or not.
• convertToJsonObject from “~/helpers/jsonConvert”: This function is used to convert a string to a JSON object.

2. Reactive data

const messages = ref<string[]>([]);

• messages is an array of messages that is created using the ref function. It’s a reactive data source, which means that its value can be updated and any component that uses it will be re-rendered automatically.

3. sendMessage function

function sendMessage() {
  sendToPlatform({
    eventName: "onSendMessage",
    payload: {
      message: "Hello from the web client",
    },
  });
}

• The sendMessage function is used to send a message to the platform. It uses the sendToPlatform function to send the message to the platform. The eventName is set to onSendMessage and the payload is set to an object containing the message.

4. listenReceiveMessage function

function listenReceiveMessage() {
  listenFromPlatform({
    eventName: "doReceiveMessage",
    callback: (data) => {
      const parsedData = !isWebClient ? convertToJsonObject(data) : data;
      messages.value.push(parsedData?.message);
    },
  });
}

• The listenReceiveMessage function is used to listen to the doReceiveMessage event from the platform. It uses the listenFromPlatform function to listen to the event. When the event is fired, the callback function is triggered. The callback function receives the data sent by the platform and adds it to the messages array.

5. onAppBridgeReady event

eventManager.on(EVENT_ON_APP_BRIDGE_READY, () => {
  listenReceiveMessage();
});

• The onAppBridgeReady event is fired when the platform bridge is ready. The eventManager instance is used to listen to the event. When the event is fired, the callback function is triggered. The callback function calls the listenReceiveMessage function to listen to the doReceiveMessage event from the platform.