@anapaya/webscion-poc

Proof-of-concept npm package that establishes the architecture for the future WebScion SDK, the a browser-based SCION networking stack.

Architecture

┌─────────────────────────────────────────────────────┐
│  App (Angular/React/Vue/Svelte/Vanilla)             │
│    ↓ HTTP client integration                         │
│  ScionStack.fetch()                                 │
│    ↓ postMessage                                    |
│  ┌────────────────────────────────────────────────┐ │
│  │  Web Worker                                    │ │
│  │                                                │ │
│  │  Dispatches original request via scion         │ │
│  │  (not yet implemented)                         │ │
│  └────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

In a future iteration, the webworker will select an appropriate path for the request and dispatch it via the SCION network.

Installation

npm install @anapaya/webscion-poc

Note: Some imports use a subpath, for example @anapaya/webscion-poc/angular. If TypeScript can’t resolve that in your project, set moduleResolution to "bundler" (recommended) or "node16"/"nodenext".

Usage

Important: Every integration requires Web Worker setup. ScionStack always needs scion-worker.js to be served at runtime. If the worker URL is not reachable, requests routed through ScionStack will fail.

Use ScionStack with one of the integrations below.

Angular: HTTP Interceptor

Register the SCION interceptor in your app.config.ts. It will intercept outgoing HttpClient requests matching the match predicate and route them through the SCION stack:

import { provideHttpClient, withInterceptors } from "@angular/common/http";
import { ScionStack } from "@anapaya/webscion-poc";
import { createScionInterceptorFn } from "@anapaya/webscion-poc/angular";

const stack = new ScionStack("scion-worker.js");
const scionInterceptor = createScionInterceptorFn({
  stack,
  match: (req) => req.url.startsWith("https://scion-enabled.example.com/"),
});

export const appConfig = {
  providers: [
    provideHttpClient(withInterceptors([scionInterceptor])),
  ],
};

This integration requires the Web Worker setup described below.

Explicit Guarded Fetch Client

Use stack.fetch() directly at the call site:

import { ScionStack } from "@anapaya/webscion-poc";

const stack = new ScionStack("scion-worker.js");
const guardedFetch = stack.fetch();

await guardedFetch("/api/echo", {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({ msg: "hello" }),
});

This integration requires the Web Worker setup described below.

Global Fetch Interceptor

Patch globalThis.fetch and scope interception with match:

import { ScionStack } from "@anapaya/webscion-poc";
import { installScionFetchInterceptor } from "@anapaya/webscion-poc/interceptors";

const uninstall = installScionFetchInterceptor({
  stack: new ScionStack("scion-worker.js"),
  match: (request) => new URL(request.url).pathname.startsWith("/api/"),
});

// call uninstall() when needed

This integration requires the Web Worker setup described below.

Axios Interceptor Integration

Use Axios with a SCION-backed interceptor integration:

import axios from "axios";
import { ScionStack } from "@anapaya/webscion-poc";
import { createScionAxiosAdapter } from "@anapaya/webscion-poc/axios";

const client = axios.create({
  adapter: createScionAxiosAdapter({
    stack: new ScionStack("scion-worker.js"),
    match: (config) => config.url?.startsWith("/api/") ?? false,
  }),
});

This integration requires the Web Worker setup described below.

Web Worker Setup (Any Framework/Bundler)

The ScionStack offloads request processing to a web worker. The worker file is shipped with the package and must be made available as a static asset in your app.

Your framework/bundler must expose the worker URL you pass to new ScionStack(workerUrl). The exact mechanism depends on your setup:

• Angular: add worker asset in angular.json (assets).
• Vite/Webpack/Rollup/esbuild: copy worker from package output to your static/public output.
• Custom static servers: add a route that serves node_modules/@anapaya/webscion-poc/bin/src/worker/scion-worker.js.

Angular example (assets entry):

{
  "glob": "scion-worker.js",
  "input": "node_modules/@anapaya/webscion-poc/bin/src/worker",
  "output": "/"
}

This makes scion-worker.js available at /scion-worker.js, matching:

new ScionStack("scion-worker.js");

Full example for the build target in angular.json:

"architect": {
  "build": {
    "options": {
      "assets": [
        { "glob": "**/*", "input": "public" },
        {
          "glob": "scion-worker.js",
          "input": "node_modules/@anapaya/webscion-poc/bin/src/worker",
          "output": "/"
        }
      ]
    }
  }
}

Observability & Verification

The web worker logs diagnostic information for every dispatched request:

[webscion] #1 POST /api/data | 142 bytes | SHA-256: a1b2c3... | framing: 0.035ms

Each field:

• #1 — monotonic sequence number, proving the worker is stateful across requests
• Method and path — the HTTP method and URL path of the dispatched request
• Byte length — size of the HTTP/1.1 framed representation
• SHA-256 — hash of the framed bytes, useful for verification and debugging
• Framing duration — time spent serializing the request to HTTP/1.1 bytes

To confirm setup for any framework/bundler:

1. Trigger a request through the integration you chose.
2. Check Network for scion-worker.js (200/304 are both fine).
3. Check Console for [webscion] log lines.