Frontender's notes [ru]

Нативные API, о которых все забывают: File System, Clipboard, Web Share

Иногда кажется, что фронтенд уже придумал всё — фреймворки, SSR, рендеринг в стримах, use-сотый-хук.
А потом натыкаешься на Web API, которые о которых раньше не слышал.

🔘File System Access API

Позволяет работать с файлами прямо на диске пользователя — читать, писать, сохранять без танцев с input[type=file].
Почти VS Code в браузере.
Отлично подходит для локальных редакторов, playground'ов, PWA-приложений.
Но важно: требует HTTPS и согласия пользователя (пожалуй это и хорошо).

const handle = await window.showSaveFilePicker();
const stream = await handle.createWritable();
await stream.write("Hello world!");
await stream.close();

🔘Clipboard API

Уже давно не просто document.execCommand('copy').
Можно копировать/вставлять не только текст, но и изображения, HTML, JSON.
Если делаете дашборд, таблицы, визуальные тулзы — must have.

await navigator.clipboard.writeText("Copied!");
const image = await navigator.clipboard.read();

🔘Web Share API

Штука, которая превращает ваш сайт в «родное» приложение.
Позволяет вызвать системное окно шаринга (например, переслать ссылку в Telegram или Mail прямо из браузера).
Особенно удобно для мобильных PWA.

await navigator.share({
title: "Frontend Magic",
text: "Проверь этот пост!",
url: location.href
});

✅ Граница между «вебом» и «десктопом» становится всё тоньше.
То, что раньше было возможно только в Electron или нативных приложениях, сегодня работает прямо в браузере.
И это открывает довольно интересные UX-возможности — от локальных IDE до оффлайн-редакторов и менеджеров файлов.

Please open Telegram to view this post

VIEW IN TELEGRAM

❤9👍6⚡3

www.tgoop.com/frontendnoteschannel_ru/5259

4.12K viewsOct 22 at 18:07

Нативные API, о которых все забывают: File System, Clipboard, Web Share

Иногда кажется, что фронтенд уже придумал всё — фреймворки, SSR, рендеринг в стримах, use-сотый-хук.
А потом натыкаешься на Web API, которые о которых раньше не слышал.

🔘File System Access API

Позволяет работать с файлами прямо на диске пользователя — читать, писать, сохранять без танцев с input[type=file].
Почти VS Code в браузере.
Отлично подходит для локальных редакторов, playground'ов, PWA-приложений.
Но важно: требует HTTPS и согласия пользователя (пожалуй это и хорошо).

const handle = await window.showSaveFilePicker();
const stream = await handle.createWritable();
await stream.write("Hello world!");
await stream.close();

Уже давно не просто document.execCommand('copy').
Можно копировать/вставлять не только текст, но и изображения, HTML, JSON.
Если делаете дашборд, таблицы, визуальные тулзы — must have.

await navigator.clipboard.writeText("Copied!");
const image = await navigator.clipboard.read();

Штука, которая превращает ваш сайт в «родное» приложение.
Позволяет вызвать системное окно шаринга (например, переслать ссылку в Telegram или Mail прямо из браузера).
Особенно удобно для мобильных PWA.

await navigator.share({
title: "Frontend Magic",
text: "Проверь этот пост!",
url: location.href
});