blob: 99432c4ae8ea2ccbfed2a85b36deada76a67d3e5 (
plain)
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<script>
import { onMount } from 'svelte';
import * as api from '$lib/apiServer.js';
import Toggle from '$lib/components/Toggle.svelte';
let subscriptionJson = $state(null);
function doSubscribe() {
let vapid;
navigator.serviceWorker.ready
.then(async (registration) => {
// TODO: Get vapid key from remote.state instead:
const response = await fetch('/api/vapid');
// and if we fail to get it?
const vapidPublicKey = await response.text();
vapid = vapidPublicKey;
return registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: vapid,
});
})
.then((subscription) => {
const subJson = subscription.toJSON();
subscriptionJson = {
vapid,
endpoint: subJson.endpoint,
p256dh: subJson.keys.p256dh,
auth: subJson.keys.auth,
};
apiServer.createPushSubscription(subscriptionJson);
});
}
function doUnsubscribe() {
navigator.serviceWorker.ready
.then((registration) => {
return registration.pushManager.getSubscription();
})
.then((subscription) => {
const { endpoint } = subscription.toJSON();
return subscription.unsubscribe().then(() => {
apiServer.deletePushSubscription({ endpoint });
subscriptionJson = null;
});
});
}
function toggleSub() {
if (subscriptionJson !== null) {
doUnsubscribe();
} else {
doSubscribe();
}
}
function testNotifications() {
api.notifyMe();
}
onMount(() => {
navigator.serviceWorker.ready
.then((registration) => {
return registration.pushManager.getSubscription();
})
.then((subscription) => {
if (subscription) {
subscriptionJson = JSON.parse(JSON.stringify(subscription));
}
});
});
</script>
<h2>Notify me here</h2>
<p>
{#if subscriptionJson === null}
We won't notify you here.
{:else}
We will notify you here.
{/if}
</p>
<button class="btn" onclick={toggleSub}>
{#if subscriptionJson === null}
Notify me!
{:else}
Stop notifying me!
{/if}
</button>
<button class="btn" onclick={testNotifications}> Test notifications </button>
<h2>Notify me when:</h2>
<p>These are currently unimplemented.</p>
<Toggle name="channel_created" text="A new channel is created" onclick={async () => {}} />
<Toggle name="message_arrives" text="A new message arrives in a channel" onclick={async () => {}} />
<Toggle
name="message_arrives_username"
text="A new message containing your username arrives in a channel"
onclick={async () => {}}
/>
<Toggle
name="message_arrives_keyword"
text="A new message containing a keyword you have configured arrives in a channel"
onclick={async () => {}}
/>
<Toggle
name="own_message_stitched"
text="A message you wrote is stitched"
onclick={async () => {}}
/>
<Toggle
name="flagged_message_stitched"
text="A message you have flagged is stitched"
onclick={async () => {}}
/>
|
