Public
HTTP (deprecated)
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Readme

Did you know that in recent versions of Windows 11, PWAs can add themselves as desktop widgets? This is a demo of that.

Because this PWA isn't published to the Microsoft Store, if you want to try this out for yourself you'll first need to install WinAppSDK version >= 1.2, enable Developer Mode in settings following the instructions here, and visit https://wilt-miniWidget.web.val.run to install using a recent version of Edge.

Screenshot 2023-09-28 193245.png

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
import { fetch } from "https://esm.town/v/std/fetch";
import { notFound } from "https://esm.town/v/wilt/notFound";
import { thisUrl } from "https://esm.town/v/wilt/thisUrl";
import { tinyLogomark } from "https://esm.town/v/wilt/tinyLogomark";
export async function miniWidget(request: Request): Promise<Response> {
switch (new URL(request.url).pathname) {
case "/":
case "/index.html":
return new Response(
`
<!DOCTYPE html>
<html>
<link rel="manifest" href="manifest.json" />
<script type="text/javascript">
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
try {
const registration = await navigator.serviceWorker.register("/serviceworker.js", {
scope: "/",
});
if (registration.installing) {
console.log("Service worker installing");
} else if (registration.waiting) {
console.log("Service worker installed");
} else if (registration.active) {
console.log("Service worker active");
}
} catch (error) {
console.error(\`Registration failed with \${error}\`);
}
}
};
registerServiceWorker();
</script>
<h2>Install this PWA</h2>
<p>To get a widget in your Windows Widgets sidebar!</p>
<img src="${tinyLogomark}" />
</html>
`,
{ headers: { "Content-Type": "text/html" } },
);
case "/manifest.json":
return new Response(
JSON.stringify({
name: "simplepwa",
description: "A simple demo PWA",
scope: "./",
start_url: "./",
display: "standalone",
display_override: ["window-controls-overlay"],
icons: [{
src:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAQMAAADdiHD7AAAAAXNSR0IArs4c6QAAAANQTFRFLf+I56geCQAAABlJREFUeNrtwTEBAAAAwiD7p7bGDmAAABB2CrAAAR3VlIUAAAAASUVORK5CYII=",
sizes: "144x144",
type: "image/png",
}, {
"src": "https://placehold.co/192x192.png",
"sizes": "192x192",
"type": "image/png",
}, {
"src": "https://placehold.co/512x512.png",
"sizes": "512x512",
"type": "image/png",
}],
screenshots: [{
src: "img.jpg",
sizes: "600x400",
label: "Widget",
}],
widgets: [{
name: "simplepwa widget",
description: "A simple demo widget for the Windows sidebar",
tag: "simplepwa",
ms_ac_template: "template.json",
data: "data.json",
screenshots: [{
src: "img.jpg",
sizes: "600x400",
label: "Demo widget",
}],
backgrounds: [{
src: "img.jpg",
sizes: "600x400",
}],
}],
}),
{
headers: { "Content-Type": "application/manifest+json" },
},
);
case "/template.json":
return new Response(
JSON.stringify({
type: "AdaptiveCard",
body: [{
type: "TextBlock",
size: "Medium",
text: "Hello from Val.Town!",
weight: "Bolder",
wilt-miniwidget.web.val.run
January 1, 2024