Как сделать настольное приложение на JavaScript через Tauri 2

Tauri 2 упаковывает HTML, CSS и JavaScript в настольное окно, а системную часть собирает через Rust. Создадим vanilla-проект, добавим список заметок в localStorage и запустим его командой tauri dev. Вы увидите границу между frontend и src-tauri, а также поймёте, почему веб-код не получает системные права автоматически.

Новичок ожидает, что Tauri является заменой браузеру одной кнопкой. На деле проект состоит из веб-интерфейса, нативной оболочки, конфигурации и набора разрешений. В этой статье вы соберёте отдельное desktop-окно с локальным списком заметок. Финальный результат можно проверить без догадок: заметка сохраняется после перезапуска приложения, пустая строка отклоняется, а npm run tauri dev открывает нативное окно.

Из чего состоит проект Tauri 2

create-tauri-app создаёт frontend и каталог src-tauri. Во время разработки Vite обслуживает страницу, а Tauri открывает её в системном WebView. Production build включает собранные web-assets в нативное приложение. Для Tauri 2 держите этапы раздельно: ввод, проверка, основное действие и вывод. Такой маршрут позволяет остановиться в конкретной точке, увидеть фактические данные и исправить одну причину вместо случайной перестановки строк.

JavaScript отвечает за экран, а Tauri управляет окном, упаковкой и разрешённым мостом к системе. У Tauri 2 каждый этап оставляет наблюдаемый след, поэтому следующий шаг начинается только после проверки предыдущего.

От входных данных до видимого результата. Frontend и native layer проверяются отдельно

Пишем интерфейс заметок на JavaScript

Проверьте prerequisites в официальной документации. Затем выполните npm create tauri-app@latest, выберите TypeScript / JavaScript, npm, Vanilla и JavaScript. Перейдите в каталог, выполните npm install и npm run tauri dev. Первый запуск дольше обычного Vite, потому что Cargo собирает Rust-зависимости.

const form = document.querySelector("#note-form");
const input = document.querySelector("#note-text");
const list = document.querySelector("#notes");

let notes = JSON.parse(localStorage.getItem("notes") ?? "[]");

function save() {
  localStorage.setItem("notes", JSON.stringify(notes));
}

function render() {
  list.replaceChildren();
  for (const note of notes) {
    const item = document.createElement("li");
    item.textContent = note.text;

    const remove = document.createElement("button");
    remove.type = "button";
    remove.textContent = "Delete";
    remove.addEventListener("click", () => {
      notes = notes.filter((entry) => entry.id !== note.id);
      save();
      render();
    });

    item.append(remove);
    list.append(item);
  }
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const text = input.value.trim();
  if (!text) return;
  notes.push({ id: crypto.randomUUID(), text });
  input.value = "";
  save();
  render();
});

render();

В первом проекте не нужен системный plugin: browser-compatible localStorage позволяет сначала проверить интерфейс и состояние. Пример Tauri 2 специально ограничен одним пользовательским сценарием, чтобы назначение каждой строки оставалось видимым.

Что отличает устойчивый проект от случайного запуска. Permissions добавляются только по задаче

Как web-код оказывается в настольном окне

Tauri не поставляет Chromium целиком, а использует системный WebView, поэтому вид и поддержка деталей зависят от платформы. Rust-процесс управляет окном и IPC. Когда JavaScript вызывает Tauri command или plugin, запрос проходит через разрешённый мост. Capabilities ограничивают доступ окон к командам. Это безопаснее широкого системного API, но только если разрешения остаются минимальными. localStorage привязан к приложению и профилю WebView, однако для важных данных лучше использовать официальный Store или SQL plugin с продуманной миграцией.

Размер приложения обычно меньше Electron-проекта, потому что WebView приходит с системой, но это не бесплатное преимущество: разные ОС используют разные движки. Для filesystem, dialog и shell подключайте официальные plugins и выдавайте узкие scopes. Не вызывайте произвольную shell-команду из пользовательского ввода. Идентификатор bundle нельзя менять без причины после выпуска. Автообновление и подпись пакета являются отдельными задачами и требуют ключей, которые не лежат в репозитории.

Проверяем сохранение и сборку

Создайте заметку, закройте окно и запустите приложение снова. Удалите одну запись и повторите запуск. Добавьте счётчик notes.length и кнопку очистки с подтверждением. Затем откройте frontend через обычный npm run dev и убедитесь, что базовая логика работает без нативной оболочки. После этого выполните npm run tauri build и найдите артефакт своей платформы. Не публикуйте неподписанный installer как готовый продукт.

Хороший первый Tauri-проект доказывает упаковку и жизненный цикл, а не собирает все системные plugins сразу. После этой проверки измените одно правило Tauri 2 и заранее запишите ожидаемый результат. Так копирование превращается в понимание.

Четыре проверки перед следующим шагом. Dev и production являются разными этапами

Когда Tauri подходит, а когда усложняет проект

Следующим шагом перенесите данные в Store plugin, если нужен более явный файл и миграции. Для диалогов и filesystem добавляйте один официальный plugin за раз и читайте permissions. Проверьте приложение на каждой целевой ОС, потому что WebView различается. Подпись Windows и macOS, installer, обновления и иконки планируются до релиза. Если приложение является обычной страницей без системных функций, PWA может оказаться дешевле в поддержке.

Как изучить тему в Кодике

Сначала закрепите DOM, события, массивы и localStorage, затем изучайте нативный мост Tauri. В Кодике сначала восстановите чистую логику без фреймворка, затем верните библиотеку и интерфейс Tauri 2.

Когда frontend работает в браузере, ошибки нативной сборки легче отделить от ошибок интерфейса. Финальная проверка для Tauri 2: закрыть статью, объяснить путь данных и добавить одну функцию без копирования готового блока.

Что получится в итоге

Обычный JavaScript-интерфейс открывается как настольное приложение, хранит заметки и остаётся без лишних системных разрешений.