Align frontend with VitePWA webmanifest requirements

front/index.html

@@ -6,8 +6,17 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <meta name="generator" content="Funkwhale">
-  <link rel="icon" href="/favicon.png">
   <title>Funkwhale</title>
+  <meta name="description" content="TODO">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=1">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=1">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=1">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg?v=1" color="#009fe3">
+  <link rel="shortcut icon" href="/favicon.ico?v=1">
+  <meta name="apple-mobile-web-app-title" content="Funkwhale">
+  <meta name="application-name" content="Funkwhale">
+  <meta name="msapplication-TileColor" content="#009fe3">
+  <meta name="theme-color" content="#ffffff">
   <style>
     #fake-app {
       width: 100vw;

front/public/browserconfig.xml

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

front/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

front/public/safari-pinned-tab.svg

@@ -0,0 +1,41 @@
+<?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="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1803 5619 c-19 -24 -35 -140 -28 -208 24 -224 155 -416 395 -576
+135 -90 252 -145 435 -205 181 -59 251 -91 342 -156 111 -79 208 -222 243
+-357 11 -43 24 -146 30 -238 12 -180 21 -208 93 -286 124 -135 302 -115 405
+45 32 52 36 66 44 157 26 321 38 373 109 491 103 170 220 248 514 344 226 74
+357 142 523 273 131 103 241 267 278 416 19 75 16 252 -4 289 -12 21 -19 22
+-115 22 -126 0 -301 -15 -427 -36 -148 -25 -281 -69 -450 -149 -85 -40 -222
+-97 -305 -125 -293 -101 -330 -130 -392 -310 -3 -9 -10 2 -18 27 -18 59 -59
+126 -96 157 -48 40 -90 59 -270 121 -90 31 -229 87 -309 125 -281 133 -457
+174 -810 187 -144 5 -177 3 -187 -8z"/>
+<path d="M2648 3619 c-14 -8 -18 -24 -18 -79 0 -207 108 -442 274 -596 119
+-111 268 -188 425 -220 111 -22 305 -15 406 15 302 89 535 328 611 628 31 123
+33 237 5 253 -29 15 -353 13 -373 -2 -10 -8 -20 -43 -27 -90 -34 -237 -216
+-398 -451 -398 -235 0 -417 161 -451 398 -7 47 -17 82 -27 90 -20 15 -348 17
+-374 1z"/>
+<path d="M980 3605 c-10 -12 -12 -49 -7 -153 16 -342 100 -667 252 -977 136
+-278 262 -452 490 -680 230 -230 400 -353 680 -490 231 -114 473 -189 737
+-232 161 -25 575 -25 736 0 264 43 506 118 737 232 280 137 450 260 680 490
+230 230 354 401 490 680 153 314 236 635 252 977 5 104 3 141 -7 153 -10 12
+-44 15 -201 15 -221 0 -209 7 -209 -119 0 -117 -26 -293 -65 -445 -192 -752
+-786 -1341 -1545 -1531 -240 -60 -564 -77 -800 -41 -467 72 -866 272 -1195
+601 -242 241 -411 514 -519 837 -58 175 -106 455 -106 623 0 28 -5 56 -12 63
+-8 8 -66 12 -194 12 -151 0 -184 -3 -194 -15z"/>
+<path d="M1810 3605 c-16 -19 -8 -197 15 -328 106 -604 549 -1114 1136 -1311
+159 -53 362 -86 539 -86 865 0 1590 651 1690 1515 13 120 13 198 -2 213 -8 8
+-67 12 -200 12 -216 0 -208 4 -208 -97 0 -32 -7 -99 -15 -150 -76 -468 -411
+-861 -863 -1013 -248 -83 -537 -84 -796 -4 -233 73 -475 243 -627 440 -151
+197 -244 445 -264 709 -4 50 -12 96 -17 103 -8 9 -59 12 -193 12 -152 0 -185
+-3 -195 -15z"/>
+</g>
+</svg>

front/vite.config.ts

@@ -28,6 +28,23 @@ export default defineConfig(({ mode }) => ({
         enabled: true,
         type: 'module',
         navigateFallback: 'index.html'
+      },
+      manifest: {
+        name: 'Funkwhale',
+        short_name: 'Funkwhale',
+        description: 'TODO',
+        icons: [
+          {
+            src: 'android-chrome-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'android-chrome-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
       }
     })
   ],