@swiftbrowser/native 0.17.7 → 0.17.8

package/src/hostRequests.ts

@@ -0,0 +1,148 @@
+/**
+ * The host requests `@swiftbrowser/react` sends to the browser environment
+ * (`ShareLink`, `fileImporter`, the clipboard, a color chooser: the web
+ * renderer's `performHostRequest` with its `browserEnvironment`), answered by
+ * the native app instead: the bridge's `hostRequest(id, kind, json)` performs
+ * one with UIKit (a share sheet, the photo or document picker, the
+ * pasteboard, the color picker, `ASWebAuthenticationSession`), answering
+ * `__sbHostResponse(id, { value } | { error })`. `installHostEnvironment`
+ * fills the environment's gaps with these, leaving what the page has (the
+ * round trip runs in a browser with a share sheet of its own).
+ *
+ * `webAuthenticate` is the sign-in window apps open for OAuth: the system's
+ * sheet, resolving with the callback URL.
+ */
+
+import { objectURL, SimpleBlob, SimpleFile } from './blob';
+import type { NativeBridge } from './bridge';
+import { base64Decode, base64Encode } from './encoding';
+
+export type HostRequestBridge = Required<Pick<NativeBridge, 'hostRequest'>>;
+
+/** A file as it crosses the bridge: its name, MIME type and bytes (base64). */
+export interface BridgedFile {
+  name: string;
+  type: string;
+  data: string;
+}
+
+export interface WebAuthenticateOptions {
+  /** The scheme of the callback URL the sign-in ends with (`myapp` for `myapp://auth`); universal links need none. */
+  callbackScheme?: string;
+  /** Whether the session shares no cookies with the system browser. */
+  ephemeral?: boolean;
+}
+
+let bridge: HostRequestBridge | null = null;
+let nextId = 1;
+const pending = new Map<number, { resolve: (value: unknown) => void; reject: (error: Error) => void }>();
+
+/** Points the requests at the bridge (the runtime, once per install). */
+export function installHostRequests(native: HostRequestBridge): void {
+  bridge = native;
+}
+
+/** The bridge's `__sbHostResponse(id, result)`. */
+export function receiveHostResponse(id: number, result: string | { value?: unknown; error?: string }): void {
+  const waiting = pending.get(id);
+  if (!waiting) return;
+  pending.delete(id);
+  let parsed: { value?: unknown; error?: string };
+  try {
+    parsed = typeof result === 'string' ? (JSON.parse(result) as { value?: unknown; error?: string }) : result;
+  } catch {
+    waiting.reject(new Error('host: malformed response'));
+    return;
+  }
+  if (typeof parsed.error === 'string') {
+    const error = new Error(parsed.error);
+    if (parsed.error.startsWith('cancelled')) error.name = 'AbortError';
+    waiting.reject(error);
+  } else {
+    waiting.resolve(parsed.value);
+  }
+}
+
+/** Performs one request of `kind` with `params`; resolves with the host's value. */
+export function hostRequest<T = unknown>(kind: string, params: Record<string, unknown>): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    if (!bridge) {
+      reject(new Error(`unsupported: no native host for ${kind}`));
+      return;
+    }
+    const id = nextId++;
+    pending.set(id, { resolve: resolve as (value: unknown) => void, reject });
+    bridge.hostRequest(id, kind, JSON.stringify(params));
+  });
+}
+
+/** Forgets the bridge and the waiting requests, for tests. */
+export function resetHostRequests(): void {
+  bridge = null;
+  pending.clear();
+  nextId = 1;
+}
+
+async function bridgedFile(file: SimpleBlob & { name?: string }): Promise<BridgedFile> {
+  return { name: file.name ?? 'file', type: file.type, data: base64Encode(file.bytes()) };
+}
+
+function filesOf(value: unknown): SimpleFile[] {
+  const files = (value as { files?: BridgedFile[] } | undefined)?.files ?? [];
+  return files.map((file) => new SimpleFile([base64Decode(file.data)], file.name, { type: file.type }));
+}
+
+/**
+ * Opens the system's sign-in sheet at `url` and resolves with the callback
+ * URL it ends with; rejects with an `AbortError` when the viewer closes it.
+ */
+export async function webAuthenticate(url: string, options: WebAuthenticateOptions = {}): Promise<string> {
+  const params: Record<string, unknown> = { action: 'start', url };
+  if (options.callbackScheme) params['callbackScheme'] = options.callbackScheme;
+  if (options.ephemeral !== undefined) params['ephemeral'] = options.ephemeral;
+  const result = await hostRequest<{ url?: string }>('webAuth', params);
+  if (typeof result?.url !== 'string') throw new Error('webAuth: the sign-in ended without a URL');
+  return result.url;
+}
+
+/** The environment fields the host answers, shaped as the web renderer's `HostRequestEnvironment`. */
+export function nativeHostEnvironment(): Record<string, unknown> {
+  return {
+    share: async (data: { title?: string; text?: string; url?: string; files?: SimpleFile[] }): Promise<void> => {
+      const params: Record<string, unknown> = {};
+      if (data.title) params['title'] = data.title;
+      if (data.text) params['text'] = data.text;
+      if (data.url) params['url'] = data.url;
+      if (data.files?.length) params['files'] = await Promise.all(data.files.map(bridgedFile));
+      const result = await hostRequest<{ outcome?: string }>('share', params);
+      if (result?.outcome === 'cancelled') {
+        const error = new Error('cancelled: the viewer closed the share sheet');
+        error.name = 'AbortError';
+        throw error;
+      }
+    },
+    canShare: () => true,
+    download: (blob: SimpleBlob, filename: string): void => {
+      void hostRequest('share', { files: [{ name: filename, type: blob.type, data: base64Encode(blob.bytes()) }] }).catch(() => undefined);
+    },
+    pickFiles: async (options: { accept: string; multiple: boolean }): Promise<SimpleFile[]> => filesOf(await hostRequest('pickFiles', { accept: options.accept, multiple: options.multiple })),
+    objectURL: (file: SimpleBlob): string => objectURL(file),
+    clipboard: {
+      writeText: (text: string): Promise<void> => hostRequest('clipboard', { action: 'write', text }).then(() => undefined),
+      writeImage: async (png: Promise<SimpleBlob>): Promise<void> => {
+        const file = await png;
+        await hostRequest('clipboard', { action: 'write', files: [{ name: 'image.png', type: file.type || 'image/png', data: base64Encode(file.bytes()) }] });
+      },
+      readText: async (): Promise<string> => (await hostRequest<{ text?: string }>('clipboard', { action: 'readText' }))?.text ?? '',
+    },
+    pickColor: async (color: string): Promise<string | null> => (await hostRequest<{ color?: string }>('pickColor', { color }))?.color ?? null,
+  };
+}
+
+/** Fills what `environment` lacks with the host's answers; what the page has stays. */
+export function installHostEnvironment(environment: Record<string, unknown>): void {
+  if (!bridge) return;
+  for (const [key, value] of Object.entries(nativeHostEnvironment())) {
+    if (environment[key] === undefined) environment[key] = value;
+  }
+}

