DOCSEARCHbyAlgolia
Submit Docs

Damoa Webview Bridge

website·Indexed 30 days ago

https://damoa-webview-bridge-doc-dance.vercel.app

Documentation for the Damoa Webview Bridge, providing a messaging interface between a native application and a webview. It includes API references for AppToWeb and WebToApp functions such as likeProduct, updateToken, logEvent, and openLink, as well as shared interfaces and local storage keys.

Tokens
12.6K
Snippets
100
Records
152
Agent score
75%

What's inside Damoa Webview Bridge

  1. Overview of damoa-webview-bridge

    damoa-webview-bridge is a library used for data communication between an application and a web view. It provides several core features: type guards, the ability to check for backward compatibility/support for specific message versions, asynchronous message responses, and versioning management.

  3. Use the NotifyRefundAccountChangeToWebviewMessage interface

    The NotifyRefundAccountChangeToWebviewMessage interface is used to notify the webview about a refund account change. It inherits from BaseMessage and is identified by a specific kind value.
    interface NotifyRefundAccountChangeToWebviewMessage extends BaseMessage {
  kind: "notifyRefundAccountChangeToWebview";
  data?: unknown;
}

  5. Handle success and failure in AsyncMessage

    When implementing an AsyncMessage, use the onSuccess and onFailure properties to handle the lifecycle of the asynchronous request. onSuccess provides optional parameters returned by the bridge, while onFailure provides a DamoaBridgeErrorParams object containing the error details.
    const message: AsyncMessage = {
  kind: 'SOME_ACTION',
  data: { id: 123 },
  onSuccess: (params) => {
    console.log('Operation succeeded with params:', params);
  },
  onFailure: (reason) => {
    console.error('Operation failed:', reason);
  }
};

  7. Add a new Web-to-App message

    To add a new message type for communication from the webview to the native app, follow these three steps:

    1. Create a message definition file (e.g., /message/WebToApp/HapticFeedbackMessage.ts) defining the message interface, the builder function using WebToAppMessageBuilder, and a type guard function for filtering.
    2. Export the message and builder function from /packages/damoa-app-bridge/src/message.ts.
    3. Export the type guard/filter function from /packages/damoa-webview-bridge/src/filter.ts.
    // 1. Define the message in /message/WebToApp/HapticFeedbackMessage.ts
import { BaseMessage } from "../shared/model/BaseMessage"
import { WebToAppMessageBuilder } from "./utils/WebToAppMessageBuilder"
import { postWebToAppMessage } from "./utils/WebviewPostMessage"

export interface HapticFeedbackMessage extends BaseMessage {
    kind: 'hapticFeedback'
    data: {
        type: 'impactLight' | 'impactMedium' | 'impactHeavy'
    }
}

export const hapticFeedback = WebToAppMessageBuilder.build(
    (type: HapticFeedbackMessage['data']['type']) => (
        postWebToAppMessage({ kind: 'hapticFeedback', data: { type }})
    ),
    '1.81.0-0'
)

export const isHapticFeedbackMessage = (message: BaseMessage): message is HapticFeedbackMessage => (
    message.kind === 'hapticFeedback'
)

  8. Run damoa-webview-bridge documentation locally

    The documentation is built using TypeDoc and Docusaurus. To run the documentation site locally for previewing or editing, execute the following commands from the package root directory.
    yarn prepare-doc
yarn start-doc

  10. Document messages in damoa-webview-bridge

    To add documentation for messages, use the standard TypeDoc comment format. For developers using VS Code, custom snippets are available to simplify the creation of the following message types:

    • webToAppMessage
    • webToAppAsyncMessage
    • appToWebMessage