2023-03-29 19:02:13 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<title>Desktop notifications</title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h1>Desktop notifications</h1>
|
|
|
|
|
|
<h3>
|
|
|
|
|
|
The <code>notification</code> module in Electron allows you to add basic
|
|
|
|
|
|
desktop notifications.
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Electron conveniently allows developers to send notifications with the
|
|
|
|
|
|
<a href="https://notifications.spec.whatwg.org/">HTML5 Notification API</a>,
|
|
|
|
|
|
using the currently running operating system’s native notification
|
|
|
|
|
|
APIs to display it.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
<b>Note:</b> Since this is an HTML5 API it is only available in the
|
|
|
|
|
|
renderer process.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Open the
|
2023-08-10 09:55:52 +00:00
|
|
|
|
<a href="https://www.electronjs.org/docs/latest/tutorial/notifications">
|
2023-03-29 19:02:13 +00:00
|
|
|
|
full API documentation<span>(opens in new window)</span>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
in your browser.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h2>Basic notification</h2>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<button id="basic-noti">View demo</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>This demo demonstrates a basic notification. Text only.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h2>Notification with image</h2>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<button id="advanced-noti">View demo</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
This demo demonstrates a basic notification. Both text and a image
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// You can also require other files to run in this process
|
|
|
|
|
|
require("./renderer.js");
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
