remove weird manifest declaration in index

dev-dist/registerSW.js

@@ -0,0 +1 @@
+if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })

dev-dist/sw.js

@@ -0,0 +1,93 @@
+/**
+ * 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-5357ef54'], (function (workbox) { 'use strict';
+
+  self.skipWaiting();
+  workbox.clientsClaim();
+
+  /**
+   * The precacheAndRoute() method efficiently caches and responds to
+   * requests for URLs in the manifest.
+   * See https://goo.gl/S9QRab
+   */
+  workbox.precacheAndRoute([{
+    "url": "registerSW.js",
+    "revision": "3ca0b8505b4bec776b69afdba2768812"
+  }, {
+    "url": "index.html",
+    "revision": "0.7orc2ranod8"
+  }], {});
+  workbox.cleanupOutdatedCaches();
+  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
+    allowlist: [/^\/$/]
+  }));
+
+}));
+//# sourceMappingURL=sw.js.map

global.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite-plugin-pwa/client" />

index.html

@@ -8,7 +8,6 @@
     <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
-    <link rel="manifest" href="favicon/site.webmanifest">
     <link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">

src/main.ts

@@ -26,6 +26,12 @@ import { makeStringExtensions } from "./StringExtensions";
 import { installInterfaceLogic } from "./InterfaceLogic";
 import { installWindowBehaviors } from "./WindowBehavior";
 import { drawEmptyBlinkers } from "./AudioVisualisation";
+// @ts-ignore
+import { registerSW } from "virtual:pwa-register";
+
+if ("serviceWorker" in navigator) {
+  registerSW();
+}
 
 export class Editor {
   // Universes and settings
@@ -92,13 +98,13 @@ export class Editor {
 
     this.initializeElements();
     this.initializeButtonGroups();
+    this.setCanvas(this.interface.feedback as HTMLCanvasElement);
+    this.setCanvas(this.interface.scope as HTMLCanvasElement);
     try {
-      this.initializeHydra();
+      this.loadHydraSynthAsync();
     } catch (error) {
       console.log("Couldn't start Hydra: ", error);
     }
-    this.setCanvas(this.interface.feedback as HTMLCanvasElement);
-    this.setCanvas(this.interface.scope as HTMLCanvasElement);
 
     // ================================================================================
     // Loading the universe from local storage
@@ -452,8 +458,22 @@ export class Editor {
     }
   }
 
+  private loadHydraSynthAsync(): void {
+    var script = document.createElement("script");
+    script.src = "https://unpkg.com/hydra-synth";
+    script.async = true;
+    script.onload = () => {
+      console.log("Hydra loaded successfully");
+      this.initializeHydra();
+    };
+    script.onerror = function () {
+      console.error("Error loading Hydra script");
+    };
+    document.head.appendChild(script);
+  }
+
   private initializeHydra(): void {
-    //@ts-ignore
+    // @ts-ignore
     this.hydra_backend = new Hydra({
       canvas: this.interface.hydra_canvas as HTMLCanvasElement,
       detectAudio: false,

vite.config.js

@@ -23,27 +23,29 @@ const webManifest = {
   ],
 };
 
+const vitePWAconfiguration = {
+  devOptions: {
+    enabled: true,
+  },
+  workbox: {
+    sourcemap: true,
+    cleanupOutdatedCaches: true,
+    globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
+  },
+  includeAssets: [
+    "favicon/favicon.icon",
+    "favicon/apple-touch-icon.png",
+    "mask-icon.svg",
+  ],
+  manifest: webManifest,
+  registerType: "autoUpdate",
+  injectRegister: "auto",
+};
+
 export default defineConfig(({ command, mode, ssrBuild }) => {
   if (command === "serve") {
     return {
-      plugins: [
-        viteCompression(),
-        VitePWA({
-          workbox: {
-            sourcemap: true,
-            cleanupOutdatedCaches: true,
-            globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
-          },
-          includeAssets: [
-            "favicon/favicon.icon",
-            "favicon/apple-touch-icon.png",
-            "mask-icon.svg",
-          ],
-          manifest: webManifest,
-          registerType: "autoUpdate",
-          injectRegister: "auto",
-        }),
-      ],
+      plugins: [viteCompression(), VitePWA(vitePWAconfiguration)],
       assetsInclude: ["**/*.md"],
       server: {
         port: 8000,
@@ -52,24 +54,7 @@ export default defineConfig(({ command, mode, ssrBuild }) => {
     };
   } else {
     return {
-      plugins: [
-        viteCompression(),
-        VitePWA({
-          workbox: {
-            sourcemap: true,
-            cleanupOutdatedCaches: true,
-            globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
-          },
-          includeAssets: [
-            "favicon/favicon.icon",
-            "favicon/apple-touch-icon.png",
-            "mask-icon.svg",
-          ],
-          manifest: webManifest,
-          registerType: "autoUpdate",
-          injectRegister: "auto",
-        }),
-      ],
+      plugins: [viteCompression(), VitePWA(vitePWAconfiguration)],
       chunkSizeWarningLimit: 1600 * 2,
       build: {
         outDir: "dist",