Skip to main content

Publishing messages to native

Web code can publish messages to native mobile code using the publish/subscribe interface (pub/sub) available with Portals.

In this step, you will publish messages from the web to trigger native mobile navigation.

note

Ensure you are serving the Expenses web app using the Portals CLI before proceeding.

Exploring the problem​

The Expenses web app can be viewed within a device or simulator, but pressing the back arrow doesn't navigate backwards. Currently, the only way to return to the dashboard view is to re-run the Portals CLI's serve command -- which is not an ideal user experience.

Portals within the Jobsync mobile application are configured to handle messages sent to the navigate:back topic and pop the view containing the Portal, navigating the application backward.

In the section below, you will use the Portals library to push messages from the web to native mobile code.

Publishing messages​

Given a topic and optional data payload, the publish() method within the Portals library publishes a message to native mobile code. In the Expenses web app, a method publishNavigateBackMessage belonging to the project's shared Portals code fires when the back button is pressed.

Use publish to fire a message to the navigate:back topic:

web/shared/portals/pub-sub.ts

_10
import { publish } from "@ionic/portals";
_10
_10
export const publishNavigateBackMessage = async () => {
_10
await publish({ topic: "navigate:back" });
_10
};

Re-implement publishNavigateBackMessage using the Portals library in a new file within web/shared/portals/ named pub-sub.ts.

web/shared/portals/pub-sub.ts

_10
import { publish } from "@ionic/portals";
_10
_10
type Messages = { topic: "navigate:back" };
_10
_10
export const publishNavigateBackMessage = async () => {
_10
await publish<Messages>({ topic: "navigate:back" });
_10
};

Type-safety can be added to the method signature of publish, preventing potential bugs which can be hard to troubleshoot between different tech stacks.

web/shared/portals/pub-sub.ts
web/shared/portals/index.ts

_16
/**
_16
* COMPLETE: See "Stubbing Initial Context for Development"
_16
*/
_16
import { resolveInitialContext } from "./initial-context";
_16
export { resolveInitialContext };
_16
_16
import { publishNavigateBackMessage } from "./pub-sub";
_16
export { publishNavigateBackMessage };
_16
_16
/**
_16
* TODO: See "Implementing a Capacitor Plugin"
_16
*/
_16
export const Analytics = {
_16
logAction: async (opts: any) => {},
_16
logScreen: async (opts: any) => {},
_16
};

Replace the existing implementation in web/shared/portals/index.ts and point to the new implementation.

Re-implement publishNavigateBackMessage using the Portals library in a new file within web/shared/portals/ named pub-sub.ts.

Type-safety can be added to the method signature of publish, preventing potential bugs which can be hard to troubleshoot between different tech stacks.

Replace the existing implementation in web/shared/portals/index.ts and point to the new implementation.

web/shared/portals/pub-sub.ts

_10
import { publish } from "@ionic/portals";
_10
_10
export const publishNavigateBackMessage = async () => {
_10
await publish({ topic: "navigate:back" });
_10
};

Save the code and press the back button. Observe that the native view containing the Expenses web app has popped from the native navigation stack. This behavior was implemented in the native mobile, firing when a message is sent to the navigate:back topic.

If you navigate to http://localhost:5173 and press the back button, nothing will happen. The expenses list view is the root of the Expenses web app, and has no navigation to go back to. For the purposes of this training, leaving the back button in when the web app runs within a web browser is suitable.

info

The back button is still visible when you visit http://localhost:5173 on a web browser. That's OK for the purposes of this training, but in a production scenario you may want to use platform-detection to hide visual elements depending on the platform the web app runs on, such as hiding the back button when the Expenses web app is running on a browser.

What's next​

By passing messages using Portals' pub/sub interface, you have triggered native navigation within the Jobsync mobile application. The pub/sub mechanism is ideal for simple use cases, such as telling native mobile apps to navigate. In the next step of this module, you will learn about Capacitor plugins, which communicate bi-directionally in a more structured manner suitable for complex use cases.

Contents