From ff954f4ad3f97a318d529ddf5b4e9c1c2d602784 Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Tue, 11 Feb 2025 13:30:08 +0000 Subject: [PATCH 1/4] Dashboard: Add new "Allow Install" config option --- nodes/config/locales/en-US/ui_base.json | 4 +++- nodes/config/ui_base.html | 15 +++++++++++++++ nodes/config/ui_base.js | 4 ++++ ui/src/App.vue | 19 +++++++++++++++++++ 4 files changed, 41 insertions(+), 1 deletion(-) diff --git a/nodes/config/locales/en-US/ui_base.json b/nodes/config/locales/en-US/ui_base.json index 68e98980..5295f7e8 100644 --- a/nodes/config/locales/en-US/ui_base.json +++ b/nodes/config/locales/en-US/ui_base.json @@ -39,7 +39,9 @@ "connectionNotifications": "Connection Notifications", "showReconnect": "Show reconnect notification", "showDisconnect": "Show disconnect notification", - "notificationDisplayTime": "notification display time (seconds)" + "notificationDisplayTime": "notification display time (seconds)", + "allowInstall": "Allow App Installation", + "installation": "Installation Options" }, "layout": { "pages": "Pages", diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html index 658de876..805ac1df 100644 --- a/nodes/config/ui_base.html +++ b/nodes/config/ui_base.html @@ -406,6 +406,9 @@ }, showDisconnectNotification: { value: true + }, + allowInstall: { + value: true } }, label: function () { @@ -455,6 +458,11 @@ this.showDisconnectNotification = true $('#node-config-input-showDisconnectNotification').prop('checked', true) } + // backward compatibility for allowing PWA install + if (!('allowInstall' in this)) { + this.allowInstall = true + $('#node-config-input-allowInstall').prop('checked', true) + } }, onpaletteadd: function () { // add the Dashboard 2.0 sidebar @@ -2441,6 +2449,13 @@ Enter the url of your app icon here +
+ +
+
+ + +
diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js index 5558234f..76aacfc4 100644 --- a/nodes/config/ui_base.js +++ b/nodes/config/ui_base.js @@ -80,6 +80,10 @@ module.exports = function (RED) { config.notificationDisplayTime = 5 // Show for 5 seconds } + if (!('allowInstall' in config)) { + config.allowInstall = true // Show for 5 seconds + } + // The headerContent replaces the old (boolean) showPageTitle if (!('headerContent' in config)) { const showPageTitle = ('showPageTitle' in config) ? config.showPageTitle : true diff --git a/ui/src/App.vue b/ui/src/App.vue index d35994cb..7e44340b 100644 --- a/ui/src/App.vue +++ b/ui/src/App.vue @@ -62,6 +62,25 @@ export default { loading: true } }, + head () { + const links = [] + // get default dashboard + if (this.dashboards) { + const dashboards = Object.keys(this.dashboards) + const id = dashboards.length ? dashboards[0] : undefined + const dashboard = this.dashboards[id] + if (dashboard.allowInstall) { + links.push({ + rel: 'manifest', + crossorigin: 'use-credentials', + href: './manifest.webmanifest' + }) + } + } + return { + link: links + } + }, computed: { ...mapState('ui', ['dashboards', 'pages', 'widgets']), ...mapState('setup', ['setup', 'error']), From 578870461ea2887929d495311ebd9a543922dba2 Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Tue, 11 Feb 2025 14:17:19 +0000 Subject: [PATCH 2/4] Add documentation for the new option --- docs/nodes/config/ui-base.md | 27 ++++++++++- nodes/config/locales/en-US/ui_base.html | 61 ++++++++++++++++++++----- 2 files changed, 76 insertions(+), 12 deletions(-) diff --git a/docs/nodes/config/ui-base.md b/docs/nodes/config/ui-base.md index d2ba762a..54bcf499 100644 --- a/docs/nodes/config/ui-base.md +++ b/docs/nodes/config/ui-base.md @@ -38,7 +38,13 @@ _Example of how the 'App Icon' looks on a browser tab_ ![Example of how the 'App Icon' looks](/images/node-examples/ui-base-app-icon-launcher.png "Example of how the 'App Icon' looks"){data-zoomable style="max-width: 200px; margin: auto"} _Example of how the 'App Icon' appears when installed onto an iPhone_ -## Title Bar Style Options +## Allow Install + +It is possible to install any FlowFuse Dashboard applications as a Progressive Web App onto a desktop or mobile device, giving the appearance and user-experience of a native mobile application. You can read more about that functionality [here](../../user/pwa.md). + +The "Allow Install" option provides the capability to enable/disable the option to "Install" your Dashboard as an application. If you are using FlowFuse authentication, this is recommended, as the PWA workers cache content separate from authentication sessions. + +## Header Style Options ### Title Bar - Default @@ -61,6 +67,25 @@ The title bar is not visible at all. Note that it is still possible to see the n ![Example of how the 'Hidden' option looks](/images/node-examples/ui-base-appbar-hidden.png "Example of how the 'Hidden' option looks"){data-zoomable} _Example of how the 'Hidden' option looks_ +## Header Content Options + +Defines the text that is shown in the main page title. + +### Page Name + +This will show the active page's name. Between each page change, this will be updated to reflect the new page's name. + +### Dashboard Name + +This will use the Dashboard's name, and be consistent across all pages in your application. + +### Dashboard Name (Page Name) + +This will combine the previous two options, and display both the Dashboard name and Page name, with the latter inside brackets. + +### None + +There will be no text-based title shown. Often used in partnership with [Teleports](../../nodes/widgets/ui-template.md#teleports) in order to customise the content in this section, e.g. including logos. ## Navigation Style Options diff --git a/nodes/config/locales/en-US/ui_base.html b/nodes/config/locales/en-US/ui_base.html index 9b729cd6..2605c21c 100644 --- a/nodes/config/locales/en-US/ui_base.html +++ b/nodes/config/locales/en-US/ui_base.html @@ -1,7 +1,53 @@ From 29bc29a01eb54756696d396244b6e6ed916ca31e Mon Sep 17 00:00:00 2001 From: Joe Pavitt <99246719+joepavitt@users.noreply.github.com> Date: Tue, 11 Feb 2025 15:07:20 +0000 Subject: [PATCH 3/4] Update nodes/config/locales/en-US/ui_base.html Co-authored-by: Nick O'Leary --- nodes/config/locales/en-US/ui_base.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nodes/config/locales/en-US/ui_base.html b/nodes/config/locales/en-US/ui_base.html index 2605c21c..66f84edf 100644 --- a/nodes/config/locales/en-US/ui_base.html +++ b/nodes/config/locales/en-US/ui_base.html @@ -1,5 +1,5 @@