Debug with console.debug()

README.md

@@ -9,10 +9,6 @@ $ npm run watch
 
 Open http://localhost:8080
 
-# Enabling debugging
+# Debugging
 
-In the browser console:
-
-```js
-navigator.serviceWorker.controller.postMessage('toggleDebugging')
-```
+Enable console debug/verbose log level in your browser.

src/browser/main.ts

@@ -8,8 +8,8 @@ import Pings from "./pings";
 import User from "./user";
 
 const pings = new Pings({
-  // TODO That any
-  workerUrl: assertNotNullable((window as any).app.pingWorkerUrl)
+  // TODO Avoid that any
+  workerUrl: (window as any).app.pingWorkerUrl
 });
 
 const user = new User();
@@ -36,12 +36,14 @@ import(/* webpackChunkName: "chart" */ "./chart").then(
 import(/* webpackChunkName: "offline-support" */ "./offline-support").then(
   ({ default: OfflineSupport }) =>
     new OfflineSupport({
-      // TODO That any
-      serviceWorkerUrl: assertNotNullable((window as any).app.serviceWorkerUrl),
+      // TODO Avoid that any
+      serviceWorkerUrl: (window as any).app.serviceWorkerUrl,
       domElement: assertNotNullable(document.querySelector("#offline-support"))
     })
 );
 
+// TODO Compose audio.ts and audio/controls.ts into a single importable
+
 const whenAudioControls = import(
   /* webpackChunkName: "audio-controls" */
   "./audio/controls"

src/browser/offline-support/service-worker/index.ts

@@ -5,10 +5,8 @@ const worker = self as any;
 
 import { timeout } from "../../../universal/util";
 
-let isDebugEnabled = false;
-
 const debug = (...args: any[]) => {
-  if (isDebugEnabled) console.log("[Service Worker]", ...args);
+  console.debug("[Service Worker]", ...args);
 };
 
 const isCacheableRequest = (request: Request) => {
@@ -20,13 +18,13 @@ const isCacheableRequest = (request: Request) => {
   );
 };
 
-// TODO Find the right event type
+// TODO Use the right event type
 worker.addEventListener("install", (event: any) => {
   debug("Installing...");
   event.waitUntil(worker.skipWaiting().then(() => debug("Installed")));
 });
 
-// TODO Find the right event type
+// TODO Use the right event type
 worker.addEventListener("activate", (event: any) => {
   debug("Activating...");
   event.waitUntil(worker.clients.claim().then(() => debug("Activated")));
@@ -39,7 +37,7 @@ const MAX_ACCEPTABLE_RESPONSE_TIME = 1000; // ms
 
 let nextFetchId = 1;
 
-// TODO Find the right event type
+// TODO Use the right event type
 worker.addEventListener("fetch", (event: any) => {
   const fetchId = (nextFetchId += 1);
   const fetchDebug = (...args: any[]) => debug(`[Fetch #${fetchId}]`, ...args);
@@ -74,14 +72,3 @@ worker.addEventListener("fetch", (event: any) => {
     })
   );
 });
-
-// TODO Find the right event type
-worker.addEventListener("message", (event: any) => {
-  switch (event.data) {
-    case "toggleDebugging":
-      isDebugEnabled = !isDebugEnabled;
-      break;
-    default:
-      throw new Error("Unknown message");
-  }
-});

webpack.config.ts

@@ -47,6 +47,7 @@ const configFactory: webpack.ConfigurationFactory = (_, args) => {
       new CopyPlugin([{ from: "static" }]),
       new webpack.DefinePlugin({ BUILD_ID: Date.now() }),
       new webpack.BannerPlugin({
+        // TODO Submit fix for banner type not accepting functions
         banner: (() => `Build date: ${getBuildDate()}`) as any
       }),
       new HtmlPlugin({