PWA fixes

Firestorm980 · Feb 23, 2024 · 243b48f · 243b48f
1 parent 1a29398
commit 243b48f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,7 +1,7 @@
 import { defineConfig } from 'astro/config'
 import AstroPWA from '@vite-pwa/astro'
 
-const base = '/css-triggers'
+const base = '/css-triggers/'
 
 // https://astro.build/config
 export default defineConfig({
@@ -14,8 +14,8 @@ export default defineConfig({
 	},
 	integrations: [
 		AstroPWA({
+			base,
 			manifest: {
-				base,
 				name: 'CSS Triggers',
 				short_name: 'CSS Triggers',
 				theme_color: '#ffffff',
@@ -24,24 +24,24 @@ export default defineConfig({
 				description: 'A reference for the render impact of mutating CSS properties.',
 				icons: [
 					{
-						src: `${base}/assets/images/favicons/android-chrome-192x192.png`,
+						src: `assets/images/favicons/android-chrome-192x192.png`,
 						sizes: "192x192",
 						type: "image/png"
 					},
 					{
-						src: `${base}/assets/images/favicons/android-chrome-512x512.png`,
+						src: `assets/images/favicons/android-chrome-512x512.png`,
 						sizes: "512x512",
 						type: "image/png"
 					}
 				],
 			},
 			workbox: {
-			  navigateFallback: `${base}/404`,
+			  navigateFallback: `/`,
 			  globPatterns: ['**/*.{css,js,html,svg,png,ico}'],
 			},
 			devOptions: {
 			  enabled: true,
-			  navigateFallbackAllowlist: [/^\/css-triggers\/404$/],
+			  navigateFallbackAllowlist: [/^\/$/],
 			},
 		})
 	]

diff --git a/src/components/Head.astro b/src/components/Head.astro
@@ -4,7 +4,7 @@ export interface Props {
 	title: string;
 }
 
-const base = import.meta.env.BASE_URL
+const base = import.meta.env.BASE_URL;
 const { title } = Astro.props;
 ---
 <head>
@@ -15,10 +15,10 @@ const { title } = Astro.props;
 	<meta name="generator" content={Astro.generator} />
 
     <!-- Icons / Theme -->
-    <link rel="apple-touch-icon" sizes="180x180" href={`${base}assets/images/favicons/apple-touch-icon.png`}>
-    <link rel="icon" type="image/png" sizes="32x32" href={`${base}assets/images/favicons/favicon-32x32.png`}>
-    <link rel="icon" type="image/png" sizes="16x16" href={`${base}assets/images/favicons/favicon-16x16.png`}>
-    <link rel="mask-icon" href={`${base}assets/images/favicons/safari-pinned-tab.svg`} color="#b10dc9">
+    <link rel="apple-touch-icon" sizes="180x180" href={`${base}/assets/images/favicons/apple-touch-icon.png`}>
+    <link rel="icon" type="image/png" sizes="32x32" href={`${base}/assets/images/favicons/favicon-32x32.png`}>
+    <link rel="icon" type="image/png" sizes="16x16" href={`${base}/assets/images/favicons/favicon-16x16.png`}>
+    <link rel="mask-icon" href={`${base}/assets/images/favicons/safari-pinned-tab.svg`} color="#b10dc9">
 	<meta name="msapplication-TileColor" content="#b10dc9">
 	<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
 	<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />