Basic Configuration

RelayApp frontend supports mainstream frameworks such as React and Vue, ensuring a good experience across various mobile devices. During development, if communication with RelayX is required, refer to the API interface descriptions.

Each RelayApp should have a unique icon named icon.png, with a recommended size of 192x192 pixels. After packaging, this icon should be placed in the project root directory to ensure the RelayApp icon displays correctly. The icon.png naming cannot be changed arbitrarily; if it is missing or named incorrectly, an exception will be prompted when publishing RelayApp.

Development must follow these project specifications:

1

File Size

Ensure each packaged file (including resource files) is smaller than 4MB, and the entire ZIP package size does not exceed 10MB, to avoid affecting RelayApp's publishing and updating capabilities. RelayX Network will continue to expand network performance to support larger RelayApps in the future.

2

File Naming

Each packaged file name can only contain letters (a-z, A-Z), numbers (0-9), underscores (_), hyphens (-), and dots (.), and must comply with this naming convention.

3

Resource Paths

Use relative paths when referencing local resources in the project, as absolute paths may cause resources to fail loading correctly.

4

Function Limitations

Features that download resources to local files are disabled in RelayX.

Notes

When using postMessage during frontend development, pay special attention:

1. Avoid Conflicts: When postMessage must be used in the project, add the noRelayAPI field in the postMessage parameters and set it to true, so that the frontend can use postMessage normally without conflicting with RelayApp API.

Correct usage:

postMessage.js

window.parent.postMessage({
  type: 'my-app-message',
  data: { /* your business data */ },
  noRelayAPI: true  // Must add this field
}, '*');

1. Message Listening: When listening for postMessage, you need to filter out RelayApp API messages. Normal RelayApp API response message structure is:

relay-api-response.json

{
  "code": 200,
  "cmd": "xxxx",
  "messageId": "0", 
  "result": {}
}

Recommended correct message listening method using unique message type identifiers:

message-listener.js

window.addEventListener('message', (event) => {
  const message = event.data;
  
  // Filter out RelayApp API messages
  if (message && typeof message === 'object' && 
      ('code' in message && 'cmd' in message && 'messageId' in message)) {
    return; // This is a RelayApp API return message, ignore processing
  }
  
  // Handle custom application messages
  if (message.type === 'my-app-message') {
    // Process your application message
  }
});

1. Important Reminders:

• Must include noRelayAPI: true in all custom postMessage

• When listening for messages, prioritize filtering out RelayApp API messages with code, cmd and messageId fields

• Recommend defining dedicated message type prefixes for your application, such as my-app-*