From da5d2d6ded44cdaf7a119efb943edb59fccd41a8 Mon Sep 17 00:00:00 2001 From: jknapp Date: Sat, 3 Jan 2026 18:25:17 -0800 Subject: [PATCH] Fix PWA to open as standalone app instead of browser tab MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## manifest.json - Add `id` and `scope` fields for proper PWA identification - Split icon purposes into separate entries (was "any maskable", now separate) - Add `prefer_related_applications: false` ## index.html - Add `viewport-fit=cover` for notched devices - Add `mobile-web-app-capable` meta tag - Add `application-name` and `msapplication` meta tags - Add both 192px and 512px apple-touch-icon sizes ## styles.css - Add safe-area-inset padding for notched devices (iPhone X+) - Use 100dvh for proper mobile viewport height - Add bottom safe area to toast container and macro grid ## service-worker.js - Bump cache version to v2 to force update 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- web/css/styles.css | 8 +++++++- web/index.html | 10 +++++++++- web/manifest.json | 21 ++++++++++++++++++--- web/service-worker.js | 2 +- 4 files changed, 35 insertions(+), 6 deletions(-) diff --git a/web/css/styles.css b/web/css/styles.css index 51eda75..9d3959a 100644 --- a/web/css/styles.css +++ b/web/css/styles.css @@ -25,7 +25,12 @@ body { background-color: var(--bg-color); color: var(--fg-color); min-height: 100vh; + min-height: 100dvh; overflow-x: hidden; + /* Safe area for notched devices */ + padding-top: env(safe-area-inset-top); + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); } /* Header */ @@ -109,6 +114,7 @@ body { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; padding: 1rem; + padding-bottom: calc(1rem + env(safe-area-inset-bottom)); } .macro-card { @@ -405,7 +411,7 @@ body { /* Status/Toast Messages */ .toast-container { position: fixed; - bottom: 1rem; + bottom: calc(1rem + env(safe-area-inset-bottom)); right: 1rem; z-index: 300; } diff --git a/web/index.html b/web/index.html index 82de50c..32db8da 100644 --- a/web/index.html +++ b/web/index.html @@ -2,18 +2,26 @@ - + + + + + + + MacroPad + + diff --git a/web/manifest.json b/web/manifest.json index dcad7c3..f2a0b7d 100644 --- a/web/manifest.json +++ b/web/manifest.json @@ -1,8 +1,10 @@ { + "id": "/", "name": "MacroPad Server", "short_name": "MacroPad", "description": "Remote macro control for your desktop", "start_url": "/", + "scope": "/", "display": "standalone", "background_color": "#2e2e2e", "theme_color": "#007acc", @@ -12,14 +14,27 @@ "src": "/static/icons/icon-192.png", "sizes": "192x192", "type": "image/png", - "purpose": "any maskable" + "purpose": "any" + }, + { + "src": "/static/icons/icon-192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" }, { "src": "/static/icons/icon-512.png", "sizes": "512x512", "type": "image/png", - "purpose": "any maskable" + "purpose": "any" + }, + { + "src": "/static/icons/icon-512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" } ], - "categories": ["utilities", "productivity"] + "categories": ["utilities", "productivity"], + "prefer_related_applications": false } diff --git a/web/service-worker.js b/web/service-worker.js index 4590ddf..4aacc0e 100644 --- a/web/service-worker.js +++ b/web/service-worker.js @@ -1,5 +1,5 @@ // MacroPad PWA Service Worker -const CACHE_NAME = 'macropad-v1'; +const CACHE_NAME = 'macropad-v2'; const ASSETS_TO_CACHE = [ '/', '/static/css/styles.css',