package/src/index.ts

@@ -17,7 +17,14 @@ export { installRuntime, type InstallOptions } from './runtime';
 export { nativeBridge, launchArguments, type NativeBridge, type NativeFetchRequest, type NativeFetchResult, type WorkerEngine } from './bridge';
 export { SimpleHeaders, SimpleRequest, SimpleResponse, SimpleAbortController, SimpleAbortSignal, createFetch } from './fetch';
 export { SimpleURL, SimpleURLSearchParams } from './url';
+export { SimpleBlob, SimpleFile, SimpleFormData, encodeMultipart, objectURL } from './blob';
+export { NativeWebSocket, type NativeWebSocketEvent } from './webSocket';
+export { createSubtleCrypto } from './subtle';
+export { matchMedia, updateMediaEnvironment, type MediaEnvironment } from './matchMedia';
+export { hostRequest, webAuthenticate, nativeHostEnvironment, installHostEnvironment, type WebAuthenticateOptions, type BridgedFile } from './hostRequests';
+export { secureStorage, createSecureStorage, type SecureStorage } from './secureStorage';
 export { SimpleTextEncoder, SimpleTextDecoder, base64Encode, base64Decode, utf8Encode, utf8Decode } from './encoding';
 export { createWorker, NativeWorker, encodeMessage, decodeMessage, workerName, type NativeWorkerOptions, type WorkerLike, type WorkerMessageEvent, type WorkerErrorEvent } from './worker';
 export { onOpenURL } from './openURL';
