feat: install button

.vscode/settings.json

@@ -21,6 +21,7 @@
     "AYUV",
     "battleresults",
     "bbox",
+    "beforeinstallprompt",
     "bepaint",
     "betakrieg",
     "BINORMAL",

packages/i18n/strings/en.json

@@ -837,6 +837,15 @@
     },
 
     "home": {
+      "pwa": {
+        "title": "Install the BlitzKit App",
+        "new": "NEW",
+        "checking": "Checking compatibility...",
+        "incompatible": "Incompatible device.",
+        "incompatible_help": "Try manually.",
+        "install": "Install"
+      },
+
       "discord": {
         "join_short": "Join cool people!",
         "join_long": "Join super duper cool people!",

packages/website/astro.config.ts

@@ -12,6 +12,8 @@ import { tools } from "./src/constants/tools";
 export default defineConfig({
   devToolbar: { enabled: false },
 
+  vite: { server: { allowedHosts: [] } },
+
   integrations: [
     favicons({
       name: strings.common.name,
@@ -75,7 +77,7 @@ export default defineConfig({
       },
     }),
 
-    AstroPWA({ manifest: false }),
+    AstroPWA({ manifest: false, devOptions: { enabled: true } }),
 
     react(),
   ],

packages/website/dev-dist/sw.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If the loader is already loaded, just stop.
+if (!self.define) {
+  let registry = {};
+
+  // Used for `eval` and `importScripts` where we can't get script URL by other means.
+  // In both cases, it's safe to use a global var because those functions are synchronous.
+  let nextDefineUri;
+
+  const singleRequire = (uri, parentUri) => {
+    uri = new URL(uri + ".js", parentUri).href;
+    return registry[uri] || (
+      
+        new Promise(resolve => {
+          if ("document" in self) {
+            const script = document.createElement("script");
+            script.src = uri;
+            script.onload = resolve;
+            document.head.appendChild(script);
+          } else {
+            nextDefineUri = uri;
+            importScripts(uri);
+            resolve();
+          }
+        })
+      
+      .then(() => {
+        let promise = registry[uri];
+        if (!promise) {
+          throw new Error(`Module ${uri} didn’t register its module`);
+        }
+        return promise;
+      })
+    );
+  };
+
+  self.define = (depsNames, factory) => {
+    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    if (registry[uri]) {
+      // Module is already loading or loaded.
+      return;
+    }
+    let exports = {};
+    const require = depUri => singleRequire(depUri, uri);
+    const specialDeps = {
+      module: { uri },
+      exports,
+      require
+    };
+    registry[uri] = Promise.all(depsNames.map(
+      depName => specialDeps[depName] || require(depName)
+    )).then(deps => {
+      factory(...deps);
+      return exports;
+    });
+  };
+}
+define(['./workbox-bf09d6d8'], (function (workbox) { 'use strict';
+
+  self.addEventListener('message', event => {
+    if (event.data && event.data.type === 'SKIP_WAITING') {
+      self.skipWaiting();
+    }
+  });
+
+  /**
+   * The precacheAndRoute() method efficiently caches and responds to
+   * requests for URLs in the manifest.
+   * See https://goo.gl/S9QRab
+   */
+  workbox.precacheAndRoute([{
+    "url": "/",
+    "revision": "0.at3jsejees"
+  }], {
+    "directoryIndex": "index.html"
+  });
+  workbox.cleanupOutdatedCaches();
+  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("/"), {
+    allowlist: [/^\/$/]
+  }));
+
+}));

packages/website/package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@astrojs/react": "^4.4.0",
     "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/themes": "^3.2.1",
     "@react-three/fiber": "^9.3.0",
     "@types/react": "^19.1.14",
     "@types/react-dom": "^19.1.9",
@@ -18,6 +20,7 @@
     "astro": "^5.14.1",
     "astro-favicons": "^3.1.5",
     "fuzzysort": "^3.1.0",
+    "pwa-install-handler": "^2.6.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   }

packages/website/src/components/PWA.astro

@@ -0,0 +1,33 @@
+---
+import { pwaInfo } from "virtual:pwa-info";
+---
+
+<script>
+  import { pwaInstallHandler } from "pwa-install-handler";
+  import { registerSW } from "virtual:pwa-register";
+
+  registerSW({
+    immediate: true,
+
+    onRegisterError: console.error,
+
+    onRegisteredSW() {
+      console.log("PWA registered service worker");
+    },
+
+    onOfflineReady() {
+      console.log("PWA offline ready");
+    },
+  });
+
+  pwaInstallHandler.addListener((canInstall) => {
+    document.documentElement.classList.remove(
+      canInstall ? "pwa-disabled" : "pwa-enabled"
+    );
+    document.documentElement.classList.add(
+      canInstall ? "pwa-enabled" : "pwa-disabled"
+    );
+  });
+</script>
+
+{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}

packages/website/src/components/PWAPrompter.astro

@@ -0,0 +1,102 @@
+---
+import { DownloadIcon } from "@radix-ui/react-icons";
+import {
+  Badge,
+  Box,
+  Button,
+  Card,
+  Flex,
+  Inset,
+  Link,
+  Spinner,
+  Text,
+} from "@radix-ui/themes";
+import { getStrings } from "../core/i18n/getStrings";
+import type { LocaleAcceptorProps } from "../hooks/useLocale";
+
+type Props = LocaleAcceptorProps;
+
+const { locale } = Astro.props;
+const strings = getStrings(locale);
+---
+
+<style>
+  .pwa-logo {
+    width: 6rem;
+    height: 6rem;
+    background-image: url(/assets/images/pwa-promo.png);
+    background-position: center;
+    background-size: cover;
+  }
+
+  html.pwa-enabled .compatibility-checker,
+  html.pwa-disabled .compatibility-checker {
+    display: none;
+  }
+
+  #pwa-install,
+  #pwa-incompatible {
+    display: none;
+  }
+
+  html.pwa-enabled #pwa-install,
+  html.pwa-disabled #pwa-incompatible {
+    display: unset;
+  }
+</style>
+
+<script>
+  import { pwaInstallHandler } from "pwa-install-handler";
+
+  const pwaInstallButton = document.getElementById("pwa-install");
+
+  pwaInstallButton?.addEventListener("click", () => {
+    pwaInstallHandler.install();
+  });
+</script>
+
+<Flex justify="center" mt="4">
+  <Card variant="classic">
+    <Inset>
+      <Flex align="center">
+        <Box className="pwa-logo" />
+
+        <Flex direction="column" gap="2" px="4" py="3">
+          <Flex align="center" gap="2">
+            <Text size="4" weight="medium">
+              {strings.website.home.pwa.title}
+            </Text>
+            <Badge color="jade" variant="outline">
+              {strings.website.home.pwa.new}
+            </Badge>
+          </Flex>
+
+          <Flex className="compatibility-checker" align="center" gap="2">
+            <Spinner />
+            <Text color="gray">
+              {strings.website.home.pwa.checking}
+            </Text>
+          </Flex>
+
+          <Text color="tomato" id="pwa-incompatible">
+            {strings.website.home.pwa.incompatible}{" "}
+            <Link
+              underline="always"
+              target="_blank"
+              href="https://www.cdc.gov/niosh/mining/tools/installpwa.html"
+            >
+              {strings.website.home.pwa.incompatible_help}
+            </Link>
+          </Text>
+
+          <Button id="pwa-install" color="jade">
+            <Flex align="center" gap="1" justify="center">
+              <DownloadIcon />
+              {strings.website.home.pwa.install}
+            </Flex>
+          </Button>
+        </Flex>
+      </Flex>
+    </Inset>
+  </Card>
+</Flex>

packages/website/src/pages/[...locale]/index.astro

@@ -8,6 +8,7 @@ import type { GetStaticPaths } from "astro";
 import { AesonPlug } from "../../components/AesonPlug";
 import HomeHero from "../../components/HomeHero.astro";
 import { Plugs } from "../../components/Plugs";
+import PWAPrompter from "../../components/PWAPrompter.astro";
 import ToolCard from "../../components/ToolCard.astro";
 import { tools, type Tool } from "../../constants/tools";
 import { getStrings } from "../../core/i18n/getStrings";
@@ -64,6 +65,8 @@ export const getStaticPaths = (() => {
 <BaseLayout>
   <HomeHero />
 
+  <PWAPrompter {locale} />
+
   <!-- <Flex justify="center" py="6" px="4" justify="center">
     <Flex
       wrap="wrap"

packages/website/tsconfig.json

@@ -3,6 +3,10 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react",
-    "types": ["vite/client"]
+    "types": [
+      "vite/client",
+      "vite-plugin-pwa/info.d.ts",
+      "vite-plugin-pwa/client.d.ts"
+    ]
   }
 }