update example

This commit is contained in:
Zach Botterman 2025-02-23 16:00:04 -08:00
commit bf4222c9cc
10 changed files with 125 additions and 312 deletions

View file

@ -9,8 +9,8 @@ import {Create as $Create} from "@wailsio/runtime";
/**
* NotificationAction represents an action button for a notification
* @typedef {Object} NotificationAction
* @property {string} id
* @property {string} title
* @property {string} [id]
* @property {string} [title]
* @property {boolean} [destructive]
* @property {boolean} [authenticationRequired]
*/
@ -18,8 +18,8 @@ import {Create as $Create} from "@wailsio/runtime";
/**
* NotificationCategory groups actions for notifications
* @typedef {Object} NotificationCategory
* @property {string} id
* @property {NotificationAction[]} actions
* @property {string} [id]
* @property {NotificationAction[]} [actions]
* @property {boolean} [hasReplyField]
* @property {string} [replyPlaceholder]
* @property {string} [replyButtonTitle]
@ -28,10 +28,10 @@ import {Create as $Create} from "@wailsio/runtime";
/**
* NotificationOptions contains configuration for a notification
* @typedef {Object} NotificationOptions
* @property {string} id
* @property {string} title
* @property {string} [id]
* @property {string} [title]
* @property {string} [subtitle]
* @property {string} body
* @property {string} [body]
* @property {string} [categoryId]
* @property {{ [_: string]: any }} [data]
*/

View file