+export { onNotification, registerForPush, type NotificationEvent, type NativeNotificationOptions, type RegisterForPushOptions } from './notifications';
 export { createMediaSession, NativeMediaMetadata, type NativeMediaSession, type MediaMetadataInit, type MediaActionDetails, type MediaActionHandler, type MediaPositionState } from './mediaSession';

package/src/matchMedia.ts

@@ -0,0 +1,79 @@
+/**
+ * `matchMedia` for the native app: `(prefers-color-scheme: dark)` and
+ * `light` follow the color scheme the host sends with the environment
+ * (run.ts hands it over), `(prefers-reduced-motion: reduce)` the host's
+ * accessibility setting when it sends one; every other query matches
+ * nothing. Listeners hear a change when the environment does.
+ */
+
+export interface MediaQueryListLike {
+  readonly media: string;
+  readonly matches: boolean;
+  onchange: ((event: { matches: boolean; media: string }) => void) | null;
+  addEventListener(type: 'change', listener: (event: { matches: boolean; media: string }) => void): void;
+  removeEventListener(type: 'change', listener: (event: { matches: boolean; media: string }) => void): void;
+  /** The older names. */
+  addListener(listener: (event: { matches: boolean; media: string }) => void): void;
+  removeListener(listener: (event: { matches: boolean; media: string }) => void): void;
+}
+
+export interface MediaEnvironment {
+  colorScheme?: 'light' | 'dark';
+  reducedMotion?: boolean;
+}
+
+type Listener = (event: { matches: boolean; media: string }) => void;
+
+let environment: MediaEnvironment = {};
+const lists = new Set<{ media: string; matches: boolean; listeners: Set<Listener>; onchange: Listener | null }>();
+
+function evaluate(query: string): boolean {
+  const normalized = query.trim().toLowerCase().replace(/\s+/g, '');
+  if (normalized === '(prefers-color-scheme:dark)') return environment.colorScheme === 'dark';
+  if (normalized === '(prefers-color-scheme:light)') return environment.colorScheme !== 'dark';
+  if (normalized === '(prefers-reduced-motion:reduce)') return environment.reducedMotion === true;
+  if (normalized === '(prefers-reduced-motion:no-preference)') return environment.reducedMotion !== true;
+  return false;
+}
+
+/** The runtime's `matchMedia(query)`. */
+export function matchMedia(query: string): MediaQueryListLike {
+  const media = String(query);
+  const state = { media, matches: evaluate(media), listeners: new Set<Listener>(), onchange: null as Listener | null };
+  lists.add(state);
+  return {
+    media,
+    get matches() {
+      return state.matches;
+    },
+    get onchange() {
+      return state.onchange;
+    },
+    set onchange(listener) {
+      state.onchange = listener;
+    },
+    addEventListener: (_type, listener) => void state.listeners.add(listener),
+    removeEventListener: (_type, listener) => void state.listeners.delete(listener),
+    addListener: (listener) => void state.listeners.add(listener),
+    removeListener: (listener) => void state.listeners.delete(listener),
+  };
+}
+
+/** What the host sent with the environment; lists whose answer changed tell their listeners. */
+export function updateMediaEnvironment(next: MediaEnvironment): void {
+  environment = { ...environment, ...next };
+  for (const state of lists) {
+    const matches = evaluate(state.media);
+    if (matches === state.matches) continue;
+    state.matches = matches;
+    const event = { matches, media: state.media };
+    state.onchange?.(event);
+    for (const listener of state.listeners) listener(event);
+  }
+}
+
+/** Forgets the environment and the lists, for tests. */
+export function resetMediaEnvironment(): void {
+  environment = {};
+  lists.clear();
+}

