HABot Walkthrough (3/n): Add to Home Screen (or Desktop)

This is a wiki topic, regular members as well as staff may edit it freely and are encouraged to do so! The content will eventually be migrated somewhere in the main documentation when it’s stabilized and enough feedback has been received. When replying to posts on this series, please try to stay on-topic - there will be several of them, each covering a particular feature or area, so please look for the appropriate topic and reply there, or create a new topic. Thanks! :slight_smile:

HABot works well as a web app in your browser, but can also be added to your (Android) phone’s home screen or your desktop like an app you would download from an app store. This is a feature made available by “Progressive Web Apps”, which leverage features like service workers, or aggressive caching of their code and assets to offer the best experience.

One prerequisite for this is that the app must be served from a “secure origin”, meaning it will need a HTTPS setup, either directly from openHAB’s Jetty, or openHAB Cloud, or another reverse proxy solution. Moreover, you won’t be able to switch URLs between local and remote, so if you want to access HABot remotely, it would have to be added to the home screen while browsing the remote URI. Once it’s completely cached, the amount downloaded is very tiny (a few kilobytes of API calls) so it makes sense to choose a remote solution even when you’re at home.

HTTPS can be hard to set up, so if you’re not feeling up to this task, your best choice is to use the free myopenhab.org service from the openHAB Foundation. It is by far the easiest, is a friendly cloud (meaning it respects your privacy), and HTTPS will be provided for you.
If you choose to go this route, once you have it working, just point your browser to:
login, and wait a little for the application to cache itself.

Then, follow the platform-specific instructions below to install the app.

On Android

If you’re using Chrome and fullfill the preconditions, a banner should appear on the bottom of the screen. If it doesn’t, use the “Add to Home screen” menu entry. You should be presented with a dialog like the animation below. (It could be different but won’t let you choose the name of the app, if it does, there’s a problem):


On Windows, Linux and Chrome OS

Since Chrome 70, Progressive Web Apps may be added to the home screen on Windows and Chrome OS - you might have a big blue “Install app” button on the sidebar to do so (if you’re using HTTPS), otherwise use the “Install HABot” menu option like shown below:

You can then find HABot in the Windows Start menu, by searching, or as an icon on your desktop. You can also pin it to the task bar or dock to access it quickly, like a regular app.

On macOS

Adding Progressive Web Apps to the desktop is still in beta on Chrome for macOS and Linux at the time of writing (it is scheduled for Chrome 72), but you can test it right now by enabling some experimental features:

Navigate to the links below and use the combo box to enable them:

or go to chrome:flags and search for “PWA” to find those features.
Restart Chrome and the option will appear in the menu like on Windows.

On iOS

Progressive Web Apps are led by Google, and Mozilla (Firefox) and Microsoft (Edge), and other browser vendors on Android like Opera or Samsung are on board and will support adding to the home screen, but Apple (Safari) is lagging behind, so there is no easy solution currently to get HABot on your iPhone or iPad.

However, experimental work to build HABot as a Cordova app is underway, so it might be published to the App Store in the future*. Stay tuned.

The Cordova app currently doesn’t support advanced Web API features like voice input or push notifications. Those would have to be implemented alternatively with Cordova plugins.

*Potential developers willing to maintain it are welcome to step up! An Android version in Google Play is also being considered.

Saving the Remote Credentials

If you’re using Chrome, HABot can leverage the Web Credentials API to avoid having to log in to openHAB Cloud/myopenhab.org: go to the Settings screen from the side bar, and provide your credentials in the dialog box. The browser will ask you if you want to save them in a separate dialog, which you’ll have to confirm - they will be stored locally and securely.
Next time you’re accessing HABot and the credentials are needed, you’ll see a small pop up for a few seconds indicating the saved credentials are being used.

(note: the option doesn’t appear unless you’re using Chrome on a secure origin)

Next Steps

The next article will introduce the cards, the Card deck, how they relate to the chat queries and how to organize them.


Nice walkthrough!
But when I go the link https://home.myopenhab.org/habot/ I get the error:

Cannot GET /habot

I’m logged in and the rest of myopenhab.org works.
How do I access habot with myopenhab.org?

You can then go to https://home.myopenhab.org/ and click the HABot tile in the dashboard.