@signalk/app-dock 1.1.0-beta.1 → 1.1.0

package/README.md

@@ -13,6 +13,8 @@ A macOS-style app dock for switching between Signal K webapps on touch screens.
 - **Autostart** -- optionally load a default app immediately on open
 - **keep-alive or destroy** iframe lifecycle
 - **Night/day mode toggle** -- optional sun/moon button that flips `environment.mode` via a PUT handler
+- **Fullscreen toggle** -- optional button that hides browser chrome via the Fullscreen API; feature-detected, so hidden on devices without API support (notably iPadOS Safari -- use Add to Home Screen there)
+- **Installable as an app** -- ships a web app manifest and apple-touch-icon so iOS, Android, and desktop browsers can install the dock to the home screen and launch it in standalone mode (no browser chrome). Works over plain HTTP -- no SSL required
 - **Active dot indicator**, label tooltip, haptic feedback
 - **Embedded config panel** in the admin UI with webapp discovery, drag-to-reorder, and live preview
 
@@ -35,6 +37,18 @@ Tip: double-tapping a clickable element in the underlying webapp will activate t
 
 Config changes made in **Plugin Config** apply automatically within ~5 seconds: structural changes (position, icon size, etc.) reload the dock page; changes to the app list hot-update in place.
 
+## Install as an app
+
+The dock ships a web app manifest, so iOS and Android can install it to the home screen and launch it like a native app -- no Safari/Chrome chrome, no URL bar.
+
+- **iPad / iPhone (Safari)**: open the dock URL, tap the Share icon, choose **Add to Home Screen**.
+- **Android (Chrome)**: open the dock URL, tap the ⋮ menu, choose **Install app** (or **Add to Home Screen**).
+- **Desktop (Chrome, Edge)**: an install icon appears in the address bar; click it.
+
+HTTPS is **not required** for Add-to-Home-Screen -- the dock installs cleanly over plain `http://your-sk-server:3000/`. It works equally over HTTPS with a self-signed or local-CA cert, provided the device has been configured to trust that CA (the usual iPad profile flow: Settings > General > VPN & Device Management > trust the profile > Settings > General > About > Certificate Trust Settings > enable full trust).
+
+If the installed dock ever displays a blank screen after a long idle period (rare; only if the server's caching layer ignores the dock's `no-cache` directives), remove the home-screen icon and re-add it from Safari.
+
 ## Configuration
 
 Open **Plugin Config > App Dock** in the admin UI. The embedded configurator provides:
@@ -47,15 +61,16 @@ Open **Plugin Config > App Dock** in the admin UI. The embedded configurator pro
 
 ### Settings
 
-| Setting               | Default      | Description                                                                                      |
-| --------------------- | ------------ | ------------------------------------------------------------------------------------------------ |
-| `position`            | `bottom`     | Dock edge: `bottom`, `top`, `left`, `right`                                                      |
-| `iframeMode`          | `keep-alive` | `keep-alive` loads each app once and hides/shows (faster, more RAM); `destroy` reloads each time |
-| `iconSize`            | `56`         | Base icon size in px                                                                             |
-| `magnification`       | `true`       | Enable macOS-style magnification effect                                                          |
-| `magnificationScale`  | `1.7`        | Max icon scale (1.0-2.5)                                                                         |
-| `showNightModeButton` | `true`       | Show sun/moon button in dock; PUT-writes `environment.mode`                                      |
-| `showExitButton`      | `false`      | Show X button that returns to the Signal K admin UI                                              |
+| Setting                | Default      | Description                                                                                      |
+| ---------------------- | ------------ | ------------------------------------------------------------------------------------------------ |
+| `position`             | `bottom`     | Dock edge: `bottom`, `top`, `left`, `right`                                                      |
+| `iframeMode`           | `keep-alive` | `keep-alive` loads each app once and hides/shows (faster, more RAM); `destroy` reloads each time |
+| `iconSize`             | `56`         | Base icon size in px                                                                             |
+| `magnification`        | `true`       | Enable macOS-style magnification effect                                                          |
+| `magnificationScale`   | `1.7`        | Max icon scale (1.0-2.5)                                                                         |
+| `showNightModeButton`  | `true`       | Show sun/moon button in dock; PUT-writes `environment.mode`                                      |
+| `showFullscreenButton` | `false`      | Show fullscreen toggle in dock; hidden automatically where the Fullscreen API is unavailable     |
+| `showExitButton`       | `false`      | Show X button that returns to the Signal K admin UI                                              |
 
 ## Development
 
@@ -87,6 +102,16 @@ The repo ships three cooperating surfaces:
 | `npm run lint`         | ESLint check                                                      |
 | `npm run build:config` | Rebuild the admin UI config panel (required after `src/` changes) |
 
