feat(pwa): add PWA install support and update installation docs
CI / Build & Test (push) Successful in 2m50s
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:
@@ -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:
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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" }
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user