reintroduce webmanifest for PWA compatability

js/vite.config.js

@@ -23,10 +23,40 @@ export default defineConfig(({ command }) => {
         strategies: "injectManifest",
         srcDir: "src",
         filename: "service-worker.ts",
+        theme_color: "#ffd599",
         // injectRegister: "auto",
         // devOptions: {
         //   enabled: true,
         // },
+        manifest: {
+          name: "Mobilizon",
+          short_name: "Mobilizon",
+          orientation: "portrait-primary",
+          icons: [
+            {
+              src: "./img/icons/android-chrome-192x192.png",
+              sizes: "192x192",
+              type: "image/png",
+            },
+            {
+              src: "./img/icons/android-chrome-512x512.png",
+              sizes: "512x512",
+              type: "image/png",
+            },
+            {
+              src: "./img/icons/android-chrome-maskable-192x192.png",
+              sizes: "192x192",
+              type: "image/png",
+              purpose: "maskable",
+            },
+            {
+              src: "./img/icons/android-chrome-maskable-512x512.png",
+              sizes: "512x512",
+              type: "image/png",
+              purpose: "maskable",
+            },
+          ],
+        },
       }),
       visualizer(),
     ],

lib/web/mobilizon_web.ex

@@ -19,7 +19,7 @@ defmodule Mobilizon.Web do
 
   def static_paths,
     do:
-      ~w(index.html manifest.json service-worker.js css fonts img js favicon.ico robots.txt assets)
+      ~w(index.html manifest.json manifest.webmanifest service-worker.js css fonts img js favicon.ico robots.txt assets)
 
   def controller do
     quote do

lib/web/templates/page/index.html.heex

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png" sizes="152x152" />
     <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color={theme_color()} />
+    <link rel="manifest" href="/manifest.webmanifest" />
     <meta name="theme-color" content={theme_color()} />
     <script>
       if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {