Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow App Launch When Offline or Unable to Connect to Node-RED #1455

Merged
merged 13 commits into from
Nov 12, 2024

Conversation

cgjgh
Copy link
Contributor

@cgjgh cgjgh commented Nov 9, 2024

Description

When launching the app while the device is offline or unable to connect to the Node-RED server (due to server-side issues), users currently encounter a blank screen that cannot be navigated past without reloading (if available) or relaunching the app. This persists even if the Internet connection has been restored or the server is functioning correctly again.

This PR addresses such issues by continuing to load a minimal Vue app (fallback app) instead of aborting the app load, which currently results in blank screens. The fallback app can display relevant information and provide options to the user, such as manually reloading the page (a feature absent in PWA on iOS) or opening the email client to send a message to the server admin (for server-related issues). The fallback app is also available offline. Once loaded, if it detects browser is offline, it registers an event listener to detect when the browser comes back online, at which point it reloads and retries loading the full Dashboard 2 app.

Video.1.mp4

Furthermore, this PR includes the ability to provide configurable theming from the Node-RED editor to the fallback app and the loading splash screen. This is achieved by caching the theme to local storage upon successful connections and subsequently loading it from the cache at launch. The cached theme is then used as a fallback theme on connection failures, as user-configured themes are only available upon successful connection.

Related Issue(s)

Checklist

  • I have read the contribution guidelines
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
    • Upgrade instructions
    • Configuration details
    • Concepts
  • Changes flowforge.yml?
    • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
    • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

  • Includes a DB migration? -> add the area:migration label

cgjgh added 5 commits November 9, 2024 20:51
Loads a minimal vue app on loading error to display error and present options to user
Caches Node-RED Dashboard Default theme on config received. Theme will be retrieved from cache on subsequent app launches for use when loading or disconnected (to show error messages)
@cgjgh cgjgh force-pushed the Loading-Error-Page branch from 4a4a037 to 5d3cb54 Compare November 10, 2024 02:51
ui/src/App.vue Outdated Show resolved Hide resolved
ui/src/main.mjs Outdated Show resolved Hide resolved
ui/src/main.mjs Outdated Show resolved Hide resolved
ui/src/App.vue Outdated Show resolved Hide resolved
ui/src/main.mjs Outdated Show resolved Hide resolved
ui/src/main.mjs Outdated Show resolved Hide resolved
ui/src/main.mjs Outdated Show resolved Hide resolved
ui/src/App.vue Outdated Show resolved Hide resolved
ui/src/App.vue Outdated Show resolved Hide resolved
ui/src/store/setup.mjs Outdated Show resolved Hide resolved
ui/src/main.mjs Show resolved Hide resolved
@cgjgh cgjgh requested a review from joepavitt November 11, 2024 17:07
@joepavitt joepavitt merged commit 2e0d3cf into FlowFuse:main Nov 12, 2024
1 of 2 checks passed
@cgjgh cgjgh mentioned this pull request Nov 13, 2024
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants