Introduction to the Notification API

A desktop or mobile application often needs to alert the user about events—a new message, a completed download, a meeting reminder. The Notification API gives your Tauri app the ability to display system-level notification toasts that appear even when the app is not in focus. This section covers what the plugin does, how to set it up, and the permissions you must grant before you can send anything.

What the Notification API Does

The Tauri Notification API is a bridge between your application code and the operating system’s native notification system. On macOS it talks to the Notification Center, on Windows to the Action Center, on Linux to the desktop notification daemon, and on mobile to the platform-specific notification frameworks. This means a notification sent from your Tauri app looks and behaves exactly like any other system notification—it respects Do Not Disturb settings, appears in the notification history, and can include sounds, actions, or attachments where the platform supports them.

The plugin is exposed to your frontend through JavaScript functions. You can check whether the user has granted notification permission, request that permission if needed, and then fire a notification with a title, body, icon, and other optional fields. The Rust side also has full access to the same capabilities, so you can trigger notifications from background tasks or system events without round-tripping through the webview.

Plugin Installation

Setting up notifications requires changes on both the Rust backend and the JavaScript frontend. The steps below assume you already have a Tauri v2 project with a React + Vite frontend.

cargo add tauri-plugin-notification

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_notification::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

npm install @tauri-apps/plugin-notification

{
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "notification:default"
  ]
}

Basic Usage Example

Once the plugin is installed and permissions are configured, you can send a notification directly from a React component. The pattern is always the same: check permission, request if needed, then send.

Here is a small, self-contained NotificationSender component:

import { useState } from "react";
import {
  isPermissionGranted,
  requestPermission,
  sendNotification,
} from "@tauri-apps/plugin-notification";
export default function NotificationSender() {
  const [status, setStatus] = useState("");
  async function handleSend() {
    setStatus("Checking permission...");
    let granted = await isPermissionGranted();
    if (!granted) {
      const perm = await requestPermission();
      granted = perm === "granted";
    }
    if (!granted) {
      setStatus("Permission denied.");
      return;
    }
    sendNotification({
      title: "Hello from Tauri",
      body: "This is your first system notification!",
    });
    setStatus("Notification sent!");
  }
  return (
    <div>
      <button onClick={handleSend}>Send Notification</button>
      <p>{status}</p>
    </div>
  );
}

The component imports three functions directly from the plugin package. When the user clicks the button, it first asks the operating system whether the app already has permission. If not, it calls requestPermission(), which triggers the system’s native permission dialog (on macOS, Windows, and mobile; on most Linux desktops permission is implicitly granted). Once the permission resolves to "granted", sendNotification fires a toast with a title and body.

After clicking, you should see a system notification pop up. On Windows, the notification appears in the Action Center. On macOS, it slides in from the top right. On Linux, the behaviour depends on your desktop environment.

Platform Considerations

The plugin aims for consistent behaviour across all supported platforms, but some differences exist:

These differences are handled by the plugin internally. As long as you follow the permission check and request flow, the same JavaScript code works everywhere.

Summary

If your immediate need is simply to fire a basic toast, the example above is all you need.