Skip to main content

miniapp-runtime - Mini-App Runtime

Runtime for managing lifecycle and loading of mini-apps in the host app.

Overview​

miniapp-runtime is responsible for:

  • Load mini-app bundles dynamically
  • Manage mini-app lifecycle (mount/unmount)
  • Handle bridge communication
  • Manage permissions
  • Cache and version control

MiniAppProvider​

import { MiniAppProvider } from '@54vie/miniapp-runtime';

function App() {
  return (
    <MiniAppProvider
      config={{
        cdnUrl: 'https://cdn.54vie.vn/mini-apps',
        cacheStrategy: 'cache-first',
        maxCacheSize: 100 * 1024 * 1024, // 100MB
        preloadApps: ['dashboard'],
        timeout: 30000,
        retryAttempts: 3,
      }}
    >
      <MainApp />
    </MiniAppProvider>
  );
}

serviceRouter​

Bridge for communication between mini-app and host:

import { serviceRouter } from '@54vie/miniapp-runtime';

// Register handler (in host)
serviceRouter.register('myService', {
  doSomething: async (params) => {
    return { result: 'success' };
  },
});

// Call from mini-app (via SDK)
const result = await serviceRouter.invoke('myService', 'doSomething', {
  param1: 'value',
});

Lifecycle Hooks​

import { useMiniAppLifecycle } from '@54vie/miniapp-runtime';

function MiniAppContainer({ appId }) {
  useMiniAppLifecycle(appId, {
    onLoad: () => console.log('Mini-app loaded'),
    onMount: () => console.log('Mini-app mounted'),
    onUnmount: () => console.log('Mini-app unmounted'),
    onError: (error) => console.error('Error:', error),
  });
}

Permission Manager​

import { permissionManager } from '@54vie/miniapp-runtime';

// Check permission
const hasStorage = await permissionManager.check('com.54vie.shopping', 'storage');

// Request permission
const granted = await permissionManager.request(
  'com.54vie.shopping',
  'camera',
  'Need camera for scanning products'
);

// Get all permissions for app
const permissions = permissionManager.getAppPermissions('com.54vie.shopping');

Bundle Loading​

import { loadRemote } from '@54vie/miniapp-runtime';

// Load mini-app component
const MiniApp = await loadRemote('dashboard/App');

// Render
<MiniApp {...props} />