20个浏览器原生API帮你干掉一堆npm依赖

async function copyText(text) {
  await navigator.clipboard.writeText(text);
  console.log('copied');
}

copyText('npm create vite@latest');

button.addEventListener('click', async () => {
  await navigator.clipboard.writeText(location.href);
});

async function sharePage() {
  if (!navigator.share) return;
  await navigator.share({
    title: document.title,
    text: '这篇文章不错',
    url: location.href,
  });
}

shareButton.hidden = !navigator.share;

<button popovertarget="menu">更多</button>

<div id="menu" popover>
  <button>编辑</button>
  <button>删除</button>
</div>

<dialog id="confirmDialog">
  <p>确认删除这条记录吗？</p>
  <button value="cancel">取消</button>
  <button value="ok">删除</button>
</dialog>

const dialog = document.querySelector('#confirmDialog');

deleteButton.addEventListener('click', () => {
  dialog.showModal();
});

dialog.addEventListener('click', (event) => {
  if (event.target.value === 'ok') {
    console.log('delete');
  }
  dialog.close();
});

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    const img = entry.target;
    img.src = img.dataset.src;
    observer.unobserve(img);
  }
});

document.querySelectorAll('img[>).forEach((img) => {
  observer.observe(img);
});

const box = document.querySelector('.chart');

const observer = new ResizeObserver(([entry]) => {
  const width = entry.contentRect.width;
  box.dataset.size = width > 600 ? 'wide' : 'narrow';
});

observer.observe(box);

const channel = new BroadcastChannel('auth');

logoutButton.addEventListener('click', () => {
  channel.postMessage({ type: 'logout' });
});

channel.addEventListener('message', (event) => {
  if (event.data.type === 'logout') {
    location.href = '/login';
  }
});

async function syncOnce() {
  if (!navigator.locks) return;
  await navigator.locks.request('sync-queue', async () => {
    console.log('only one tab runs this');
    await sendPendingRequests();
  });
}

window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    document.documentElement.dataset.theme = event.newValue;
  }
});

function setTheme(theme) {
  localStorage.setItem('theme', theme);
  document.documentElement.dataset.theme = theme;
}

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  if (!file) return;

  const url = URL.createObjectURL(file);
  preview.src = url;

  preview.onload = () => {
    URL.revokeObjectURL(url);
  };
});

const source = {
  createdAt: new Date(),
  tags: new Set(['browser', 'api']),
};

const copy = structuredClone(source);
console.log(copy.createdAt instanceof Date); // true
console.log(copy.tags instanceof Set);       // true

toast.animate(
  [
    { opacity: 0, transform: 'translateY(8px)' },
    { opacity: 1, transform: 'translateY(0)' },
  ],
  {
    duration: 180,
    easing: 'ease-out',
    fill: 'both',
  }
);

const animation = panel.animate(keyframes, options);
await animation.finished;
panel.remove();

function switchTheme(theme) {
  const update = () => {
    document.documentElement.dataset.theme = theme;
  };

  if (!document.startViewTransition) {
    update();
    return;
  }

  document.startViewTransition(update);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
}

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.entryType, entry.name, entry.startTime);
  }
});

observer.observe({
  entryTypes: ['largest-contentful-paint', 'resource', 'longtask'],
});

function updateNetworkStatus() {
  document.body.dataset.online = String(navigator.onLine);
}

window.addEventListener('online', updateNetworkStatus);
window.addEventListener('offline', updateNetworkStatus);
updateNetworkStatus();

async function gzipText(text) {
  const stream = new Blob([text])
    .stream()
    .pipeThrough(new CompressionStream('gzip'));
  return await new Response(stream).blob();
}

const file = await gzipText(JSON.stringify({ hello: 'browser' }));
console.log(file.size);

async function openTextFile() {
  const [handle] = await window.showOpenFilePicker({
    types: [
      {
        description: 'Text',
        accept: { 'text/plain': ['.txt', '.md'] },
      },
    ],
  });

  const file = await handle.getFile();
  return await file.text();
}

async function saveText(text) {
  const handle = await window.showSaveFilePicker({
    suggestedName: 'note.md',
  });

  const writable = await handle.createWritable();
  await writable.write(text);
  await writable.close();
}

async function pickColor() {
  if (!('EyeDropper' in window)) return;
  const eyeDropper = new EyeDropper();
  const result = await eyeDropper.open();
  console.log(result.sRGBHex);
}

const target = document.querySelector('#editor');

const observer = new MutationObserver((mutations) => {
  console.log('changed', mutations.length);
});

observer.observe(target, {
  childList: true,
  subtree: true,
  characterData: true,
});

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = () => {
    preview.src = reader.result;
  };
  reader.readAsDataURL(file);
});