> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Native features

> How the bridge works, and what each native call does outside a shell.

Inside the cskn mobile, desktop and TV apps, your page can reach native features through a message bridge at `window.cskn.bridge`. The SDK wraps every message in a typed function and a React hook, so you never post raw messages yourself.

```tsx theme={null}
import { isAvailable, useHaptics } from '@cskn/sdk';

isAvailable(); // is there a shell around this page?

const haptics = useHaptics();
haptics.impact('medium');
```

The bridge is installed by the shell before your code runs. On TV, where the app runs in an iframe, the SDK installs a postMessage relay itself when the shell marks the URL; you do not need to do anything.

## Availability

The same code also runs in a plain browser, where there is no bridge. Every call returns at once there, in one of four ways:

| Behavior off-shell | Calls |
| - | - |
| **Browser fallback** | `capturePhoto` (file picker), `requestNotificationPermission` (Web Push), `setBadgeCount` / `getBadgeCount` (installed web app badge), passkeys (the page's own WebAuthn), `getPlatform`, `getLanguage`, deep links (current `location`, normal navigation) |
| **Resolves "not available"** | `openCamera`, `scanQRCode`, `openImagePicker`, `shareFile`, `shareContent` → `error: 'not_available'`; `authenticateBiometrics` → `success: false, error: 'not_available'`; `checkBiometricsAvailable` → `available: false`; `scheduleNotification` → `error: 'unsupported'` |
| **Resolves empty** | `storageGet`, `secureStorageGet`, `readFromClipboard` → `null`; `storageKeys` → `[]`; `shareOpen` → `false`; `getNotificationInbox` → no items |
| **Silent no-op** | header and app control, status and navigation bars, haptics, `storageSet` / `Remove` / `Clear`, `secureStorageSet` / `Remove`, `writeToClipboard`, notification cancel |

<Note>
  "Empty" and "not available" keep your code from hanging, but nothing is stored, read or shared. Where the feature matters in a browser, check `isAvailable()` and use a web alternative: `localStorage`, `navigator.clipboard`, `<input type="file">`, `navigator.share`.
</Note>

```tsx theme={null}
import { isAvailable, storageGet } from '@cskn/sdk';

async function loadDraft(): Promise<Draft | null> {
  if (isAvailable()) return storageGet('draft');
  const raw = localStorage.getItem('draft');
  return raw ? JSON.parse(raw) : null;
}
```

## Features

<CardGroup cols={3}>
  <Card title="App control" icon="window-maximize" href="/sdk/native/app-control">Native header, close the app</Card>
  <Card title="System bars" icon="bars" href="/sdk/native/system-bars">Status and navigation bar colors</Card>
  <Card title="Camera" icon="camera" href="/sdk/native/camera">Photos and video</Card>
  <Card title="QR scanner" icon="qrcode" href="/sdk/native/qr-scanner">QR and barcodes</Card>
  <Card title="Image picker" icon="images" href="/sdk/native/image-picker">Pick from the gallery</Card>
  <Card title="Clipboard" icon="clipboard" href="/sdk/native/clipboard">Read and write text</Card>
  <Card title="Storage" icon="box-archive" href="/sdk/native/storage">App-scoped and encrypted storage</Card>
  <Card title="Notifications" icon="bell" href="/sdk/native/notifications">Permission, local notifications, badge, inbox</Card>
  <Card title="Web Push" icon="globe" href="/sdk/native/web-push">Notifications in a browser</Card>
  <Card title="Share" icon="share-nodes" href="/sdk/native/share">System share sheet</Card>
  <Card title="Haptics" icon="hand-pointer" href="/sdk/native/haptics">Tactile feedback</Card>
  <Card title="Biometrics" icon="fingerprint" href="/sdk/native/biometrics">Face ID, Touch ID, fingerprint</Card>
  <Card title="Passkeys" icon="key" href="/sdk/native/passkeys">WebAuthn on every surface</Card>
  <Card title="Keyboard" icon="keyboard" href="/sdk/native/keyboard">Keyboard avoidance</Card>
  <Card title="Platform and language" icon="language" href="/sdk/native/platform-language">OS, host kind, UI language</Card>
  <Card title="Deep links" icon="link" href="/sdk/native/deep-links">Open apps and routes</Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.