🐛 [PWA] Fix white border around apple icon (#58)

* 💬 [Astro] Add some config comments * 🐛 [PWA] Try to fix white border apple icon
beefchimi · Jul 22, 2024 · f509bbb · f509bbb
1 parent 92887ac
commit f509bbb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -29,11 +29,13 @@ export default defineConfig({
   integrations: [
     AstroPWA({
       workbox: {
+        // Not sure how this differs from `includeAssets`...
         // globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        // Not sure if we actually want to specify this fallback.
         navigateFallback: '/404',
       },
 
-      // Specify which assets (in addition to the default html/css/js)
+      // Specify which public assets (in addition to the default html/css/js)
       // we want to include in our pre-cache.
       // includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
 

diff --git a/public/custom-pwa/apple-touch-icon-180x180.png b/public/custom-pwa/apple-touch-icon-180x180.png
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -64,7 +64,11 @@ const OG_IMAGE = new URL('/assets/dulmage-social.png', Astro.site).href;
     <!-- <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> -->
     <link rel="icon" href="/favicon.ico" sizes="48x48" />
     <link rel="icon" href="/favicon.png" sizes="any" type="image/png" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
+    <!-- Workaround for `@vite-pwa/assets-generator` adding a thick white border -->
+    <link
+      rel="apple-touch-icon"
+      href="/custom-pwa/apple-touch-icon-180x180.png"
+    />
 
     <!-- Open Graph meta -->
     <meta property="og:type" content="website" />