diff --git a/src/app/icon-192.png b/src/app/icon-192.png new file mode 100644 index 0000000..35d27da Binary files /dev/null and b/src/app/icon-192.png differ diff --git a/src/app/icon-maskable-512.png b/src/app/icon-maskable-512.png new file mode 100644 index 0000000..a1637b2 Binary files /dev/null and b/src/app/icon-maskable-512.png differ diff --git a/src/app/manifest.test.ts b/src/app/manifest.test.ts index e68eaee..e5b4d93 100644 --- a/src/app/manifest.test.ts +++ b/src/app/manifest.test.ts @@ -8,11 +8,36 @@ describe("web app manifest", () => { start_url: "/", display: "standalone", background_color: "#0a0a0f", - theme_color: "#fbfbfd", + theme_color: "#0a0a0f", icons: expect.arrayContaining([ - expect.objectContaining({ src: "/icon.png", sizes: "512x512" }), + expect.objectContaining({ src: "/icon-192.png", sizes: "192x192", purpose: "any" }), + expect.objectContaining({ src: "/icon.png", sizes: "512x512", purpose: "any" }), + expect.objectContaining({ + src: "/icon-maskable-512.png", + sizes: "512x512", + purpose: "maskable", + }), expect.objectContaining({ src: "/apple-icon.png", sizes: "180x180" }), ]), }); }); + + it("does not flash a mismatched status bar color on install (#695)", () => { + // background_color and theme_color render on the same splash screen, so + // they must agree with each other -- unlike layout.tsx's dark/light + // themeColor pair, which only ever applies one at a time via a media + // query. + expect(manifest().background_color).toBe(manifest().theme_color); + }); + + it("includes a maskable icon within Chrome's install safe-zone requirements", () => { + const maskable = manifest().icons?.find((icon) => icon.purpose === "maskable"); + expect(maskable).toBeDefined(); + expect(maskable?.sizes).toBe("512x512"); + }); + + it("includes the 192px icon size Chrome's install criteria require", () => { + const has192 = manifest().icons?.some((icon) => icon.sizes === "192x192"); + expect(has192).toBe(true); + }); }); diff --git a/src/app/manifest.ts b/src/app/manifest.ts index 616bbbc..1704539 100644 --- a/src/app/manifest.ts +++ b/src/app/manifest.ts @@ -8,15 +8,33 @@ export default function manifest(): MetadataRoute.Manifest { "Fund open source work and track contributor rewards through MergeFi.", start_url: "/", display: "standalone", + // A manifest can only hold one static pair, unlike layout.tsx's + // `viewport.themeColor`, which picks light vs. dark via a media query + // (#224). "#fbfbfd" is that light-mode value; using it here paired with + // a dark background_color made the install splash flash a dark screen + // into a near-white status bar. Both values now match the dark-mode- + // first design background_color already used (#695). background_color: "#0a0a0f", - theme_color: "#fbfbfd", + theme_color: "#0a0a0f", icons: [ + { + src: "/icon-192.png", + sizes: "192x192", + type: "image/png", + purpose: "any", + }, { src: "/icon.png", sizes: "512x512", type: "image/png", purpose: "any", }, + { + src: "/icon-maskable-512.png", + sizes: "512x512", + type: "image/png", + purpose: "maskable", + }, { src: "/apple-icon.png", sizes: "180x180",