Experimental Features

This chapter covers cutting-edge web capabilities that are still in development or available behind experimental flags. These APIs may change or have limited browser support.

Origin Trials

Origin Trials allow developers to test experimental APIs with real users before they become standards. Register for a token at developer.chrome.com/origintrials.

<!-- Add the origin trial meta tag -->
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

// Or via HTTP header
// Origin-Trial: YOUR_TOKEN_HERE

Future Capabilities

File System Access API

// Read a file from the local file system
async function openFile() {
  try {
    const [handle] = await window.showOpenFilePicker({
      types: [{
        description: 'Text Files',
        accept: { 'text/plain': ['.txt', '.md'] }
      }]
    });
    const file = await handle.getFile();
    const content = await file.text();
    return { handle, content };
  } catch (err) {
    console.error('File open cancelled:', err);
  }
}

// Write back to the file
async function saveFile(handle, content) {
  const writable = await handle.createWritable();
  await writable.write(content);
  await writable.close();
}

// Create a new file
async function createFile(name) {
  const handle = await window.showSaveFilePicker({
    suggestedName: name,
    types: [{
      description: 'Text Files',
      accept: { 'text/plain': ['.txt', '.md'] }
    }]
  });
  return handle;
}

Local Font Access API

// Access locally installed fonts
async function getLocalFonts() {
  if ('queryLocalFonts' in window) {
    const fonts = await window.queryLocalFonts();
    return fonts.map(font => ({
      family: font.family,
      style: font.style,
      fullName: font.fullName
    }));
  }
  return [];
}

Screen Details API

// Get detailed screen information
async function getScreenDetails() {
  if ('getScreenDetails' in window) {
    const screens = await window.getScreenDetails();
    console.log('Number of screens:', screens.screens.length);

    screens.screens.forEach(screen => {
      console.log('Screen:', {
        id: screen.id,
        width: screen.width,
        height: screen.height,
        availWidth: screen.availWidth,
        availHeight: screen.availHeight,
        isPrimary: screen.isPrimary,
        isInternal: screen.isInternal
      });
    });

    // Move a window to a specific screen
    window.moveTo(screens.screens[1].availLeft, 0);
  }
}

Compute Pressure API

// Monitor system pressure (CPU/thermal)
async function monitorPressure() {
  if ('computePressure' in navigator) {
    const observer = new ComputePressureObserver((update) => {
      console.log('CPU Pressure:', update.cpuUtilization);
      console.log('Thermal State:', update.thermalState);

      if (update.cpuUtilization > 0.8) {
        // Reduce app complexity
        reduceAnimationQuality();
      }
    }, { cpuUtilization: true, thermalState: true });

    await observer.observe();
  }
}

Declarative Link Capturing (DLC)

// manifest.json - Handle links within the PWA scope
{
  "capture_links": "existing-client-event",
  "launch_handler": {
    "client_mode": ["focus-existing", "navigate-existing"]
  }
}