Fix Android PWA installation - add proper web app instead of shortcut

Android PWA Requirements:
- Add mobile-web-app-capable meta tag for Android
- Add application-name meta tag
- Add prefer_related_applications: false to manifest
- Add explicit icon sizes (192x192, 512x512) for both any and maskable
- Add orientation: any for flexible display
- Add lang and dir to manifest for proper localization
- Add ?source=pwa to start_url for analytics
- Add crossorigin="use-credentials" to manifest link
- Add proper service worker registration in main.ts
- Add vite-plugin-pwa/client types to env.d.ts

This ensures Android recognizes it as a full PWA instead of creating a shortcut

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-03 00:03:00 +00:00
parent 91dd58c0b2
commit 0031456f4e
4 changed files with 32 additions and 4 deletions

View File

@@ -9,11 +9,13 @@
<!-- PWA Meta Tags -->
<meta name="theme-color" content="#0a0a0a">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="IndeedHub">
<meta name="application-name" content="IndeedHub">
<link rel="apple-touch-icon" href="/assets/images/app-icon.svg">
<link rel="manifest" href="/manifest.json">
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
</head>
<body>
<div id="app"></div>

View File

@@ -2,18 +2,32 @@
"name": "IndeedHub - Decentralized Media Streaming",
"short_name": "IndeedHub",
"description": "Stream films and content on the decentralized web powered by Nostr and Bitcoin",
"start_url": "/",
"start_url": "/?source=pwa",
"scope": "/",
"display": "standalone",
"orientation": "any",
"background_color": "#0a0a0a",
"theme_color": "#0a0a0a",
"prefer_related_applications": false,
"icons": [
{
"src": "/assets/images/app-icon.svg",
"sizes": "any",
"sizes": "192x192",
"type": "image/svg+xml",
"purpose": "any"
},
{
"src": "/assets/images/app-icon.svg",
"sizes": "512x512",
"type": "image/svg+xml",
"purpose": "any"
},
{
"src": "/assets/images/app-icon.svg",
"sizes": "192x192",
"type": "image/svg+xml",
"purpose": "maskable"
},
{
"src": "/assets/images/app-icon.svg",
"sizes": "512x512",
@@ -21,5 +35,7 @@
"purpose": "maskable"
}
],
"categories": ["entertainment", "video", "streaming"]
"categories": ["entertainment", "video", "streaming"],
"lang": "en-US",
"dir": "ltr"
}

1
src/env.d.ts vendored
View File

@@ -1,4 +1,5 @@
/// <reference types="vite/client" />
/// <reference types="vite-plugin-pwa/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'

View File

@@ -10,3 +10,12 @@ app.use(createPinia())
app.use(router)
app.mount('#app')
// Register PWA service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').catch(() => {
// Service worker registration failed, that's okay
})
})
}