Add favicon for PWA

site/source/public/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/favicon/mstile-150x150.png?v=1.0"/>
+            <TileColor>#603cba</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

site/source/public/favicon/favicon.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1060 5100 c-466 -87 -844 -412 -992 -853 -16 -50 -31 -97 -33 -106
+-2 -9 -9 -45 -16 -81 -15 -72 -18 -323 -5 -409 60 -403 325 -768 690 -950 142
+-71 229 -99 391 -126 72 -12 18 -13 -504 -14 l-583 -1 6 -122 c8 -144 14 -215
+21 -244 2 -12 7 -39 10 -60 3 -21 10 -59 16 -84 5 -25 11 -54 13 -65 40 -207
+194 -585 306 -752 17 -24 30 -47 30 -50 0 -9 115 -167 181 -248 79 -99 249
+-269 344 -345 44 -36 82 -67 85 -70 27 -27 247 -168 340 -218 207 -110 505
+-219 680 -248 14 -2 36 -7 48 -10 13 -2 40 -7 60 -10 21 -3 80 -11 132 -18 92
+-13 502 -15 560 -3 14 3 48 8 75 11 28 3 61 8 75 11 14 3 41 8 60 11 49 8 243
+59 315 83 267 87 574 251 762 406 7 6 18 15 25 20 258 198 513 507 675 815 75
+143 170 377 188 464 3 10 9 33 14 50 11 33 47 190 55 241 3 17 8 50 11 75 4
+25 9 59 12 75 3 17 8 664 10 1438 l4 1408 -123 -6 c-68 -3 -136 -7 -153 -9
+-513 -60 -973 -256 -1360 -579 -126 -106 -341 -332 -404 -426 -14 -20 -28 -38
+-31 -41 -38 -27 -309 -514 -295 -529 3 -2 1 -9 -4 -15 -37 -44 -148 -467 -165
+-626 -11 -94 -17 -182 -20 -255 l-2 -70 -575 -1 c-495 -1 -564 0 -499 11 575
+98 1011 554 1076 1126 13 107 9 222 -10 359 -12 80 -60 228 -108 330 -97 204
+-263 394 -449 515 -143 93 -315 165 -454 189 -16 3 -41 9 -55 12 -14 3 -95 7
+-180 9 -115 2 -179 -2 -250 -15z"/>
+</g>
+</svg>

site/source/public/favicon/safari-pinned-tab.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1060 5100 c-466 -87 -844 -412 -992 -853 -16 -50 -31 -97 -33 -106
+-2 -9 -9 -45 -16 -81 -15 -72 -18 -323 -5 -409 60 -403 325 -768 690 -950 142
+-71 229 -99 391 -126 72 -12 18 -13 -504 -14 l-583 -1 6 -122 c8 -144 14 -215
+21 -244 2 -12 7 -39 10 -60 3 -21 10 -59 16 -84 5 -25 11 -54 13 -65 40 -207
+194 -585 306 -752 17 -24 30 -47 30 -50 0 -9 115 -167 181 -248 79 -99 249
+-269 344 -345 44 -36 82 -67 85 -70 27 -27 247 -168 340 -218 207 -110 505
+-219 680 -248 14 -2 36 -7 48 -10 13 -2 40 -7 60 -10 21 -3 80 -11 132 -18 92
+-13 502 -15 560 -3 14 3 48 8 75 11 28 3 61 8 75 11 14 3 41 8 60 11 49 8 243
+59 315 83 267 87 574 251 762 406 7 6 18 15 25 20 258 198 513 507 675 815 75
+143 170 377 188 464 3 10 9 33 14 50 11 33 47 190 55 241 3 17 8 50 11 75 4
+25 9 59 12 75 3 17 8 664 10 1438 l4 1408 -123 -6 c-68 -3 -136 -7 -153 -9
+-513 -60 -973 -256 -1360 -579 -126 -106 -341 -332 -404 -426 -14 -20 -28 -38
+-31 -41 -38 -27 -309 -514 -295 -529 3 -2 1 -9 -4 -15 -37 -44 -148 -467 -165
+-626 -11 -94 -17 -182 -20 -255 l-2 -70 -575 -1 c-495 -1 -564 0 -499 11 575
+98 1011 554 1076 1126 13 107 9 222 -10 359 -12 80 -60 228 -108 330 -97 204
+-263 394 -449 515 -143 93 -315 165 -454 189 -16 3 -41 9 -55 12 -14 3 -95 7
+-180 9 -115 2 -179 -2 -250 -15z"/>
+</g>
+</svg>

