viveworker 0.1.0

package/web/icons/viveworker-beacon-v.svg

@@ -0,0 +1,19 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="bg" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(524 120) rotate(90) scale(920 834)">
+      <stop stop-color="#132432"/>
+      <stop offset="0.45" stop-color="#0C151C"/>
+      <stop offset="1" stop-color="#091016"/>
+    </radialGradient>
+    <radialGradient id="signal" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(512 244) rotate(90) scale(182 244)">
+      <stop stop-color="#84CBFF" stop-opacity="0.3"/>
+      <stop offset="1" stop-color="#84CBFF" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="1024" height="1024" rx="224" fill="url(#bg)"/>
+  <ellipse cx="512" cy="246" rx="184" ry="132" fill="url(#signal)"/>
+  <path d="M322 370L477 718C493 754 531 754 547 718L702 370" stroke="#F4FAFF" stroke-width="96" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="512" cy="228" r="28" fill="#8CCBFF"/>
+  <path d="M438 216C438 175 471 142 512 142C553 142 586 175 586 216" stroke="#8CCBFF" stroke-width="30" stroke-linecap="round"/>
+  <path d="M384 220C384 149 441 92 512 92C583 92 640 149 640 220" stroke="#8CCBFF" stroke-width="20" stroke-linecap="round" opacity="0.95"/>
+</svg>

package/web/icons/viveworker-v-check.svg

@@ -0,0 +1,19 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="188" y1="122" x2="841" y2="931" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#16222B"/>
+      <stop offset="0.48" stop-color="#0D141A"/>
+      <stop offset="1" stop-color="#0A1116"/>
+    </linearGradient>
+    <radialGradient id="accent" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(780 252) rotate(128.783) scale(251.649)">
+      <stop stop-color="#8BE9C1" stop-opacity="0.34"/>
+      <stop offset="1" stop-color="#8BE9C1" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="1024" height="1024" rx="224" fill="url(#bg)"/>
+  <circle cx="781" cy="254" r="120" fill="url(#accent)"/>
+  <path d="M286 300L468 730C486 772 538 772 556 730L738 300" stroke="#F8FBFE" stroke-width="108" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="760" cy="276" r="116" fill="#8BE9C1"/>
+  <circle cx="760" cy="276" r="94" fill="#132028" fill-opacity="0.2"/>
+  <path d="M707 277L741 312L815 238" stroke="#0C161C" stroke-width="42" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/web/icons/viveworker-v-pulse.svg

@@ -0,0 +1,24 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="bg" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(238 164) rotate(43.8309) scale(925.664)">
+      <stop stop-color="#173448"/>
+      <stop offset="0.38" stop-color="#0F1F2B"/>
+      <stop offset="1" stop-color="#091117"/>
+    </radialGradient>
+    <radialGradient id="glow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(760 248) rotate(130.1) scale(256.971)">
+      <stop stop-color="#5ED6FF" stop-opacity="0.34"/>
+      <stop offset="1" stop-color="#5ED6FF" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="soft" x="557" y="90" width="320" height="320" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="24"/>
+    </filter>
+  </defs>
+  <rect width="1024" height="1024" rx="224" fill="url(#bg)"/>
+  <circle cx="717" cy="250" r="112" fill="url(#glow)"/>
+  <g filter="url(#soft)">
+    <circle cx="717" cy="250" r="58" fill="#7DD3FC" fill-opacity="0.36"/>
+  </g>
+  <path d="M290 302L469 731C487 773 537 773 555 731L734 302" stroke="#F6FBFF" stroke-width="104" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M697 180C748 180 789 221 789 272" stroke="#7DD3FC" stroke-width="40" stroke-linecap="round"/>
+  <path d="M667 120C752 120 821 189 821 274" stroke="#7DD3FC" stroke-width="28" stroke-linecap="round" opacity="0.92"/>
+</svg>

package/web/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="#101418">
+    <link rel="manifest" href="/manifest.webmanifest">
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/icons/viveworker-icon-192.png">
+    <link rel="stylesheet" href="/app.css">
+    <title>viveworker</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>

package/web/manifest.webmanifest

@@ -0,0 +1,22 @@
+{
+  "id": "/app",
+  "name": "viveworker",
+  "short_name": "viveworker",
+  "start_url": "/app",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#101418",
+  "theme_color": "#101418",
+  "icons": [
+    {
+      "src": "/icons/viveworker-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/viveworker-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

package/web/sw.js

@@ -0,0 +1,153 @@
+const CACHE_NAME = "viveworker-v2";
+const APP_ASSETS = ["/app.css", "/app.js", "/i18n.js"];
+const APP_ROUTES = new Set(["/", "/app", "/app/"]);
+const CACHED_PATHS = new Set(APP_ASSETS);
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      await cache.addAll(APP_ASSETS);
+      await self.skipWaiting();
+    })()
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      const keys = await caches.keys();
+      await Promise.all(
+        keys
+          .filter((key) => key !== CACHE_NAME)
+          .map((key) => caches.delete(key))
+      );
+      await self.clients.claim();
+    })()
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  if (event.request.method !== "GET") {
+    return;
+  }
+
+  const url = new URL(event.request.url);
+  if (url.origin !== self.location.origin) {
+    return;
+  }
+
+  if (url.pathname.startsWith("/api/") || url.pathname === "/sw.js") {
+    return;
+  }
+
+  if (APP_ROUTES.has(url.pathname)) {
+    event.respondWith(networkFirst(event.request, "/app"));
+    return;
+  }
+
+  if (CACHED_PATHS.has(url.pathname)) {
+    event.respondWith(networkFirst(event.request, url.pathname));
+  }
+});
+
+self.addEventListener("push", (event) => {
+  let payload = {};
+  try {
+    payload = event.data ? event.data.json() : {};
+  } catch {
+    payload = {
+      title: "viveworker",
+      body: event.data ? event.data.text() : "A new Codex item is available.",
+      data: { url: "/app" },
+    };
+  }
+
+  const title = payload.title || "viveworker";
+  const options = {
+    body: payload.body || "A new Codex item is available.",
+    tag: payload.tag || "",
+    data: payload.data || { url: "/app" },
+  };
+
+  event.waitUntil(self.registration.showNotification(title, options));
+});
+
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  const targetUrl = event.notification?.data?.url || "/app";
+  event.waitUntil(openTargetWindow(targetUrl));
+});
+
+self.addEventListener("pushsubscriptionchange", (event) => {
+  event.waitUntil(notifyClients("pushsubscriptionchange"));
+});
+
+async function openTargetWindow(targetUrl) {
+  const target = new URL(targetUrl, self.location.origin);
+  const clients = await self.clients.matchAll({
+    type: "window",
+    includeUncontrolled: true,
+  });
+
+  const preferredClients = clients
+    .slice()
+    .sort((left, right) => scoreClient(right.url) - scoreClient(left.url));
+
+  for (const client of preferredClients) {
+    if (typeof client.focus === "function") {
+      if (typeof client.navigate === "function") {
+        await client.navigate(target.toString());
+      }
+      await client.focus();
+      return;
+    }
+  }
+
+  if (self.clients.openWindow) {
+    await self.clients.openWindow(target.toString());
+  }
+}
+
+function scoreClient(urlString) {
+  try {
+    const url = new URL(urlString);
+    let score = 0;
+    if (APP_ROUTES.has(url.pathname)) {
+      score += 20;
+    }
+    if (url.pathname === "/app" || url.pathname === "/app/") {
+      score += 5;
+    }
+    return score;
+  } catch {
+    return 0;
+  }
+}
+
+async function notifyClients(type) {
+  const clients = await self.clients.matchAll({
+    type: "window",
+    includeUncontrolled: true,
+  });
+  for (const client of clients) {
+    client.postMessage({ type });
+  }
+}
+
+async function networkFirst(request, cacheKey) {
+  const cache = await caches.open(CACHE_NAME);
+  try {
+    const response = await fetch(request, { cache: "no-store" });
+    if (response && response.ok) {
+      await cache.put(cacheKey, response.clone());
+    }
+    return response;
+  } catch {
+    const cached = await cache.match(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    return Response.error();
+  }
+}