webview/examples/notification.mjs at main · webviewjs/webview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { readFile } from 'node:fs/promises';

import { Application, Notification } from '../index.js';

const notificationImage = await readFile(new URL('../assets/preview.png', import.meta.url));

const app = new Application();
const window = app.createBrowserWindow({
  title: 'Notification Example',
  width: 400,
  height: 300,
});

const webview = window.createWebview({
  html: `<!DOCTYPE html>
    <html>
        <head>
            <title>Notification Example</title>
        </head>
        <body>
            <h1>Notification Example</h1>
            <p>This example demonstrates native desktop notifications.</p>
            <button id="notifyButton">Show Notification</button>
            <script>
                document.getElementById('notifyButton').addEventListener('click', () => {
                  native.showNotification('WebviewJS notification', {
                    body: 'Native desktop notifications use a browser-familiar API.',
                  });
                });
            </script>
        </body>
    </html>`,
});

webview.expose('native', {
  showNotification: (title, options) => {
    const notification = new Notification(title, {
      body: options.body,
      persistent: true,
      actions: [
        { action: 'reply', title: 'Reply' },
        { action: 'dismiss', title: 'Dismiss' },
      ],
      image: notificationImage,
    });

    notification.on('show', () => console.log('notification shown'));
    notification.on('click', ({ action }) => {
      console.log('notification clicked:', action || 'default');
      app.exit();
    });
    notification.on('close', () => console.log('notification closed'));
    notification.on('error', ({ error }) => console.error('notification error:', error));
  },
});

webview.on('page-load-finished', () => {
  console.log('webview page load finished');
});

app.run();