2nd/10_Wiki/Topics/Coding/Web_Origin_Trial_Platform.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
web-origin-trial-platform	Origin Trials / Platform APIs — modern browser	Coding	draft	B	conceptual	2026-05-09	2026-05-09	web browser vibe-coding	language applicable_to TS Frontend		origin trial Chrome flags platform API Web Bundles FedCM Topics API Storage Buckets

Origin Trials / Modern Platform APIs

Browser 의 새 API 가 origin trial 식 (early access). FedCM, Topics, Storage Buckets, Compute Pressure, Document PIP.

📖 핵심 개념

• Origin trial: 6 month-1 year, opt-in.
• Token 가 specific origin 만.
• Browser flag: 개발자 전용.
• 진짜 launch 가 모든 user.

💻 코드 패턴

Origin trial 등록

<!-- HTML -->
<meta http-equiv='origin-trial' content='YOUR_TOKEN_HERE' />

<!-- 또는 HTTP header -->
Origin-Trial: YOUR_TOKEN_HERE

→ Chrome / Edge developer site 가 token 발급.

FedCM (Federated Credential Management)

// Sign in with Google (modern)
const credential = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: 'https://accounts.google.com/gsi/fedcm.json',
      clientId: 'YOUR_CLIENT_ID',
    }],
  },
}) as IdentityCredential;

const token = credential.token;

→ 3rd-party cookie 종료 의 답.

Topics API (privacy ad)

// Browser 가 user 의 interest topic 자동 추론.
const topics = await document.browsingTopics();
// → ['/Sports/Soccer', '/News/Politics']

→ 3rd-party cookie 의 ad alternative. ETP / Privacy Sandbox.

Storage Buckets

// 기존: localStorage / IndexedDB 가 1 origin 의 1 storage.
// 새: 매 bucket 의 own quota / persistence.

const bucket = await navigator.storageBuckets.open('user-data', {
  durability: 'strict',
  persisted: true,
});

const idb = bucket.indexedDB;
const cache = await bucket.caches.open('v1');

→ Per-feature storage. Eviction 따로.

Compute Pressure

const observer = new PressureObserver((records) => {
  for (const r of records) {
    console.log(r.source, r.state);  // 'cpu', 'nominal' / 'fair' / 'serious' / 'critical'
  }
});

await observer.observe('cpu', { sampleInterval: 1000 });

→ "User 가 CPU 가 hot" → quality ↓. Video call / game 친화.

Document Picture-in-Picture

const pipWindow = await documentPictureInPicture.requestWindow({
  width: 400,
  height: 300,
});

pipWindow.document.body.appendChild(myElement);

→ HTML 가 PIP. Video 만 X (전 element). Video call, music player.

Web Bundles (resource bundle)

<link rel='resourcebundle' href='resources.wbn' />

→ 1 file 가 multiple resource. Subresource cache 친화.

Speculation rules (preload navigation)

<script type='speculationrules'>
{
  "prerender": [{
    "where": { "href_matches": "/products/*" },
    "eagerness": "moderate"
  }]
}
</script>

→ Anchor hover 시 prerender. Click = instant.

Anchor positioning (CSS)

.tooltip {
  position: absolute;
  position-anchor: --my-button;
  top: anchor(bottom);
  left: anchor(center);
}

#my-button {
  anchor-name: --my-button;
}

→ Floating UI 의 native (Chrome 125+).

View timeline (scroll animation)

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

→ Scroll 위치 따라 animation. JS 없음.

Container queries (modern)

.card {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .title { font-size: 2rem; }
}

→ Media query 가 container 의 size.

View Transitions (cross-doc, MPA)

<meta name='view-transition' content='same-origin'>

@view-transition {
  navigation: auto;
}

→ MPA 가 SPA 같은 transition. → Web_View_Transitions_Cross_Doc.

CSS @scope

@scope (.card) to (.children) {
  h2 { color: blue; }
}

→ CSS-in-JS 의 native alternative.

CSS nesting

.card {
  padding: 16px;
  
  & h2 { font-size: 1.5rem; }
  
  &:hover { background: #eee; }
}

→ Sass 비슷, native.

Popover API

<button popovertarget='my-popover'>Open</button>
<div id='my-popover' popover='auto'>Content</div>

→ Modal 의 native. Light dismiss / focus.

Dialog (mature)

<dialog id='my-dialog'>
  <p>Hello</p>
  <button onclick='this.closest("dialog").close()'>Close</button>
</dialog>

<button onclick='document.getElementById("my-dialog").showModal()'>Open</button>

URLPattern API

const pattern = new URLPattern({ pathname: '/users/:id' });
const match = pattern.exec('https://example.com/users/123');
console.log(match?.pathname.groups.id);  // '123'

→ Router 의 native.

Web Codecs

const decoder = new VideoDecoder({
  output: (frame) => { /* draw to canvas */ },
  error: (e) => console.error(e),
});

decoder.configure({ codec: 'avc1.640028' });
decoder.decode(chunk);

→ Low-level video decode. Real-time / WebRTC.

Web GPU (mature)

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter!.requestDevice();
// Compute / render.

→ ML inference, 3D. → Frontend_WebGPU_Patterns.

Browser support

- Chrome / Edge: 가장 빠름.
- Firefox: 일부 ship, 일부 안.
- Safari: 가장 보수적.

→ Progressive enhancement.

Polyfill

// Container queries: postcss-container-queries (build-time).
// Popover: floating-ui + dialog.
// View Transitions: 자동 fallback (DOM 가 즉시 변경).

Chrome flags (개발자)

chrome://flags/
- Enable specific feature.
- 매 user 가 다른.

→ Production 가정 X. Origin trial 가 답.

Origin trial 의 lifecycle

1. Proposal (W3C).
2. Implementation (Chrome).
3. Origin trial (6 month-1 year, opt-in).
4. Ship default 또는 deprecate.
5. 다른 browser ship.

→ "Future-proof" check (caniuse.com).

Production usage

Modern web app 가:
- View Transitions (Astro, Next).
- Container Queries (Tailwind 4).
- Popover (Radix).
- Dialog (HTML5).
- URL Pattern (router).

→ Modern feature 가 점진 mainstream.

🤔 의사결정 기준

Feature	추천
3rd-party cookie 종료	FedCM
Privacy ad	Topics API
Storage organize	Storage Buckets
Battery / quality	Compute Pressure
HTML PIP	Document PIP
Modal	Popover / Dialog
Router	URL Pattern
Video low-level	Web Codecs
Container query	CSS Container Queries
Anchor position	CSS Anchor

❌ 안티패턴

• Origin trial production assume: 끝나면 깨짐.
• Polyfill 없음 (older browser): 깨짐.
• Caniuse 안 봄: 가정.
• Chrome flag prod: 다른 user 안 됨.
• Token expire 무시: 1 year 후 break.

🤖 LLM 활용 힌트

• Origin trial = early access (token).
• View Transitions / Container / Popover = mature.
• FedCM / Topics = 3rd-party cookie 종료 답.
• Caniuse 가 reality.

🔗 관련 문서

• Web_View_Transitions_Cross_Doc
• Frontend_View_Transitions_Deep
• Web_File_System_Access