package/src/notifications.ts

@@ -0,0 +1,317 @@
+/**
+ * Notifications in the native app: the browser's `Notification` (the
+ * permission, local notifications and their clicks) and `navigator.setAppBadge`
+ * over the host's UserNotifications (Native/Sources/SwiftBrowserNative/Host/NotificationBridge.swift),
+ * and remote notifications: `registerForPush` resolves with the device token
+ * (APNs, as hex) and `onNotification` delivers what the viewer opened and what
+ * arrived while the app is open.
+ *
+ * ```ts
+ * const token = await registerForPush();
+ * await fetch('/api/devices', { method: 'POST', body: JSON.stringify({ token }) });
+ * useEffect(() => onNotification((n) => { if (n.event === 'opened') show(n.data.postId); }), []);
+ * ```
+ *
+ * In the page (the round trip, or any browser) the host has no bridge for
+ * these: `Notification` is the browser's own, and `registerForPush` subscribes
+ * to Web Push through the site's service worker (`sw.js`, which the web
+ * renderer ships: docs/ops-protocol.md, "Push notifications") with the
+ * `applicationServerKey` given, resolving with the subscription's JSON as
+ * the token; the worker's messages become `onNotification` events. A server
+ * sends to both with one payload: APNs' (`aps.alert`, `aps.badge`), which
+ * the worker reads too.
+ */
+
+import type { NativeBridge } from './bridge';
+
+export type NotificationPermissionState = 'default' | 'granted' | 'denied';
+
+/** What the viewer did with a notification, or one that arrived while the app is open. */
+export interface NotificationEvent {
+  event: 'opened' | 'received';
+  /** Whether it came from the push service. */
+  remote: boolean;
+  /** The notification's identifier (`tag`, or the push payload's `id`). */
+  id: string;
+  title: string;
+  body: string;
+  /** A push's payload, or what `new Notification(title, { data })` gave. */
+  data: Record<string, unknown>;
+  /** `opened`: the action the viewer chose, empty for the notification itself. */
+  action?: string;
+}
+
+export interface NativeNotificationOptions {
+  body?: string;
+  /** The notification's identifier: a later one with the same tag replaces it. */
+  tag?: string;
+  data?: unknown;
+  silent?: boolean;
+  /** The app badge to set with it. */
+  badge?: number;
+}
+
+export interface RegisterForPushOptions {
+  /** The Web Push application server key (the server's VAPID public key, base64url), for the page. */
+  applicationServerKey?: string;
+}
+
+type Listener = (notification: NotificationEvent) => void;
+
+/** The message types the web renderer's service worker posts (Web/public/sw.js). */
+const PUSH_MESSAGE = 'swiftbrowser:push';
+const CLICK_MESSAGE = 'swiftbrowser:notificationclick';
+
+/** The bridge functions notifications need. */
+export type NotificationBridge = Pick<NativeBridge, 'notificationsReady' | 'notificationPermission' | 'notificationShow' | 'notificationClose' | 'setBadge' | 'pushRegister'>;
+
+export interface NotificationGlobals {
+  Notification: NativeNotificationClass;
+  __sbNotificationPermission: (id: number, permission: NotificationPermissionState) => void;
+  __sbPushRegistered: (id: number, result: { token?: string; error?: string }) => void;
+  __sbNotification: (json: string) => void;
+  /** `navigator.setAppBadge` and `clearAppBadge`. */
+  setAppBadge: (count?: number) => Promise<void>;
+  clearAppBadge: () => Promise<void>;
+  /** The native `registerForPush`. */
+  registerForPush: (options?: RegisterForPushOptions) => Promise<string>;
+}
+
+export interface NativeNotificationClass {
+  new (title: string, options?: NativeNotificationOptions): NativeNotificationInstance;
+  readonly permission: NotificationPermissionState;
+  requestPermission(): Promise<NotificationPermissionState>;
+}
+
+export interface NativeNotificationInstance {
+  readonly title: string;
+  readonly body: string;
+  readonly tag: string;
+  readonly data: unknown;
+  onclick: ((event: { notification: NativeNotificationInstance; action: string }) => void) | null;
+  close(): void;
+}
+
+const listeners = new Set<Listener>();
+let pending: NotificationEvent[] = [];
+/** Where the events come from once installed: the bridge, or the page's service worker. */
+let installed: 'native' | 'page' | null = null;
+let nativeRegister: ((options?: RegisterForPushOptions) => Promise<string>) | null = null;
+
+/**
+ * Listens for notifications the viewer opened and ones that arrived while
+ * the app is open; returns what stops listening. Events before any listener
+ * (a tap that launched the app) wait for the first one.
+ */
+export function onNotification(listener: Listener): () => void {
+  listeners.add(listener);
+  if (installed === null && typeof navigator !== 'undefined') listenToPage();
+  if (pending.length > 0) {
+    const events = pending;
+    pending = [];
+    for (const event of events) listener(event);
+  }
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** The runtime's `__sbNotification(json)`, and what the page's worker messages become. */
+export function receiveNotification(event: NotificationEvent): void {
+  if (listeners.size === 0) {
+    pending.push(event);
+    return;
+  }
+  for (const listener of listeners) listener(event);
+}
+
+/**
+ * Registers for remote notifications and resolves with the device token:
+ * APNs' as hex in the native app, the Web Push subscription's JSON in the
+ * page (which needs `applicationServerKey`). Rejects with the reason the
+ * system or the browser refused.
+ */
+export function registerForPush(options: RegisterForPushOptions = {}): Promise<string> {
+  if (nativeRegister) return nativeRegister(options);
+  return registerForWebPush(options);
+}
+
+/** Resets the listeners and the delivery source, for tests. */
+export function resetNotifications(): void {
+  listeners.clear();
+  pending = [];
+  installed = null;
+  nativeRegister = null;
+}
+
+// MARK: The native app
+
+/** The globals for a host with the notification bridge. */
+export function createNotificationGlobals(native: NotificationBridge): NotificationGlobals {
+  installed = 'native';
+  let permission: NotificationPermissionState = 'default';
+  let nextId = 1;
+  const permissionWaits = new Map<number, (permission: NotificationPermissionState) => void>();
+  const registrations = new Map<number, { resolve: (token: string) => void; reject: (error: Error) => void }>();
+  const open = new Map<string, NativeNotification>();
+
+  const askPermission = (request: boolean): Promise<NotificationPermissionState> =>
+    new Promise((resolve) => {
+      const id = nextId++;
+      permissionWaits.set(id, resolve);
+      native.notificationPermission?.(id, request);
+    });
+
+  class NativeNotification implements NativeNotificationInstance {
+    static get permission(): NotificationPermissionState {
+      return permission;
+    }
+
+    static requestPermission(): Promise<NotificationPermissionState> {
+      return askPermission(true);
+    }
+
+    readonly title: string;
+    readonly body: string;
+    readonly tag: string;
+    readonly data: unknown;
+    onclick: NativeNotificationInstance['onclick'] = null;
+
+    constructor(title: string, options: NativeNotificationOptions = {}) {
+      this.title = String(title);
+      this.body = options.body ?? '';
+      this.tag = options.tag ?? `notification-${nextId++}`;
+      this.data = options.data;
+      const show: Record<string, unknown> = { id: this.tag, title: this.title, body: this.body, silent: options.silent ?? false };
+      if (options.badge !== undefined) show['badge'] = options.badge;
+      if (options.data !== undefined && typeof options.data === 'object' && options.data !== null) show['data'] = options.data;
+      const problem = native.notificationShow?.(JSON.stringify(show));
+      if (problem) throw new TypeError(problem);
+      open.set(this.tag, this);
+    }
+
+    close(): void {
+      if (open.get(this.tag) === this) open.delete(this.tag);
+      native.notificationClose?.(JSON.stringify([this.tag]));
+    }
+  }
+
+  const setAppBadge = async (count = 0): Promise<void> => {
+    native.setBadge?.(Number.isFinite(count) ? Math.max(0, Math.floor(count)) : 0);
+  };
+
+  nativeRegister = (options = {}) =>
+    new Promise<string>((resolve, reject) => {
+      const id = nextId++;
+      registrations.set(id, { resolve, reject });
+      native.pushRegister?.(id, options.applicationServerKey);
+    });
+
+  // The permission as it stands, so `Notification.permission` reads right
+  // from the first render; and the app listens, so what came before arrives.
+  void askPermission(false);
+  native.notificationsReady?.();
+
+  return {
+    Notification: NativeNotification,
+    __sbNotificationPermission: (id, state) => {
+      permission = state;
+      const resolve = permissionWaits.get(id);
+      permissionWaits.delete(id);
+      resolve?.(state);
+    },
+    __sbPushRegistered: (id, result) => {
+      const registration = registrations.get(id);
+      registrations.delete(id);
+      if (!registration) return;
+      if (typeof result.token === 'string') registration.resolve(result.token);
+      else registration.reject(new Error(result.error ?? 'push: registration failed'));
+    },
+    __sbNotification: (json) => {
+      let event: NotificationEvent;
+      try {
+        event = JSON.parse(json) as NotificationEvent;
+      } catch {
+        return;
+      }
+      if (event.event === 'opened') {
+        const notification = open.get(event.id);
+        if (notification) {
+          open.delete(event.id);
+          notification.onclick?.({ notification, action: event.action ?? '' });
+        }
+      }
+      receiveNotification(event);
+    },
+    setAppBadge,
+    clearAppBadge: () => setAppBadge(0),
+    registerForPush: nativeRegister,
+  };
+}
+
+// MARK: The page
+
+/** The event a service worker message carries (Web/src/notifications.ts), or null. */
+export function notificationEventOf(data: unknown): NotificationEvent | null {
+  if (typeof data !== 'object' || data === null) return null;
+  const message = data as { type?: unknown; payload?: unknown; action?: unknown };
+  if (message.type !== PUSH_MESSAGE && message.type !== CLICK_MESSAGE) return null;
+  const payload = typeof message.payload === 'object' && message.payload !== null ? (message.payload as Record<string, unknown>) : {};
+  const aps = typeof payload['aps'] === 'object' && payload['aps'] !== null ? (payload['aps'] as Record<string, unknown>) : {};
+  const alert = typeof aps['alert'] === 'object' && aps['alert'] !== null ? (aps['alert'] as Record<string, unknown>) : {};
+  const text = (value: unknown): string | undefined => (typeof value === 'string' ? value : undefined);
+  const event: NotificationEvent = {
+    event: message.type === CLICK_MESSAGE ? 'opened' : 'received',
+    remote: true,
+    id: text(payload['id']) ?? text(payload['tag']) ?? '',
+    title: text(payload['title']) ?? text(alert['title']) ?? '',
+    body: text(payload['body']) ?? text(alert['body']) ?? text(aps['alert']) ?? '',
+    data: payload,
+  };
+  if (message.type === CLICK_MESSAGE) event.action = typeof message.action === 'string' ? message.action : '';
+  return event;
+}
+
+function listenToPage(): void {
+  installed = 'page';
+  const container = navigator.serviceWorker;
+  if (!container || typeof container.addEventListener !== 'function') return;
+  container.addEventListener('message', (message: MessageEvent) => {
+    const event = notificationEventOf(message.data);
+    if (event) receiveNotification(event);
+  });
+}
+
+/** A VAPID public key (base64url) as the bytes `subscribe` takes. */
+function keyBytes(key: string): Uint8Array<ArrayBuffer> {
+  const base64 = key.replace(/-/g, '+').replace(/_/g, '/');
+  const binary = atob(base64 + '='.repeat((4 - (base64.length % 4)) % 4));
+  const bytes = new Uint8Array(new ArrayBuffer(binary.length));
+  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}
+
+async function registerForWebPush(options: RegisterForPushOptions): Promise<string> {
+  if (typeof navigator === 'undefined' || !navigator.serviceWorker || typeof PushManager === 'undefined') {
+    throw new Error('push: this browser has no push service');
+  }
+  if (!options.applicationServerKey) throw new Error('push: no applicationServerKey');
+  if (typeof Notification !== 'undefined' && Notification.permission === 'default') await Notification.requestPermission();
+  if (typeof Notification !== 'undefined' && Notification.permission !== 'granted') throw new Error('push: notifications are not allowed');
+  if (installed === null) listenToPage();
+  const scope = new URL('./', typeof document !== 'undefined' ? document.baseURI : location.href).href;
+  const existing = await navigator.serviceWorker.getRegistration(scope);
+  const registration = existing?.active && existing.scope === scope ? existing : await navigator.serviceWorker.register(new URL('sw.js', scope).href, { scope });
+  await navigator.serviceWorker.ready;
+  const init: PushSubscriptionOptionsInit = { userVisibleOnly: true, applicationServerKey: keyBytes(options.applicationServerKey) };
+  const current = await registration.pushManager.getSubscription();
+  let subscription: PushSubscription;
+  try {
+    subscription = current ?? (await registration.pushManager.subscribe(init));
+  } catch (error) {
+    if (!current) throw error;
+    await current.unsubscribe().catch(() => undefined);
+    subscription = await registration.pushManager.subscribe(init);
+  }
+  return JSON.stringify(subscription.toJSON());
+}

package/src/run.ts

@@ -11,7 +11,10 @@
 import { createSwiftUIRoot, type SwiftUIRoot } from '@swiftbrowser/react';
 import type { Op, RendererEvent } from '@swiftbrowser/web/src/protocol';
 import type { ReactNode } from 'react';
+import { browserEnvironment } from '@swiftbrowser/web/src/hostRequests';
 import { nativeBridge, type NativeBridge } from './bridge';
+import { installHostEnvironment } from './hostRequests';
+import { updateMediaEnvironment } from './matchMedia';
 
 export interface RunOptions {
   /** The bridge to render through; the global `__sbNative` by default. */
@@ -41,6 +44,9 @@ export function run(element: ReactNode, options: RunOptions = {}): Running {
   const native = options.native ?? nativeBridge();
   if (!native) throw new Error('run(): no native bridge (__sbNative); this entry runs inside a SwiftBrowser Native app');
   const report = options.onError ?? ((error: unknown) => native.log('error', error instanceof Error ? (error.stack ?? error.message) : String(error)));
+  // What `ShareLink`, `fileImporter` and the clipboard ask the browser for,
+  // answered by the host where the page has nothing (hostRequests.ts).
+  installHostEnvironment(browserEnvironment as unknown as Record<string, unknown>);
 
   if (current) {
     // Fast Refresh (devBuild.ts): the app bundle was evaluated again. Its
@@ -68,7 +74,10 @@ export function run(element: ReactNode, options: RunOptions = {}): Running {
       if (parsed.type === 'environment') {
         const fields = parsed as EnvironmentFields;
         const next: Partial<{ colorScheme: 'light' | 'dark'; dynamicTypeSize: never; horizontalSizeClass: 'compact' | 'regular' }> = {};
-        if (fields.colorScheme) next.colorScheme = fields.colorScheme;
+        if (fields.colorScheme) {
+          next.colorScheme = fields.colorScheme;
+          updateMediaEnvironment({ colorScheme: fields.colorScheme });
+        }
         if (fields.dynamicTypeSize) (next as Record<string, unknown>)['dynamicTypeSize'] = fields.dynamicTypeSize;
         if (fields.horizontalSizeClass) next.horizontalSizeClass = fields.horizontalSizeClass;
         if (Object.keys(next).length > 0) root.setEnvironment(next);