site/source/template.html

@@ -49,6 +49,8 @@
 		<meta property="og:title" content="{{ title }}" />
 		<meta property="og:description" content="{{ description }}" />
 		<meta property="og:image" content="{{ shareImage }}" />
+		<meta name="theme-color" content="#2975d1" />
+
 		<!--app-helmet-tags:end-->
 
 		<style>
@@ -157,7 +159,6 @@
 				}
 			}
 		</style>
-		<meta name="theme-color" content="#2975d1" />
 		<!--app-style-->
 	</head>
 

site/vite.config.ts

@@ -64,6 +64,7 @@ export default defineConfig(({ command, mode }) => ({
 		}),
 		VitePWA({
 			registerType: 'prompt',
+			strategies: 'generateSW',
 			workbox: {
 				cleanupOutdatedCaches: true,
 				clientsClaim: true,
@@ -77,38 +78,17 @@ export default defineConfig(({ command, mode }) => ({
 									options.sameOrigin &&
 									options.url.pathname.startsWith('/twemoji/')
 								) &&
-								!(
-									options.sameOrigin &&
-									options.url.pathname.startsWith('/twemoji/')
-								)
+								!(!options.sameOrigin && options.url.hostname === 'polyfill.io')
 							) {
 								console.log('=>', options.url.pathname)
 							}
 
-							return (
-								options.sameOrigin && options.url.pathname.startsWith('/fonts/')
-							)
-						},
-						handler: 'CacheFirst',
-						options: {
-							cacheName: 'fonts-cache',
-							expiration: {
-								maxEntries: 10,
-								maxAgeSeconds: 1 * YEAR,
-							},
-							cacheableResponse: {
-								statuses: [0, 200],
-							},
-						},
-					},
-					{
-						urlPattern: (options) => {
 							return (
 								options.sameOrigin &&
 								options.url.pathname.startsWith('/twemoji/')
 							)
 						},
-						handler: 'CacheFirst',
+						handler: 'StaleWhileRevalidate',
 						options: {
 							cacheName: 'twemoji-cache',
 							expiration: {
@@ -121,12 +101,9 @@ export default defineConfig(({ command, mode }) => ({
 						},
 					},
 					{
-						urlPattern: (options) => {
-							return (
-								!options.sameOrigin && options.url.hostname === 'polyfill.io'
-							)
-						},
-						handler: 'CacheFirst',
+						urlPattern: (options) =>
+							!options.sameOrigin && options.url.hostname === 'polyfill.io',
+						handler: 'NetworkFirst',
 						options: {
 							cacheName: 'external-cache',
 							expiration: {
@@ -140,34 +117,29 @@ export default defineConfig(({ command, mode }) => ({
 					},
 				],
 			},
-			srcDir: 'public/favicon',
-			includeAssets: [
-				'favicon.svg',
-				'favicon.ico',
-				'robots.txt',
-				'apple-touch-icon.png',
-			],
+			includeAssets: ['fonts/*.{woff,woff2}', 'favicon/*.{ico,png,svg,xml}'],
 			manifest: {
+				start_url: '/',
 				name: 'Mon entreprise',
 				short_name: 'Mon entreprise',
 				description: "L'assistant officiel du créateur d'entreprise",
 				lang: 'fr',
 				orientation: 'portrait-primary',
+				display: 'minimal-ui',
+				theme_color: '#2975d1',
+				background_color: 'none',
 				icons: [
 					{
-						src: '/favicon/android-chrome-192x192.png?v=1.0',
+						src: '/favicon/android-chrome-192x192-shadow.png?v=1.0',
 						sizes: '192x192',
 						type: 'image/png',
 					},
 					{
-						src: '/favicon/android-chrome-512x512.png?v=1.0',
+						src: '/favicon/android-chrome-512x512-shadow.png?v=1.0',
 						sizes: '512x512',
 						type: 'image/png',
 					},
 				],
-				theme_color: '#ffffff',
-				background_color: '#ffffff',
-				display: 'standalone',
 			},
 		}),
 		legacy({