TS Service Worker + Updated Tooling!

Unrelated to Flatlands, I learned today that with Safari 17 on macOS Monterey, desktop now has support for `navigator.standalone`, which unfortunately breaks the detection I currently use to distinguish between desktop and mobile iOS devices. So I need to find a new workaround for that, as now macOS can be detected as an iPad, which isn't good.

These tooling updates to Flatlands are from my recent updates to STE and Dovetail, which I remembered I hadn't brought over here yet.

index.html

@@ -23,7 +23,7 @@
 <link rel="alternate icon" type="image/png" sizes="16x16" href="./icon-16.png">
 <link rel="alternate icon" type="image/png" sizes="32x32" href="./icon-32.png">
 <link rel="apple-touch-icon" sizes="180x180" href="./app-apple-touch-180.png">
-<link rel="stylesheet" href="./styles/styles.css">
+<link rel="stylesheet" href="./styles/styles.scss">
 
 </head>
 

package.json

@@ -8,9 +8,10 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "better-typescript": "^0.0.7",
-    "new-javascript": "^0.2.4",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.7"
+    "better-typescript": "^0.1.7",
+    "new-javascript": "^0.3.9",
+    "sass": "^1.69.5",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
   }
 }

src/Flatlands.ts

@@ -26,7 +26,7 @@ export default class Flatlands {
 
   static serviceWorker = {
     get supported(): boolean {
-      return "serviceWorker" in navigator;
+      return "serviceWorker" in navigator && !import.meta.env.DEV;
     },
 
     async register(): Promise<boolean> {

src/Player.ts

@@ -205,7 +205,7 @@ export class Player extends Entity {
     ctx.drawImage(definition.texture.image,0,keyframe,width,height,this.direction.vertical ? this.direction.vertical === "up" ? -2 : -1 : 0,1,width,height);
   }
 
-  drawCharacter(scale: number, offset: number): void {
+  drawCharacter(_scale: number, offset: number): void {
     ctx.setTransform(this.direction.horizontal === "left" && !this.direction.vertical ? -1 : 1,0,0,1,offsetX(),offsetY());
     ctx.transform(1,0,0,1,this.box.width / -2 + offset,this.box.height / -2);
     ctx.drawImage(entity.player.texture.image,this.box.width * (this.animation.column !== 0 ? this.animation.frame : 0),this.box.height * this.animation.column,this.box.width,this.box.height,0,0,this.box.width,this.box.height);

src/app.ts

@@ -50,7 +50,7 @@ export const coordinates = document.querySelector("coordinates-panel")!;
 export const hotbar = document.querySelector("hotbar-panel")!;
 
 // D-Pad
-const dpad = document.querySelector("dpad-panel")!;
+// const dpad = document.querySelector("dpad-panel")!;
 
 // Environment
 export const explored = {

public/service-worker.js → src/service-worker.ts

@@ -1,11 +1,11 @@
 /// <reference no-default-lib="true"/>
 /// <reference types="better-typescript/worker.d.ts"/>
 
-var self = /** @type { ServiceWorkerGlobalScope } */ (/** @type { unknown } */ (globalThis));
+declare var self: ServiceWorkerGlobalScope;
 
 const NAME = "Flatlands";
-const VERSION = "v0.14.2";
-const CACHE_NAME = /** @type { const } */ (`${NAME} ${VERSION}`);
+const VERSION = "v0.15.0";
+const CACHE_NAME = `${NAME} ${VERSION}`;
 
 self.addEventListener("activate",event => {
   event.waitUntil(removeOutdatedVersions());
@@ -17,10 +17,8 @@ self.addEventListener("fetch",event => {
 
 /**
  * Clears out old versions of the app from Cache Storage.
- * 
- * @returns { Promise<void> }
 */
-async function removeOutdatedVersions(){
+async function removeOutdatedVersions(): Promise<void> {
   const keys = await caches.keys();
 
   await Promise.all(keys.map(async key => {
@@ -38,11 +36,8 @@ async function removeOutdatedVersions(){
  * Matches a network request with it's cached counterpart from Cache Storage.
  * 
  * If it hasn't been cached yet, it will fetch the network for a response, cache a clone, then return the response.
- * 
- * @param { Request } request
- * @returns { Promise<Response> }
 */
-async function matchRequest(request){
+async function matchRequest(request: Request): Promise<Response> {
   let response = await caches.match(request);
   if (response !== undefined) return response;
 
@@ -54,12 +49,8 @@ async function matchRequest(request){
 
 /**
  * Adds a network request and response to Cache Storage.
- * 
- * @param { Request } request
- * @param { Response } response
- * @return { Promise<void> }
 */
-async function cacheRequest(request,response){
+async function cacheRequest(request: Request, response: Response): Promise<void> {
   const cache = await caches.open(CACHE_NAME);
   await cache.put(request,response.clone());
 }

tsconfig.json

@@ -1,22 +1,20 @@
 {
   "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "module": "ESNext",
-    "moduleResolution": "NodeNext",
-    "isolatedModules": true,
+    "module": "NodeNext",
     "target": "ESNext",
+    "isolatedModules": true,
     "types": [
-      "new-javascript"
+      "new-javascript",
+      "vite/client"
     ],
     "noEmit": true,
     "skipLibCheck": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
-    "noUncheckedIndexedAccess": true
-  },
-  "exclude": [
-    "./dist"
-  ]
+    "noUncheckedIndexedAccess": true,
+    "allowUnreachableCode": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  }
 }

vite.config.ts

@@ -3,7 +3,21 @@ import { defineConfig } from "vite";
 export default defineConfig({
   base: "./",
   build: {
-    target: "esnext"
+    target: "esnext",
+    rollupOptions: {
+      input: {
+        app: "./index.html",
+        "service-worker": "./src/service-worker.ts"
+      },
+      output: {
+        entryFileNames(chunkInfo): string {
+          switch (chunkInfo.name){
+            case "service-worker": return "[name].js";
+            default: return "assets/js/[name]-[hash].js";
+          }
+        },
+      }
+    }
   },
   server: {
     port: 5500,