@ -11,7 +11,8 @@ import {Call as $Call, Create as $Create} from "@wailsio/runtime";
import * as $models from "./models.js";
/**
* CheckNotificationAuthorization checks current permission status
* CheckNotificationAuthorization is a Windows stub that always returns true.
* (user authorization is macOS-specific)
* @returns {Promise<boolean> & { cancel(): void }}
*/
export function CheckNotificationAuthorization() {
@ -20,7 +21,7 @@ export function CheckNotificationAuthorization() {
}
/**
* RegisterNotificationCategory registers a category with actions and optional reply field
* RegisterNotificationCategory registers a new NotificationCategory to be used with SendNotificationWithActions.
* @param {$models.NotificationCategory} category
* @returns {Promise<void> & { cancel(): void }}
*/
@ -30,7 +31,8 @@ export function RegisterNotificationCategory(category) {
}
/**
* RemoveAllDeliveredNotifications removes all delivered notifications
* RemoveAllDeliveredNotifications is a Windows stub that always returns nil.
* (macOS-specific)
* @returns {Promise<void> & { cancel(): void }}
*/
export function RemoveAllDeliveredNotifications() {
@ -39,7 +41,8 @@ export function RemoveAllDeliveredNotifications() {
}
/**
* RemoveAllPendingNotifications removes all pending notifications
* RemoveAllPendingNotifications is a Windows stub that always returns nil.
* (macOS-specific)
* @returns {Promise<void> & { cancel(): void }}
*/
export function RemoveAllPendingNotifications() {
@ -48,27 +51,40 @@ export function RemoveAllPendingNotifications() {
}
/**
* RemoveDeliveredNotification removes a specific delivered notification
* @param {string} identifier
* RemoveDeliveredNotification is a Windows stub that always returns nil.
* (macOS-specific)
* @param {string} $0
* @returns {Promise<void> & { cancel(): void }}
*/
export function RemoveDeliveredNotification(identifier) {
let $resultPromise = /** @type {any} */($Call.ByID(149440045, identifier));
export function RemoveDeliveredNotification($0) {
let $resultPromise = /** @type {any} */($Call.ByID(149440045, $0));
return $resultPromise;
}
/**
* RemovePendingNotification removes a specific pending notification
* @param {string} identifier
* RemoveNotificationCategory removes a previously registered NotificationCategory.
* @param {string} categoryId
* @returns {Promise<void> & { cancel(): void }}
*/
export function RemovePendingNotification(identifier) {
let $resultPromise = /** @type {any} */($Call.ByID(3872412470, identifier));
export function RemoveNotificationCategory(categoryId) {
let $resultPromise = /** @type {any} */($Call.ByID(229511469, categoryId));
return $resultPromise;
}
/**
* RequestUserNotificationAuthorization requests permission for notifications.
* RemovePendingNotification is a Windows stub that always returns nil.
* (macOS-specific)
* @param {string} $0
* @returns {Promise<void> & { cancel(): void }}
*/
export function RemovePendingNotification($0) {
let $resultPromise = /** @type {any} */($Call.ByID(3872412470, $0));
return $resultPromise;
}
/**
* RequestUserNotificationAuthorization is a Windows stub that always returns true, nil.
* (user authorization is macOS-specific)
* @returns {Promise<boolean> & { cancel(): void }}
*/
export function RequestUserNotificationAuthorization() {
@ -77,20 +93,21 @@ export function RequestUserNotificationAuthorization() {
}
/**
* SendNotification sends a notification with the given identifier, title, subtitle, and body.
* @param {string} identifier
* @param {string} title
* @param {string} subtitle
* @param {string} body
* SendNotification sends a basic notification with a name, title, and body. All other options are ignored on Windows.
* (subtitle, category id, and data are only available on macOS)
* @param {$models.NotificationOptions} options
* @returns {Promise<void> & { cancel(): void }}
*/
export function SendNotification(identifier, title, subtitle, body) {
let $resultPromise = /** @type {any} */($Call.ByID(2246903123, identifier, title, subtitle, body));
export function SendNotification(options) {
let $resultPromise = /** @type {any} */($Call.ByID(2246903123, options));
return $resultPromise;
}
/**
* SendNotificationWithActions sends a notification with the specified actions
* SendNotificationWithActions sends a notification with additional actions and inputs.
* A NotificationCategory must be registered with RegisterNotificationCategory first. The `CategoryID` must match the registered category.
* If a NotificationCategory is not registered a basic notification will be sent.
* (subtitle, category id, and data are only available on macOS)
* @param {$models.NotificationOptions} options
* @returns {Promise<void> & { cancel(): void }}
*/

File diff suppressed because one or more lines are too long

View file

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/wails.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/style.css"/>
<title>Wails App</title>
<script type="module" crossorigin src="/assets/index-CS0sRFez.js"></script>
</head>
<body>
<div class="container">
<div>
<a data-wml-openURL="https://wails.io">
<img src="/wails.png" class="logo" alt="Wails logo"/>
</a>
<a data-wml-openURL="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
<img src="/javascript.svg" class="logo vanilla" alt="JavaScript logo"/>
</a>
</div>
<h1>Wails + Javascript</h1>
<div class="footer">
<div><button class="btn" onclick="sendNotification()">Send Basic Notification</button></div>
<div><button class="btn" onclick="sendComplexNotification()">Send Complex Notificaiton</button></div>
<div id="notifications"></div>
</div>
</div>
</body>
</html>

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>

Before

Width:  |  Height:  |  Size: 995 B

View file

@ -1,160 +0,0 @@
:root {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: rgba(27, 38, 54, 1);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
src: local(""),
url("./Inter-Medium.ttf") format("truetype");
}
h3 {
font-size: 3em;
line-height: 1.1;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
button {
/* width: 60px; */
height: 30px;
line-height: 30px;
border-radius: 3px;
border: none;
margin: 0 0 0 20px;
padding: 0 8px;
cursor: pointer;
}
.result {
height: 20px;
line-height: 20px;
}
body {
margin: 0;
display: flex;
place-items: center;
place-content: center;
min-width: 320px;
min-height: 100vh;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #e80000aa);
}
.logo.vanilla:hover {
filter: drop-shadow(0 0 2em #f7df1eaa);
}
.result {
height: 20px;
line-height: 20px;
margin: 1.5rem auto;
text-align: center;
}
.footer {
margin-top: 1rem;
align-content: center;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
.input-box .btn:hover {
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
color: #333333;
}
.input-box .input {
border: none;
border-radius: 3px;
outline: none;
height: 30px;
line-height: 30px;
padding: 0 10px;
color: black;
background-color: rgba(240, 240, 240, 1);
-webkit-font-smoothing: antialiased;
}
.input-box .input:hover {
border: none;
background-color: rgba(255, 255, 255, 1);
}
.input-box .input:focus {
border: none;
background-color: rgba(255, 255, 255, 1);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 KiB

View file

@ -1,5 +1,5 @@
import * as Notifications from "./bindings/github.com/wailsapp/wails/v3/pkg/services/notifications/service";
import { Events } from "@wailsio/runtime";
import { Events, System } from "@wailsio/runtime";
const timeElement = document.getElementById('time');
const notificationsElement = document.getElementById('notifications');
@ -7,8 +7,17 @@ const notificationsElement = document.getElementById('notifications');
window.sendNotification = async () => {
const granted = await Notifications.RequestUserNotificationAuthorization();
if (granted) {
const uuid = crypto.randomUUID();
await Notifications.SendNotification(uuid, "Frontend Notification", "", "Notification sent through JS!");
const id = System.IsWindows() ? "Wails Notification Demo" : crypto.randomUUID()
await Notifications.SendNotification({
id,
title: "Title",
body: "Body!",
data: {
messageId: "msg-123",
senderId: "user-123",
timestamp: Date.now(),
}
});
}
}
@ -20,19 +29,18 @@ window.sendComplexNotification = async () => {
actions: [
{ id: "VIEW_ACTION", title: "View" },
{ id: "MARK_READ_ACTION", title: "Mark as Read" },
{ id: "DELETE_ACTION", title: "Delete", destructive: true },
],
hasReplyField: true,
replyButtonTitle: "Reply",
replyPlaceholder: "Reply to frontend...",
});
const uuid = crypto.randomUUID();
const id = System.IsWindows() ? "Wails Notification Demo" : crypto.randomUUID()
await Notifications.SendNotificationWithActions({
id: uuid,
id,
title: "Complex Frontend Notification",
subtitle: "From: Jane Doe",
body: "Is it raining today where you are?",
body: "Is it rainging today where you are?",
categoryId: "FRONTEND_NOTIF",
data: {
messageId: "msg-456",
@ -48,5 +56,6 @@ Events.On('time', (time) => {
});
Events.On("notificationResponse", (response) => {
console.log(response)
notificationsElement.innerText += JSON.stringify(response.data[0].data);
});

View file

@ -9,18 +9,29 @@ import (
"time"
"github.com/wailsapp/wails/v3/pkg/application"
"github.com/wailsapp/wails/v3/pkg/events"
"github.com/wailsapp/wails/v3/pkg/services/notifications"
)
// Wails uses Go's `embed` package to embed the frontend files into the binary.
// Any files in the frontend/dist folder will be embedded into the binary and
// made available to the frontend.
// See https://pkg.go.dev/embed for more information.
//go:embed all:frontend/dist
var assets embed.FS
// main function serves as the application's entry point. It initializes the application, creates a window,
// and starts a goroutine that emits a time-based event every second. It subsequently runs the application and
// logs any error that might occur.
func main() {
NotificationService := notifications.New()
// Create a new Wails application by providing the necessary options.
// Variables 'Name' and 'Description' are for application metadata.
// 'Assets' configures the asset server with the 'FS' variable pointing to the frontend files.
// 'Bind' is a list of Go struct instances. The frontend has access to the methods of these instances.
// 'Mac' options tailor the application when running an macOS.
app := application.New(application.Options{
Name: "notifications",
Name: "notifications_demo",
Description: "A demo of using raw HTML & CSS",
Services: []application.Service{
application.NewService(NotificationService),
@ -33,6 +44,11 @@ func main() {
},
})
// Create a new window with the necessary options.
// 'Title' is the title of the window.
// 'Mac' options tailor the window when running on macOS.
// 'BackgroundColour' is the background colour of the window.
// 'URL' is the URL that will be loaded into the webview.
app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
Title: "Window 1",
Mac: application.MacWindow{
@ -44,85 +60,52 @@ func main() {
URL: "/",
})
app.OnApplicationEvent(events.Mac.ApplicationDidFinishLaunching, func(event *application.ApplicationEvent) {
// Request pemission to send notifications
granted, err := NotificationService.RequestUserNotificationAuthorization()
if err != nil {
log.Default().Printf("WARNING: %s\n", err)
}
if granted {
// Send notification with no actions
err = NotificationService.SendNotification("some-uuid", "Title", "", "body!")
if err != nil {
log.Default().Printf("WARNING: %s\n", err)
}
err = NotificationService.RegisterNotificationCategory(notifications.NotificationCategory{
ID: "MESSAGE_CATEGORY",
Actions: []notifications.NotificationAction{
{ID: "VIEW_ACTION", Title: "View"},
{ID: "MARK_READ_ACTION", Title: "Mark as Read"},
{ID: "DELETE_ACTION", Title: "Delete", Destructive: true},
},
HasReplyField: true,
ReplyPlaceholder: "Type your reply...",
ReplyButtonTitle: "Reply",
})
if err != nil {
log.Default().Printf("WARNING: %s\n", err)
}
err = NotificationService.SendNotificationWithActions(notifications.NotificationOptions{
ID: "some-other-uuid",
Title: "New Message",
Subtitle: "From: Jane Doe",
Body: "Is it raining today where you are?",
CategoryID: "MESSAGE_CATEGORY",
Data: map[string]interface{}{
"messageId": "msg-123",
"senderId": "user-123",
"timestamp": time.Now().Unix(),
},
})
if err != nil {
log.Default().Printf("WARNING: %s\n", err)
}
}
})
app.OnEvent("notificationResponse", func(event *application.CustomEvent) {
data, _ := json.Marshal(event.Data)
fmt.Printf("%s\n", string(data))
})
go func() {
time.Sleep(time.Second * 5)
// Sometime later check if you are still authorized
granted, err := NotificationService.CheckNotificationAuthorization()
if err != nil {
log.Default().Printf("WARNING: %s\n", err)
}
println(granted)
app.OnEvent("notificationResponse", func(event *application.CustomEvent) {
data, _ := json.Marshal(event.Data)
fmt.Printf("%s\n", string(data))
})
// Sometime later remove delivered notification by identifier
err = NotificationService.RemoveDeliveredNotification("some-uuid")
if err != nil {
log.Default().Printf("WARNING: %s\n", err)
}
}()
NotificationService.RequestUserNotificationAuthorization()
NotificationService.CheckNotificationAuthorization()
go func() {
time.Sleep(time.Second * 10)
// Sometime later remove all pending and delivered notifications
err := NotificationService.RemoveAllPendingNotifications()
if err != nil {
log.Default().Printf("WARNING: %s\n", err)
}
err = NotificationService.RemoveAllDeliveredNotifications()
if err != nil {
log.Default().Printf("WARNING: %s\n", err)
}
time.Sleep(time.Second * 2)
NotificationService.SendNotification(notifications.NotificationOptions{
ID: "Wails Notification Demo",
Title: "Title!",
Body: "Body!",
Data: map[string]interface{}{
"messageId": "msg-123",
"senderId": "user-123",
"timestamp": time.Now().String(),
},
})
time.Sleep(time.Second * 2)
NotificationService.RegisterNotificationCategory(notifications.NotificationCategory{
ID: "BACKEND_NOTIF",
Actions: []notifications.NotificationAction{
{ID: "VIEW_ACTION", Title: "View"},
{ID: "MARK_READ_ACTION", Title: "Mark as Read"},
{ID: "DELETE_ACTION", Title: "Delete", Destructive: true},
},
HasReplyField: true,
ReplyButtonTitle: "Reply",
ReplyPlaceholder: "Reply to backend...",
})
NotificationService.SendNotificationWithActions(notifications.NotificationOptions{
ID: "Wails Notification Demo",
Title: "Complex Backend Notification",
Subtitle: "Should not show on Windows",
Body: "Is it raining today where you are?",
CategoryID: "BACKEND_NOTIF",
Data: map[string]interface{}{
"messageId": "msg-456",
"senderId": "user-456",
"timestamp": time.Now().String(),
},
})
}()
// Run the application. This blocks until the application has been exited.