sonr/docs/guides/motr-usage.mdx

---
title: "Motor WASM Service Worker Usage"
description: "Comprehensive guide to using the Motor WASM service worker for secure browser-based DWN and Wallet APIs"
icon: "microchip"
sidebarTitle: "Motor WASM"
---

<Info>
  Motor is a WebAssembly service worker providing secure, client-side cryptographic operations and decentralized web node (DWN) capabilities.
</Info>

## Overview

Motor is a WebAssembly-powered service worker that enables:
- Secure client-side cryptographic operations
- Decentralized Web Node (DWN) APIs
- Cross-platform support for browsers and Node.js

<CardGroup cols={2}>
  <Card title="DWN API" icon="database">
    Create, read, update, and delete records with optional encryption
  </Card>
  <Card title="Wallet API" icon="wallet" color="#22863a">
    UCAN token generation, digital signatures, and verification
  </Card>
</CardGroup>

## Prerequisites

<Check>
- Node.js 20+ and pnpm
- Browser with Service Worker support
- HTTP/HTTPS server for WASM files
</Check>

## Installation

<CodeGroup>
```bash npm
npm install @sonr.io/es
```

```bash pnpm
pnpm add @sonr.io/es
```

```bash yarn
yarn add @sonr.io/es
```
</CodeGroup>

## Usage Examples

### Basic Initialization

<Tabs>
  <Tab title="Browser Auto-Detection">
    ```typescript
    import { createMotorPlugin } from '@sonr.io/es/client/motor';

    // Automatically detects browser vs Node.js environment
    const plugin = await createMotorPlugin();

    // Get issuer DID
    const issuer = await plugin.getIssuerDID();
    console.log('Issuer DID:', issuer.issuer_did);
    ```
  </Tab>

  <Tab title="Browser Service Worker">
    ```typescript
    import { createMotorPluginForBrowser } from '@sonr.io/es/client/motor';

    const plugin = await createMotorPluginForBrowser('/motor-worker', {
      auto_register_worker: true,
      worker_scope: '/',
      debug: true,
    });

    // Create UCAN origin token
    const tokenResponse = await plugin.newOriginToken({
      audience_did: 'did:sonr:audience123',
      attenuations: [{ can: ['sign', 'verify'], with: 'vault://my-vault' }],
    });
    ```
  </Tab>

  <Tab title="Node.js">
    ```typescript
    import { createMotorPluginForNode } from '@sonr.io/es/client/motor';

    const plugin = await createMotorPluginForNode('http://localhost:8080', {
      max_retries: 3,
      retry_delay: 1000,
      timeout: 5000,
      debug: true,
    });
    ```
  </Tab>
</Tabs>

### Record Operations

<CodeGroup>
```typescript DWN Create
const createResult = await plugin.createRecord({
  schema: 'https://schema.org/Person',
  data: JSON.stringify({ name: 'Alice Smith' }),
  is_encrypted: false,
});
```

```typescript DWN Read
const record = await plugin.readRecord({
  record_id: createResult.record_id,
});
```

```typescript DWN Update
await plugin.updateRecord({
  record_id: createResult.record_id,
  data: JSON.stringify({ name: 'Alice Johnson' }),
});
```

```typescript DWN Delete
const deleteResult = await plugin.deleteRecord({
  record_id: createResult.record_id,
});
```
</CodeGroup>

### Encrypted Records

```typescript
const sensitiveData = {
  ssn: '123-45-6789',
  medical_record: 'Confidential information',
};

const encryptedRecord = await plugin.createRecord({
  schema: 'https://schema.org/MedicalRecord',
  data: JSON.stringify(sensitiveData),
  is_encrypted: true, // Enable encryption
});

// Automatic decryption on read
const decryptedRecord = await plugin.readRecord({
  record_id: encryptedRecord.record_id,
});
```

## Deployment

<Tabs>
  <Tab title="Development">
    ```bash
    cd dist/wasm
    python3 -m http.server 8080
    # Access at http://localhost:8080/test.html
    ```
  </Tab>

  <Tab title="Production (Nginx)">
    ```nginx
    location /motor/ {
      alias /path/to/dist/wasm/;
      
      # CORS and MIME types
      add_header 'Access-Control-Allow-Origin' '*';
      
      location ~ \.wasm$ {
        add_header 'Content-Type' 'application/wasm';
      }
    }
    ```
  </Tab>

  <Tab title="CDN">
    ```html
    <script src="https://cdn.example.com/motor/wasm_exec.js"></script>
    <script>
      navigator.serviceWorker.register(
        'https://cdn.example.com/motor/motr-sw.js'
      );
    </script>
    ```
  </Tab>
</Tabs>

## Troubleshooting

<Accordion title="Common Issues">
  <Accordion.Panel title="Service Worker Not Registering">
    - Ensure HTTPS or localhost
    - Check browser console
    - Verify service worker file path
  </Accordion.Panel>

  <Accordion.Panel title="WASM Module Loading">
    - Check MIME type: `application/wasm`
    - Verify CORS headers
    - Match `wasm_exec.js` with Go version
  </Accordion.Panel>
</Accordion>

## Browser Compatibility

| Browser | Minimum Version | Support |
|---------|----------------|---------|
| Chrome  | 89+            | Full    |
| Firefox | 89+            | Full    |
| Safari  | 15.4+          | Good    |
| Edge    | 89+            | Full    |

<Warning>
  Requires HTTPS or localhost for service worker functionality
</Warning>

## Performance Tips

<Tip>
  - Use TinyGo for smaller WASM binaries
  - Enable browser caching
  - Lazy load Motor plugin
  - Limit service worker scope
</Tip>

## Support

- **GitHub**: [Issues](https://github.com/sonr-io/sonr/issues)
- **Docs**: [Motor WASM Documentation](https://docs.sonr.io/motor-wasm)
- **Discord**: [Sonr Community](https://discord.gg/sonr)