Merge branch 'mobilizon-webmanifest' into 'main'

reintroduce webmanifest for PWA compatability

See merge request framasoft/mobilizon!1424

js/src/App.vue

@@ -178,7 +178,9 @@ onMounted(() => {
       cancelText: t("Ignore"),
       message: t("A new version is available."),
       onAction: async () => {
-        const registration = event.detail as ServiceWorkerRegistration;
+        const registration = (
+          event as unknown as { detail: ServiceWorkerRegistration }
+        ).detail;
         try {
           await refreshApp(registration);
           window.location.reload();

js/tsconfig.json

@@ -14,7 +14,7 @@
     "isolatedModules": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": ["webpack-env", "jest", "vite/client"],
+    "types": ["webpack-env", "jest", "vite/client", "vite-plugin-pwa/vue"],
     "typeRoots": ["./@types", "./node_modules/@types"],
     "paths": {
       "@/*": ["src/*"]

js/vite.config.js

@@ -19,7 +19,7 @@ export default defineConfig(({ command }) => {
     plugins: [
       vue(),
       VitePWA({
-        // registerType: "autoUpdate",
+        registerType: "autoUpdate",
         strategies: "injectManifest",
         srcDir: "src",
         filename: "service-worker.ts",
@@ -27,6 +27,36 @@ export default defineConfig(({ command }) => {
         // devOptions: {
         //   enabled: true,
         // },
+        manifest: {
+          name: "Mobilizon",
+          short_name: "Mobilizon",
+          orientation: "portrait-primary",
+          theme_color: "#ffd599",
+          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)) {