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
118
119
120
121
122
123
124
125
126
127
128
|
<script>
import { setContext, onMount } from "svelte";
import { onNavigate } from '$app/navigation';
import { page } from '$app/state';
import '../app.css';
import logo from '$lib/assets/logo.png';
/* ==================== Start subscription library-esque ==================== */
let subscriptionJson = $state(null);
function doSubscribe() {
navigator.serviceWorker.ready
.then(async (registration) => {
const response = await fetch("/api/vapid");
// and if we fail to get it?
const vapidPublicKey = await response.text();
const convertedVapidKey = vapidPublicKey;
return registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: convertedVapidKey
});
}).then((subscription) => {
const subJson = subscription.toJSON();
subscriptionJson = {
endpoint: subJson.endpoint,
p256dh: subJson.keys.p256dh,
auth: subJson.keys.auth,
};
return fetch("/api/push", {
method: "post",
headers: { "Content-type": "application/json" },
body: JSON.stringify(subscriptionJson),
});
});
}
async function doUnsubscribe() {
navigator.serviceWorker.ready
.then((registration) => {
return registration.pushManager.getSubscription();
}).then((subscription) => {
const { endpoint } = subscription.toJSON();
return subscription.unsubscribe()
.then(() => {
fetch("/api/push", {
method: "delete",
headers: { "Content-type": "application/json" },
body: JSON.stringify({ endpoint }),
});
subscriptionJson = null;
});
});
}
function toggleSub() {
if (subscriptionJson !== null) {
doUnsubscribe();
} else {
doSubscribe();
}
}
function notifyMe() {
fetch("/api/echo", {
method: "post",
headers: { "Content-type": "application/json" },
body: JSON.stringify({
endpoint: subscriptionJson.endpoint,
msg: JSON.stringify({"msg": "oople doople"}),
})
});
}
onMount(() => {
navigator.serviceWorker.ready.then((registration) => {
return registration.pushManager.getSubscription();
}).then((subscription) => {
if (subscription) {
subscriptionJson = JSON.parse(JSON.stringify(subscription));
}
});
});
/* ==================== END ==================== */
const session = $derived(page.data.session);
let pageContext = $state({
showMenu: false,
});
setContext('page', pageContext);
function toggleMenu(event) {
event.preventDefault();
pageContext.showMenu = !pageContext.showMenu;
}
onNavigate(() => {
pageContext.showMenu = false;
});
let { children } = $props();
</script>
<div class="app-bar">
<div class="lead">
<button onclick={toggleMenu}>
<img alt="logo" src={logo} />
</button>
</div>
<a href="/">pilcrow</a>
<button onclick="{notifyMe}">
notify
</button>
<button onclick="{toggleSub}">
toggle sub
</button>
<div>
hasSub: {subscriptionJson !== null}
</div>
<div class="trail">
{#if session}
<div>
<a href="/me">@{session.currentUser.name}</a>
</div>
{/if}
</div>
</div>
{@render children?.()}
|
