feat: png install icons and faster first-load warm

index.html

@@ -28,6 +28,8 @@
     <meta name="robots" content="index, follow" />
     <meta name="application-name" content="DETRO" />
     <meta name="apple-mobile-web-app-title" content="DETRO" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
     <link rel="canonical" href="https://detro.pages.dev/" />
     <meta property="og:title" content="DETRO — Delhi Metro Simple" />
     <meta

public/manifest.webmanifest

@@ -9,6 +9,30 @@
   "theme_color": "#16181d",
   "lang": "en",
   "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-192-maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/icons/icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
     {
       "src": "/favicon.svg",
       "sizes": "any",

src/lib/offline/precache.test.ts

@@ -20,18 +20,38 @@ describe("offline precache list", () => {
     ])
   })
 
-  it("saves the app, then journeys, then street tiles", () => {
+  it("saves pages and assets first, then journeys, then street tiles", () => {
     expect(
       backgroundOrder({
-        shell: ["/", "/sw.js", "/assets/app.js", "/map-tiles/9/1/1.png", "/attractions/metro-people.svg"],
+        shell: [
+          "/attractions/metro-people.svg",
+          "/sw.js",
+          "/assets/app.js",
+          "/",
+          "/map-tiles/9/1/1.png",
+          "/icons/icon-192.png",
+          "/index.html",
+        ],
         snapshot: ["/snapshot/en/station_brief/RI.json", "/snapshot/en/journeys/RI.json"],
       }),
-    ).toEqual([
-      ["/", "/assets/app.js", "/attractions/metro-people.svg"],
-      ["/snapshot/en/journeys/RI.json"],
-      ["/snapshot/en/station_brief/RI.json"],
-      ["/map-tiles/9/1/1.png"],
-    ])
+    ).toEqual({
+      shell: ["/", "/index.html", "/assets/app.js", "/attractions/metro-people.svg", "/icons/icon-192.png"],
+      journeys: ["/snapshot/en/journeys/RI.json"],
+      tiles: ["/map-tiles/9/1/1.png"],
+    })
+  })
+
+  it("does not background-warm station briefs already in the bundle", () => {
+    const ordered = backgroundOrder({
+      shell: ["/"],
+      snapshot: [
+        "/snapshot/en/station_brief/RI.json",
+        "/snapshot/en/station_brief/KG.json",
+        "/snapshot/en/journeys/KG.json",
+      ],
+    })
+    expect(ordered.journeys).toEqual(["/snapshot/en/journeys/KG.json"])
+    expect(JSON.stringify(ordered)).not.toContain("station_brief")
   })
 
   it("uses the same cache names as the service worker", () => {

src/lib/offline/precache.ts

@@ -1,18 +1,31 @@
-export function backgroundOrder(list: { shell: string[]; snapshot: string[] }): string[][] {
-  const shell: string[] = []
+export type WarmGroups = {
+  shell: string[]
+  journeys: string[]
+  tiles: string[]
+}
+
+/** Split the build list into warm phases. Station briefs stay out — they ship in the JS bundle. */
+export function backgroundOrder(list: { shell: string[]; snapshot: string[] }): WarmGroups {
+  const pages: string[] = []
+  const assets: string[] = []
+  const other: string[] = []
   const tiles: string[] = []
   for (const url of list.shell) {
     if (url === "/sw.js") continue
     if (url.startsWith("/map-tiles/")) tiles.push(url)
-    else shell.push(url)
+    else if (url === "/" || url === "/index.html") pages.push(url)
+    else if (url.startsWith("/assets/")) assets.push(url)
+    else other.push(url)
   }
   const journeys: string[] = []
-  const briefs: string[] = []
   for (const url of list.snapshot) {
     if (url.startsWith("/snapshot/en/journeys/")) journeys.push(url)
-    else briefs.push(url)
   }
-  return [shell, journeys, briefs, tiles]
+  return {
+    shell: [...pages, ...assets, ...other],
+    journeys,
+    tiles,
+  }
 }
 
 export function classifyPrecache(urls: string[]): { shell: string[]; snapshot: string[] } {

src/lib/offline/warm.test.ts

@@ -0,0 +1,131 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+type Stored = Map<string, Response>
+
+function memoryCaches() {
+  const bags = new Map<string, Stored>()
+
+  class MemoryCache {
+    constructor(private readonly bag: Stored) {}
+    async put(request: RequestInfo, response: Response) {
+      const url = typeof request === "string" ? request : request.url
+      this.bag.set(new URL(url, "http://localhost").pathname, response)
+    }
+    async match(request: RequestInfo) {
+      const url = typeof request === "string" ? request : request.url
+      return this.bag.get(new URL(url, "http://localhost").pathname)
+    }
+    async keys() {
+      return [...this.bag.keys()].map((path) => new Request(`http://localhost${path}`))
+    }
+    async delete(request: RequestInfo) {
+      const url = typeof request === "string" ? request : request.url
+      return this.bag.delete(new URL(url, "http://localhost").pathname)
+    }
+  }
+
+  return {
+    async open(name: string) {
+      let bag = bags.get(name)
+      if (!bag) {
+        bag = new Map()
+        bags.set(name, bag)
+      }
+      return new MemoryCache(bag)
+    },
+    bags,
+  }
+}
+
+describe("warmOffline first-load phases", () => {
+  let idleCallbacks: Array<() => void>
+  let fetchMock: ReturnType<typeof vi.fn>
+  let cachesApi: ReturnType<typeof memoryCaches>
+
+  beforeEach(() => {
+    idleCallbacks = []
+    cachesApi = memoryCaches()
+    fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url
+      const path = new URL(url, "http://localhost").pathname
+      if (path === "/precache.json") {
+        return new Response(
+          JSON.stringify({
+            shell: ["/", "/index.html", "/assets/app.js", "/icons/icon-192.png", "/map-tiles/9/1/1.png"],
+            snapshot: ["/snapshot/en/journeys/RI.json", "/snapshot/en/station_brief/RI.json"],
+          }),
+          { status: 200, headers: { "Content-Type": "application/json" } },
+        )
+      }
+      return new Response(`body:${path}`, {
+        status: 200,
+        headers: { "Content-Type": "text/plain", "X-Priority": String(init?.priority ?? "auto") },
+      })
+    })
+    vi.stubGlobal("fetch", fetchMock)
+    vi.stubGlobal("caches", cachesApi)
+    vi.stubGlobal("navigator", { onLine: true, serviceWorker: undefined })
+    vi.stubGlobal("window", {
+      ...globalThis,
+      requestIdleCallback: (cb: IdleRequestCallback) => {
+        idleCallbacks.push(() => cb({ didTimeout: false, timeRemaining: () => 50 }))
+        return 1
+      },
+      addEventListener: vi.fn(),
+    })
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    vi.resetModules()
+  })
+
+  it("caches the shell before idle, and journeys only after idle", async () => {
+    const { warmOffline } = await import("./warm")
+    warmOffline()
+
+    await vi.waitFor(() => {
+      const paths = fetchMock.mock.calls.map((call) => new URL(String(call[0]), "http://localhost").pathname)
+      expect(paths).toContain("/assets/app.js")
+      expect(paths).toContain("/icons/icon-192.png")
+    })
+
+    await vi.waitFor(() => expect(idleCallbacks.length).toBeGreaterThan(0))
+
+    const beforeIdle = fetchMock.mock.calls.map((call) => new URL(String(call[0]), "http://localhost").pathname)
+    expect(beforeIdle).not.toContain("/snapshot/en/journeys/RI.json")
+    expect(beforeIdle).not.toContain("/map-tiles/9/1/1.png")
+    expect(beforeIdle).not.toContain("/snapshot/en/station_brief/RI.json")
+
+    for (const run of idleCallbacks.splice(0)) run()
+
+    await vi.waitFor(() => {
+      const paths = fetchMock.mock.calls.map((call) => new URL(String(call[0]), "http://localhost").pathname)
+      expect(paths).toContain("/snapshot/en/journeys/RI.json")
+      expect(paths).toContain("/map-tiles/9/1/1.png")
+    })
+
+    const all = fetchMock.mock.calls.map((call) => new URL(String(call[0]), "http://localhost").pathname)
+    expect(all).not.toContain("/snapshot/en/station_brief/RI.json")
+
+    const journeyCall = fetchMock.mock.calls.find(
+      (call) => new URL(String(call[0]), "http://localhost").pathname === "/snapshot/en/journeys/RI.json",
+    )
+    expect(journeyCall?.[1]).toMatchObject({ priority: "low" })
+  })
+
+  it("does not wait on idle before saving the shell", async () => {
+    const { warmOffline } = await import("./warm")
+    warmOffline()
+    expect(idleCallbacks).toHaveLength(0)
+
+    await vi.waitFor(() => {
+      const paths = fetchMock.mock.calls.map((call) => new URL(String(call[0]), "http://localhost").pathname)
+      expect(paths).toContain("/precache.json")
+      expect(paths).toContain("/assets/app.js")
+    })
+
+    const paths = fetchMock.mock.calls.map((call) => new URL(String(call[0]), "http://localhost").pathname)
+    expect(paths).not.toContain("/snapshot/en/journeys/RI.json")
+  })
+})