MacroPad/MP-Server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Fix PWA to open as standalone app instead of browser tab

Browse Source 
## 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 <noreply@anthropic.com>
This commit is contained in:
jknapp
2026-01-03 18:25:17 -08:00
parent b37def8fec
commit da5d2d6ded
4 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/css/styles.css
View File

@@ -25,7 +25,12 @@ body {
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--fg-color); color: var(--fg-color);
min-height: 100vh; min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden; 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 */ /* Header */
@@ -109,6 +114,7 @@ body {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem; gap: 1rem;
padding: 1rem; padding: 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
} }
.macro-card { .macro-card {
@@ -405,7 +411,7 @@ body {
/* Status/Toast Messages */ /* Status/Toast Messages */
.toast-container { .toast-container {
position: fixed; position: fixed;
bottom: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
right: 1rem; right: 1rem;
z-index: 300; z-index: 300;
} }

10
web/index.html
View File

@@ -2,18 +2,26 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#007acc"> <meta name="theme-color" content="#007acc">
<meta name="description" content="Remote macro control for your desktop"> <meta name="description" content="Remote macro control for your desktop">
<!-- PWA / iOS specific -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-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-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MacroPad"> <meta name="apple-mobile-web-app-title" content="MacroPad">
<meta name="application-name" content="MacroPad">
<meta name="msapplication-TileColor" content="#007acc">
<meta name="msapplication-tap-highlight" content="no">
<title>MacroPad</title> <title>MacroPad</title>
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" sizes="192x192" href="/static/icons/icon-192.png"> <link rel="icon" type="image/png" sizes="192x192" href="/static/icons/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/static/icons/icon-512.png">
<link rel="apple-touch-icon" href="/static/icons/icon-192.png"> <link rel="apple-touch-icon" href="/static/icons/icon-192.png">
<link rel="apple-touch-icon" sizes="512x512" href="/static/icons/icon-512.png">
<link rel="stylesheet" href="/static/css/styles.css"> <link rel="stylesheet" href="/static/css/styles.css">
</head> </head>
<body> <body>

21
web/manifest.json
View File

@@ -1,8 +1,10 @@
{ {
"id": "/",
"name": "MacroPad Server", "name": "MacroPad Server",
"short_name": "MacroPad", "short_name": "MacroPad",
"description": "Remote macro control for your desktop", "description": "Remote macro control for your desktop",
"start_url": "/", "start_url": "/",
"scope": "/",
"display": "standalone", "display": "standalone",
"background_color": "#2e2e2e", "background_color": "#2e2e2e",
"theme_color": "#007acc", "theme_color": "#007acc",
@@ -12,14 +14,27 @@
"src": "/static/icons/icon-192.png", "src": "/static/icons/icon-192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png", "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", "src": "/static/icons/icon-512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png", "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
} }

2
web/service-worker.js
View File

@@ -1,5 +1,5 @@
// MacroPad PWA Service Worker // MacroPad PWA Service Worker
const CACHE_NAME = 'macropad-v1'; const CACHE_NAME = 'macropad-v2';
const ASSETS_TO_CACHE = [ const ASSETS_TO_CACHE = [
'/', '/',
'/static/css/styles.css', '/static/css/styles.css',