From f5945549bcb179ef2a9de4d5e0944020ac1a96c3 Mon Sep 17 00:00:00 2001 From: Naman Garg Date: Tue, 2 Apr 2024 22:01:32 +0530 Subject: [PATCH 1/2] Add Request Notification Section --- src/content/docs/features/notification.mdx | 170 +++++++++++++-------- 1 file changed, 103 insertions(+), 67 deletions(-) diff --git a/src/content/docs/features/notification.mdx b/src/content/docs/features/notification.mdx index 976e8b9606..9147df5753 100644 --- a/src/content/docs/features/notification.mdx +++ b/src/content/docs/features/notification.mdx @@ -5,7 +5,7 @@ i18nReady: true --- import PluginLinks from '@components/PluginLinks.astro'; -import { Tabs, TabItem } from '@astrojs/starlight/components'; +import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; import CommandTabs from '@components/CommandTabs.astro'; import Stub from '@components/Stub.astro'; @@ -29,35 +29,111 @@ Install the notifications plugin to get started. - - 1. Run `cargo add tauri-plugin-notification` to add the plugin to the project's dependencies in `Cargo.toml`. - - 2. Modify `lib.rs` to initialize the plugin: - - ```rust - // lib.rs - #[cfg_attr(mobile, tauri::mobile_entry_point)] - pub fn run() { - tauri::Builder::default() - // Initialize the plugin - .plugin(tauri_plugin_notification::init()) - .run(tauri::generate_context!()) - .expect("error while running tauri application"); - } - ``` - - 3. If you'd like to use notifications in JavaScript then install the npm package as well: - - - + +
    +
  1. + Run `cargo add tauri-plugin-notification` to add the plugin to the project's dependencies in `Cargo.toml`. +
    2. +
  2. + Modify `lib.rs` to initialize the plugin: + ```rust title="src-tauri/src/lib.rs" ins={4} + pub fn run() { + tauri::Builder::default() + // Initialize the plugin + .plugin(tauri_plugin_notification::init()) + .run(tauri::generate_context!()) + .expect("error while running tauri application"); + } + ``` +
    3. +
  3. + If you'd like to use notifications in JavaScript then install the npm package as well: + + +
    4. +
+ +### Requesting Permission + +To send notifications to the user, appropriate permissions must be obtained beforehand. + + +
    +
  1. + Check if permission is granted + + + ```rust {1} {6} + use tauri_plugin_notification::NotificationExt; + + #[tauri::command] + fn send_notification(app_handle: tauri::AppHandle) { + // Do you have permission to send a notification? + let mut state = app_handle.notification().permission_state().unwrap(); + } + ``` + + + ```js + import isPermissionGranted from '@tauri-apps/plugin-notification'; + + // Do you have permission to send a notification? + let permissionGranted = await isPermissionGranted(); + ``` + + +
    2. + +
  2. + Request permission if not granted + + + ```rust {2} {10-12} + use tauri_plugin_notification::NotificationExt; + use tauri_plugin_notification::PermissionState; + + #[tauri::command] + fn send_notification(app_handle: tauri::AppHandle) { + // Do you have permission to send a notification? + let mut state = app_handle.notification().permission_state().unwrap(); + + // If permissions are not already granted, we will need to request them. + if state != PermissionState::Granted { + state = app_handle.notification().request_permission().unwrap(); + } + } + ``` + + + ```js {3} {10-13} + import { + isPermissionGranted, + requestPermission, + } from '@tauri-apps/plugin-notification'; + + // Do you have permission to send a notification? + let permissionGranted = await isPermissionGranted(); + + // If permissions are not already granted, we will need to request them. + if (!permissionGranted) { + const permission = await requestPermission(); + permissionGranted = permission === 'granted'; + } + ``` + + +
    3. +
+ + ## Usage Here are a few examples of how to use the notification plugin: @@ -73,49 +149,9 @@ The notification plugin is available in both JavaScript and Rust. ### Send Notification -{/* TODO: Demo component */} - -Follow these steps to send a notification: - -1. Check if permission is granted -2. Request permission if not granted -3. Send the notification - - - - -```js -import { - isPermissionGranted, - requestPermission, - sendNotification, -} from '@tauri-apps/plugin-notification'; - -// Do you have permission to send a notification? -let permissionGranted = await isPermissionGranted(); - -// If not we need to request it -if (!permissionGranted) { - const permission = await requestPermission(); - permissionGranted = permission === 'granted'; -} - -// Once permission has been granted we can send the notification -if (permissionGranted) { - sendNotification({ title: 'Tauri', body: 'Tauri is awesome!' }); -} -``` - - - - -{/* TODO: */} - +{/* TODO */} - - - ### Actions {/* TODO: */} From 73129f0f342cb3fc29c4856cbcd9c765b4a22be0 Mon Sep 17 00:00:00 2001 From: Naman Garg Date: Thu, 4 Apr 2024 02:36:41 +0530 Subject: [PATCH 2/2] Add supported platforms --- src/content/docs/features/notification.mdx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/content/docs/features/notification.mdx b/src/content/docs/features/notification.mdx index 9147df5753..a265f3e024 100644 --- a/src/content/docs/features/notification.mdx +++ b/src/content/docs/features/notification.mdx @@ -13,6 +13,15 @@ import Stub from '@components/Stub.astro'; Send native notifications to your user using the notification plugin. +## Supported Platforms + +- Windows +- macOS +- Linux +- iOS +- Android + + ## Setup Install the notifications plugin to get started.