+### Icon assets
+
+If `public/app-icon.svg` changes, regenerate the 180-px apple-touch-icon:
+
+```bash
+rsvg-convert -w 180 -h 180 public/app-icon.svg -o public/app-icon-180.png
+```
+
+`public/app-icon-maskable.svg` is a hand-authored wrapper that places the artwork inside Android's 80% safe zone; if the main icon's layout changes meaningfully, update it by hand to match.
+
 ## License
 
 Apache-2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/app-dock",
-  "version": "1.1.0-beta.1",
+  "version": "1.1.0",
   "description": "macOS-style configurable app dock for switching between SignalK webapps on touch screens",
   "repository": {
     "url": "https://github.com/SignalK/app-dock"

package/public/app-icon-maskable.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#60a5fa"/>
+      <stop offset="100%" stop-color="#2563eb"/>
+    </linearGradient>
+  </defs>
+  <rect width="100" height="100" fill="url(#bg)"/>
+  <g transform="translate(14 14)">
+    <rect x="8" y="48" width="56" height="16" rx="8" fill="#ffffff" fill-opacity="0.25" stroke="#ffffff" stroke-opacity="0.4" stroke-width="0.5"/>
+    <rect x="14" y="51" width="10" height="10" rx="2.5" fill="#3b82f6" opacity="0.9"/>
+    <rect x="31" y="51" width="10" height="10" rx="2.5" fill="#10b981" opacity="0.9"/>
+    <rect x="48" y="51" width="10" height="10" rx="2.5" fill="#f59e0b" opacity="0.9"/>
+    <rect x="28" y="34" width="16" height="16" rx="3.5" fill="#10b981" opacity="0.95"/>
+    <circle cx="36" cy="66" r="1.5" fill="#ffffff" fill-opacity="0.8"/>
+    <circle cx="36" cy="22" r="10" fill="none" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1"/>
+    <line x1="36" y1="14" x2="36" y2="18" stroke="#ffffff" stroke-opacity="0.3" stroke-width="1" stroke-linecap="round"/>
+    <line x1="36" y1="26" x2="36" y2="30" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1" stroke-linecap="round"/>
+    <line x1="28" y1="22" x2="32" y2="22" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1" stroke-linecap="round"/>
+    <line x1="40" y1="22" x2="44" y2="22" stroke="#ffffff" stroke-opacity="0.15" stroke-width="1" stroke-linecap="round"/>
+    <polygon points="36,15 34,22 36,20 38,22" fill="#ef4444" fill-opacity="0.7"/>
+    <polygon points="36,29 34,22 36,24 38,22" fill="#ffffff" fill-opacity="0.25"/>
+  </g>
+</svg>

package/public/index.html

@@ -4,6 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <meta name="mobile-web-app-capable" content="yes" />
+    <link rel="manifest" href="manifest.webmanifest" />
+    <link rel="icon" type="image/svg+xml" href="app-icon.svg" />
+    <link rel="apple-touch-icon" href="app-icon-180.png" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="App Dock" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="theme-color" content="#000000" />
+    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
     <title>SK Dock</title>
     <link rel="stylesheet" href="dock.css" />
   </head>

package/public/manifest.webmanifest

@@ -0,0 +1,31 @@
+{
+  "name": "Signal K App Dock",
+  "short_name": "App Dock",
+  "description": "macOS-style dock to switch between Signal K webapps",
+  "start_url": "/@signalk/app-dock/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "app-icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "app-icon-180.png",
+      "sizes": "180x180",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "app-icon-maskable.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "maskable"
+    }
+  ]
+}

package/test/plugin.test.js

@@ -521,4 +521,22 @@ describe('public files', () => {
   it('icon-settings.svg exists', () => {
     assert.ok(fs.existsSync(path.join(publicDir, 'icon-settings.svg')))
   })
+
+  it('manifest.webmanifest exists and is valid JSON with required PWA fields', () => {
+    const manifestPath = path.join(publicDir, 'manifest.webmanifest')
+    assert.ok(fs.existsSync(manifestPath))
+    const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'))
+    assert.equal(typeof manifest.name, 'string')
+    assert.equal(typeof manifest.start_url, 'string')
+    assert.equal(manifest.display, 'standalone')
+    assert.ok(Array.isArray(manifest.icons) && manifest.icons.length > 0)
+  })
+
+  it('app-icon-180.png exists (apple-touch-icon)', () => {
+    assert.ok(fs.existsSync(path.join(publicDir, 'app-icon-180.png')))
+  })
+
+  it('app-icon-maskable.svg exists', () => {
+    assert.ok(fs.existsSync(path.join(publicDir, 'app-icon-maskable.svg')))
+  })
 })