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

Readme
Fork
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
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",
👆 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.