Add:PWA support #354

client/components/app/Appbar.vue

@@ -2,7 +2,7 @@
   <div class="w-full h-16 bg-primary relative">
     <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-50">
       <div class="flex h-full items-center">
-        <img v-if="!showBack" src="/Logo48.png" class="w-10 h-10 md:w-12 md:h-12 mr-4" />
+        <img v-if="!showBack" src="/icon48.png" class="w-10 h-10 md:w-12 md:h-12 mr-4" />
         <a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-4 cursor-pointer">
           <span class="material-icons text-4xl text-white">arrow_back</span>
         </a>

client/nuxt.config.js

@@ -100,22 +100,34 @@ module.exports = {
 
   // nuxt/pwa https://pwa.nuxtjs.org
   pwa: {
-    icon: {
-      source: 'Logo.png'
-    },
+    icon: false,
     meta: {
-      appleStatusBarStyle: 'black-translucent',
+      appleStatusBarStyle: 'black',
       name: 'Audiobookshelf',
-      theme_color: '#373838'
+      theme_color: '#373838',
+      mobileAppIOS: true,
+      nativeUI: true
     },
     manifest: {
       name: 'Audiobookshelf',
       short_name: 'Audiobookshelf',
-      background_color: '#373838'
-    },
-    // workbox: {
-    //   enabled: true // TEMP for dev
-    // }
+      display: 'standalone',
+      background_color: '#373838',
+      icons: [
+        {
+          src: '/icon64.png',
+          sizes: "64x64"
+        },
+        {
+          src: '/icon192.png',
+          sizes: "120x120 144x144 192x192"
+        },
+        {
+          src: '/Logo.png',
+          sizes: "384x384 512x512"
+        }
+      ]
+    }
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build