Skip to content

Commit

Permalink
feat: added notifications guide (#1379)
Browse files Browse the repository at this point in the history
* feat: added notifications recipe

* fix: some final tweaks

* updates

* updates

* updates

* updates

* removed unnecessary tabs

* renaming and such

Signed-off-by: Lorenzo Lewis <[email protected]>

* add to sidebar

Signed-off-by: Lorenzo Lewis <[email protected]>

* fix docsrs name

Signed-off-by: Lorenzo Lewis <[email protected]>

* add breadcrumb

Signed-off-by: Lorenzo Lewis <[email protected]>

* update lists

Signed-off-by: Lorenzo Lewis <[email protected]>

* fix broken link

Signed-off-by: Lorenzo Lewis <[email protected]>

* rearrange tab

Signed-off-by: Lorenzo Lewis <[email protected]>

* update todo

Signed-off-by: Lorenzo Lewis <[email protected]>

* update guide

Signed-off-by: Lorenzo Lewis <[email protected]>

* Update some phrasing

Signed-off-by: Lorenzo Lewis <[email protected]>

* update stub phrasing

Signed-off-by: Lorenzo Lewis <[email protected]>

* formatting

Signed-off-by: Lorenzo Lewis <[email protected]>

---------

Signed-off-by: Lorenzo Lewis <[email protected]>
Co-authored-by: Lorenzo Lewis <[email protected]>
  • Loading branch information
simonhyll and lorenzolewis authored Aug 28, 2023
1 parent 9e201fe commit e1e80e5
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 11 deletions.
10 changes: 5 additions & 5 deletions src/components/PluginBreadcrumb.astro
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ interface Props {
cratesio?: string;
jsApi?: string;
rustApi?: string;
docsio?: string;
docsrs?: string;
}
const { version, github, npm, cratesio, jsApi, rustApi, docsio } = Astro.props;
const hasApiLinks = jsApi || rustApi || docsio;
const { version, github, npm, cratesio, jsApi, rustApi, docsrs } = Astro.props;
const hasApiLinks = jsApi || rustApi || docsrs;
---

<div class="flex row not-content">
Expand Down Expand Up @@ -60,8 +60,8 @@ const hasApiLinks = jsApi || rustApi || docsio;
</svg>
</a>
)}
{docsio && (
<a href={docsio} class="flex" target="_blank" aria-label="Docs.io API Reference">
{docsrs && (
<a href={docsrs} class="flex" target="_blank" aria-label="Docs.io API Reference">
<svg viewBox="0 0 512 512" fill="currentColor">
<path d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z" />
</svg>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Stub.astro
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const baseUrl = 'https://github.com/tauri-apps/tauri-docs/tree/next';

<Card title="Contribute" icon="pencil">
<p>
This page is a stub and is waiting for contributions. Get involved by
This is a stub and is waiting for contributions. Get involved by
<a href={baseUrl}>visiting us on GitHub</a> or <a href="https://discord.com/invite/tauri"
>joining us on Discord</a
>.
Expand Down
160 changes: 155 additions & 5 deletions src/content/docs/2/guide/notification.mdx
Original file line number Diff line number Diff line change
@@ -1,10 +1,160 @@
---
title: Notification
title: Notifications
description: Send native notifications to the user.
---

import PluginBreadcrumb from '@components/PluginBreadcrumb.astro';
import { Tabs, TabItem } from '@astrojs/starlight/components';
import CommandTabs from '@components/CommandTabs.astro';
import Stub from '@components/Stub.astro';

<Stub>
Based on
https://github.com/tauri-apps/plugins-workspace/tree/v2/plugins/notification
</Stub>
<PluginBreadcrumb
version="v2.0.0-alpha.2"
github="https://github.com/tauri-apps/plugins-workspace/tree/v2/plugins/notification"
npm="https://www.npmjs.com/package/@tauri-apps/plugin-notification"
cratesio="https://crates.io/crates/tauri-plugin-notification"
jsApi="/2/reference/js/notification"
docsrs="https://docs.rs/tauri-plugin-notification/2.0.0-alpha.2/tauri_plugin_notification/"
/>

Send native notifications to your user using the notification plugin.

## Setup

Install the notifications plugin to get started.

<Tabs>
<TabItem label="Automatic">

1. Use your project's package manager to add the dependency:

<CommandTabs npm="npm run tauri plugin add notification"
yarn="yarn run tauri plugin add notification"
pnpm="pnpm tauri plugin add notification"
cargo="cargo tauri plugin add notification" />

2. Modify `lib.rs` to initialize the plugin:

{/* TODO: Revise once https://github.com/tauri-apps/tauri/issues/7696 is in */}

```rust
#[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");
}
```

</TabItem>
<TabItem label="Manual">

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:

<CommandTabs
npm="npm install @tauri-apps/plugin-notification"
yarn="yarn add @tauri-apps/plugin-notification"
pnpm="pnpm add @tauri-apps/plugin-notification"
/>

</TabItem>

</Tabs>

## Usage

Here are a few examples of how to use the notification plugin:

- [Sent notification to users](#send-notification)
- [Add an action to a notification](#actions)
- [Add an attachment to a notification](#attachments)
- [Send a notification in a specific channel](#channels)

{/* TODO: Link to which language to use, frontend vs. backend guide when it's made */}

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

<Tabs>
<TabItem label="JavaScript">

```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!' });
}
```

</TabItem>
<TabItem label="Rust">

{/* TODO: */}

<Stub />

</TabItem>
</Tabs>

### Actions

{/* TODO: */}

<Stub />

### Attachments

{/* TODO: */}

<Stub />

### Channels

{/* TODO: */}

<Stub />

## Security Considerations

Aside from normal sanitization procedures of user input there are currently no known security considerations.

0 comments on commit e1e80e5

Please sign in to comment.