wip: service worker

examples/example-site/astro.config.mjs

@@ -1,5 +1,8 @@
 // @ts-check
 import {defineConfig} from "astro/config";
+import serviceWorker from "astrojs-service-worker";
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [serviceWorker()],
+});

examples/example-site/package.json

@@ -11,11 +11,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.16.7",
     "@astrojs/check": "^0.9.4",
+    "@binz/visor": "workspace:*",
+    "astro": "^4.16.7",
+    "astrojs-service-worker": "^2.0.0",
     "sharp": "^0.33.5",
     "sharp-ico": "^0.1.5",
-    "typescript": "^5.6.3",
-    "@binz/visor": "workspace:*"
+    "typescript": "^5.6.3"
   }
 }

examples/example-site/src/pages/manifest.json.ts

@@ -10,9 +10,9 @@ export const GET: APIRoute = Manifest({
   background_color: "#FFFFFF",
   description: "An example site",
   display: "standalone",
-  favicon: {
+  icon: {
     src: favicon,
-    faviconSizes: faviconPngSizes,
+    iconSizes: faviconPngSizes,
   },
   id: "example-com",
   short_name: "Example",

package.json

@@ -12,6 +12,7 @@
     "clean": "turbo run clean",
     "dev": "turbo run dev",
     "lint": "turbo run lint",
+    "preview": "turbo run preview",
     "test": "turbo run test",
     "ci:publish": "turbo run build && changeset publish"
   },

packages/visor/src/lib/manifest.ts

@@ -1,7 +1,7 @@
 import type {APIRoute, UnresolvedImageTransform} from "astro";
 import {getImage} from "astro:assets";
 
-const faviconPngSizes = [192, 384, 512, 1024];
+const iconPngSizes = [192, 384, 512, 1024];
 
 interface Manifest {
   name: string;
@@ -16,8 +16,8 @@ interface Manifest {
 }
 
 export interface ManifestConfig extends Omit<Manifest, "icons"> {
-  favicon: Omit<UnresolvedImageTransform, "width" | "height"> & {
-    faviconSizes?: number[];
+  icon: Omit<UnresolvedImageTransform, "width" | "height"> & {
+    iconSizes?: number[];
   };
 }
 
@@ -37,21 +37,22 @@ export const buildManifest: ManifestRoute =
     theme_color = "#000000",
     background_color = "#ffffff",
     id = name.replace(/[\s.]/g, "-").toLowerCase(),
-    favicon: {src, faviconSizes = faviconPngSizes, ...faviconOptions},
+    icon: {src, iconSizes = iconPngSizes, ...iconOptions},
   }): APIRoute =>
   async () => {
     const icons = await Promise.all(
-      faviconSizes.map(async size => {
+      iconSizes.map(async size => {
         const image = await getImage({
           src,
           width: size,
           height: size,
-          ...faviconOptions,
+          ...iconOptions,
         });
         return {
           src: image.src,
           type: `image/${image.options.format}`,
           sizes: `${image.options.width}x${image.options.height}`,
+          purpose: "any",
         };
       })
     );