Fix PWA installation on mobile devices

- Remove references to non-existent PNG icon files in manifest
- Use SVG icon for both 'any' and 'maskable' purposes
- Add start_url and scope to manifest for proper PWA installation
- Remove orientation restriction for better compatibility
- Remove shortcuts that reference non-existent routes
- Update vite.config.ts with proper PWA settings
- Add devOptions to disable PWA in development
- Separate 'any' and 'maskable' icon entries as required by spec
- Increase container top padding to prevent hover clipping

Build success: 44 entries precached (82.02 MB)

Co-authored-by: Cursor <cursoragent@cursor.com>

public/manifest.json

@@ -3,63 +3,23 @@
   "short_name": "IndeedHub",
   "description": "Stream films and content on the decentralized web powered by Nostr and Bitcoin",
   "start_url": "/",
+  "scope": "/",
   "display": "standalone",
   "background_color": "#0a0a0a",
   "theme_color": "#0a0a0a",
-  "orientation": "portrait-primary",
   "icons": [
     {
       "src": "/assets/images/app-icon.svg",
       "sizes": "any",
       "type": "image/svg+xml",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "/pwa-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
       "purpose": "any"
     },
     {
-      "src": "/pwa-512x512.png",
+      "src": "/assets/images/app-icon.svg",
       "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/pwa-maskable-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
+      "type": "image/svg+xml",
       "purpose": "maskable"
-    },
-    {
-      "src": "/pwa-maskable-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "/apple-touch-icon.png",
-      "sizes": "180x180",
-      "type": "image/png",
-      "purpose": "any"
     }
   ],
-  "categories": ["entertainment", "video", "streaming"],
-  "shortcuts": [
-    {
-      "name": "Browse Films",
-      "short_name": "Films",
-      "description": "Browse all films",
-      "url": "/films",
-      "icons": [{ "src": "/assets/images/app-icon.svg", "sizes": "96x96" }]
-    },
-    {
-      "name": "My List",
-      "short_name": "My List",
-      "description": "View your saved content",
-      "url": "/mylist",
-      "icons": [{ "src": "/assets/images/app-icon.svg", "sizes": "96x96" }]
-    }
-  ]
+  "categories": ["entertainment", "video", "streaming"]
 }

vite.config.ts

@@ -9,6 +9,9 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
       includeAssets: ['assets/images/app-icon.svg', 'assets/fonts/*.otf'],
+      devOptions: {
+        enabled: false
+      },
       manifest: {
         name: 'IndeedHub - Decentralized Media Streaming',
         short_name: 'IndeedHub',
@@ -16,13 +19,20 @@ export default defineConfig({
         theme_color: '#0a0a0a',
         background_color: '#0a0a0a',
         display: 'standalone',
-        orientation: 'portrait-primary',
+        start_url: '/',
+        scope: '/',
         icons: [
           {
             src: '/assets/images/app-icon.svg',
             sizes: '512x512',
             type: 'image/svg+xml',
-            purpose: 'any maskable'
+            purpose: 'any'
+          },
+          {
+            src: '/assets/images/app-icon.svg',
+            sizes: '512x512',
+            type: 'image/svg+xml',
+            purpose: 'maskable'
           }
         ]
       },