feat(pwa): add PWA install support and update installation docs
CI / Build & Test (push) Successful in 2m50s

Add manifest.webmanifest to the dashboard so Chrome can install it as
a standalone app via the browser menu. Register the manifest in
web_accessible_resources and link it from dashboard.html. Add a
dedicated PWA install section to docs/INSTALLATION.md covering install
steps, uninstall, and the requirement that the extension remains
installed.
This commit is contained in:
Raven Scott
2026-03-01 01:36:37 -05:00
parent 4eeae78d9b
commit e391d82316
4 changed files with 37 additions and 0 deletions
+22
View File
@@ -129,6 +129,28 @@ Self-hosted signing (without a public AMO listing) is available via the [AMO Dev
--- ---
## Installing the dashboard as a standalone app (PWA)
The dashboard supports being installed as a standalone desktop app via Chrome's PWA install feature. This opens the dashboard in its own OS window without any browser chrome (no address bar, tabs, or toolbar).
**Requirements:** The Holesail Browser extension must already be installed. The PWA is a launcher only — all functionality still runs through the extension and native host.
### How to install
1. Open the dashboard (click the Holesail icon in the toolbar, or press `Alt+Shift+H`)
2. In Chrome, open the browser menu (**⋮** top right) → **Save and share****Install page as app**
3. Confirm the install prompt — the dashboard will appear in your OS app launcher and dock
Once installed, you can open Holesail directly from your desktop without opening a browser tab first.
### Uninstalling the PWA
In Chrome, go to `chrome://apps`, right-click **Holesail Browser**, and select **Remove from Chrome**. This removes the standalone app shortcut but does not affect the extension itself.
> **Note:** The PWA requires the extension to remain installed. If you uninstall the extension, the installed app will no longer function.
---
## First-time setup ## First-time setup
After loading the extension: After loading the extension:
+1
View File
@@ -7,6 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="manifest" href="manifest.webmanifest">
<link rel="stylesheet" href="../vendor/xterm.css"> <link rel="stylesheet" href="../vendor/xterm.css">
<link rel="stylesheet" href="dashboard.css"> <link rel="stylesheet" href="dashboard.css">
<script src="../vendor/xterm.js"></script> <script src="../vendor/xterm.js"></script>
+13
View File
@@ -0,0 +1,13 @@
{
"name": "Holesail Browser",
"short_name": "Holesail",
"description": "P2P Holesail tunnels in the browser",
"start_url": "dashboard.html",
"display": "standalone",
"background_color": "#0f1117",
"theme_color": "#0f1117",
"icons": [
{ "src": "../icons/48.png", "sizes": "48x48", "type": "image/png" },
{ "src": "../icons/128.png", "sizes": "128x128", "type": "image/png" }
]
}
+1
View File
@@ -53,6 +53,7 @@
"vendor/novnc.js", "vendor/novnc.js",
"wrong-domain.html", "wrong-domain.html",
"dashboard/dashboard.html", "dashboard/dashboard.html",
"dashboard/manifest.webmanifest",
"dashboard/dashboard.css", "dashboard/dashboard.css",
"dashboard/data/*.js", "dashboard/data/*.js",
"dashboard/core/*.js", "dashboard/core/*.js",