feat(indiekit): maskable app icon

paulrobertlloyd · paulrobertlloyd · commit 6fabca31e08c · 2024-04-14T17:47:49.000+01:00
diff --git a/packages/indiekit/lib/controllers/assets.js b/packages/indiekit/lib/controllers/assets.js
@@ -1,10 +1,15 @@
 import { appIcon, scripts, styles } from "@indiekit/frontend";
 
-export const getAppIcon = async (request, response) => {
-  const { size } = request.params;
+export const getAppIcon = async (request, response, next) => {
+  const { purpose, size } = request.params;
   const { themeColor } = request.app.locals.application;
-  const png = await appIcon(themeColor, Number(size));
-  return response.type("image/png").send(png).end();
+
+  try {
+    const png = await appIcon(size, themeColor, purpose);
+    return response.type("image/png").send(png).end();
+  } catch {
+    next();
+  }
 };
 
 export const getScripts = async (request, response) => {
diff --git a/packages/indiekit/lib/controllers/manifest.js b/packages/indiekit/lib/controllers/manifest.js
@@ -10,14 +10,22 @@ export const get = async (request, response) => {
     name: application.name,
     icons: [
       {
-        src: "assets/app-icon-192.png",
+        src: "assets/app-icon-192-any.png",
         sizes: "192x192",
         type: "image/png",
+        purpose: "any",
       },
       {
-        src: "assets/app-icon-512.png",
+        src: "assets/app-icon-512-any.png",
         sizes: "512x512",
         type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "assets/app-icon-512-maskable.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
       },
     ],
     shortcuts: getShortcuts(application, response),
diff --git a/packages/indiekit/lib/routes.js b/packages/indiekit/lib/routes.js
@@ -38,7 +38,10 @@ export const routes = (indiekitConfig) => {
   router.use("/assets", express.static(assetsPath, { maxAge: "7d" }));
   router.get("/assets/app-:hash.js", assetsController.getScripts);
   router.get("/assets/app-:hash.css", assetsController.getStyles);
-  router.get("/assets/app-icon-:size.png", assetsController.getAppIcon);
+  router.get(
+    "/assets/app-icon-:size-:purpose.png",
+    assetsController.getAppIcon,
+  );
 
   // Plug-in assets
   for (const plugin of application.installedPlugins) {
diff --git a/packages/indiekit/test/integration/200-app-icon.js b/packages/indiekit/test/integration/200-app-icon.js
@@ -6,9 +6,9 @@ import { testServer } from "@indiekit-test/server";
 const server = await testServer();
 const request = supertest.agent(server);
 
-describe("indiekit GET /assets/app-icon-512.png", () => {
+describe("indiekit GET /assets/app-icon-512-any.png", () => {
   it("Returns JavaScript", async () => {
-    const result = await request.get("/assets/app-icon-512.png");
+    const result = await request.get("/assets/app-icon-512-any.png");
 
     assert.equal(result.status, 200);
     assert.equal(result.type, "image/png");
