diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index c17f24f6a..4a576b3c2 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -106,7 +106,8 @@ export default ({ mode }) => { { text: 'Dynamic Properties', link: '/user/dynamic-properties' }, { text: 'Migration Guide', link: '/user/migration' }, { text: 'UI Template Examples', link: '/user/template-examples' }, - { text: 'Subflows', link: '/user/subflows' } + { text: 'Subflows', link: '/user/subflows' }, + { text: 'Installing on Mobile', link: '/user/pwa' } ] }, { diff --git a/docs/assets/images/pwa-android-install.jpg b/docs/assets/images/pwa-android-install.jpg new file mode 100644 index 000000000..95628247b Binary files /dev/null and b/docs/assets/images/pwa-android-install.jpg differ diff --git a/docs/assets/images/pwa-android-options.jpg b/docs/assets/images/pwa-android-options.jpg new file mode 100644 index 000000000..f91ca2505 Binary files /dev/null and b/docs/assets/images/pwa-android-options.jpg differ diff --git a/docs/assets/images/pwa-ios-install.jpg b/docs/assets/images/pwa-ios-install.jpg new file mode 100644 index 000000000..1182ce284 Binary files /dev/null and b/docs/assets/images/pwa-ios-install.jpg differ diff --git a/docs/assets/images/pwa-ios-options.jpg b/docs/assets/images/pwa-ios-options.jpg new file mode 100644 index 000000000..271169ba4 Binary files /dev/null and b/docs/assets/images/pwa-ios-options.jpg differ diff --git a/docs/user/pwa.md b/docs/user/pwa.md new file mode 100644 index 000000000..6bc9ad4ec --- /dev/null +++ b/docs/user/pwa.md @@ -0,0 +1,34 @@ + + + +# Installing Dashboards on Mobile + +Node-RED Dashboard 2.0 is built and deployed as a [Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps). This means whilst it's built as a web application, it can be installed on your mobile device and run as a standalone application, behaving as if it was a native app. + +## Installing on Android + +To install the Dashboard on an Android device, open the browser and navigate to your Dashboard. From the browser's options, select _"Add to Home Screen"_ (you may be presented directly with an option to _"Install"_ here, depending on your Chrome version): + +Options presented in Chrome on Android +Options presented in Chrome on Android + +This will then prompt you to either "Install" Dashboard as an application, or "Create a Shortcut" on your home screen: + +Options presented in Chrome on Android +Options presented in Chrome on Android + +If you install, the Dashboard will be added to your home screen and can be launched as a standalone application, without the surrounding Browser experience. + +## Installing on iOS + +To install the Dashboard on an iOS device, open the browser and navigate to your Dashboard. From the browser's options, select _"Add to Home Screen"_: + +Options presented in Safari on iOS +Options presented in Safari on iOS + +You'll then be prompted to name your application: + +Options presented in Safari on Android +Options presented in Safari on iOS \ No newline at end of file