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.
Readme
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",
👆 This is a val. Vals are TypeScript snippets of code, written in the browser and run on our servers. Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.