If you want to add something to openHAB please take a look at the new ui https://github.com/openhab/openhab-webui/tree/master/bundles/org.openhab.ui Its not React, but a brand new ui still in development based of framwork7/vue. I would say it already is or can be made PWA enabled.
One of the weak points of openHAB is that there are to many ui’s. So with openHAB 3 this is reduced and a new UI is being created that should be able to replace most of the current ui’s. So please have a look at this new ui.
When you contribute to the new ui you don’t have to do everything yourself and can start make a difference quickly.
1 Like
I’m currently using openhab3 with the new UI, I find this UI very clear and simple.
I think @hilbrand is right, we don’t need a new UI again.
And yes, a PWA will be perfect, I think just adding a manifest will do the trick. (I just made a PWA one time on an angular app, maybe I miss something, but I’m not sure for the https part, when I was in dev mode, the browser asked me to install the PWA without https)
I don’t have time to do it, but I will test it if you need it.
I’ll have a look at that. However, that’s one more framework for me to learn and I may not have much time to get familiar with it, so it would depend on how easy it is to get familiar with it before I could contribute.
PS Is there a quick description on how to install openhab 3 side by side with 2.5 and being able to pick which one is running?
You can install a PWA app without https if it is from localhost. It’s an exception made to ease development.
1 Like
That’s not correct, the API is at least 95% backward compatible, so no worries.
a brand new ui still in development based of framwork7/vue. I would say it already is or can be made PWA enabled.
Afaik, it already is! At least @ysc is a big fan of PWA, so again - no worries 
.
How do I install OH 3 and start trying the new ui? I went to look around other threads but didn’t find any quick guide to do it.
Much of the useful parts are behind OAuth2 authorization with no API Token or other external access implemented.
Yes it is, the heavy lifting is done by Workbox.
As you know to take advantage of the PWA features and other HTML5 APIs you normally need HTTPS but you can use the “Insecure origins treated as secure” flag in Chrome to profit from them anyway: open chrome://flags, search for “insecure origins”, enter the local URLs as you see fit, don’t forget to enable it on the right, and restart Chrome. (btw this works on Android too!) Of course it has security implications but if you’re trusting your URLs it should be fine, and you’ll have a better exprerience overall.
The new UI is also bound to be featured in openHAB’s native apps for Android and iOS so this workaround won’t be ultimately necessary if you use the official app to display the UI.
I didn’t know this feature. I may give it a try. Does safari have something similar?
Otherwise, as long as the OH3 API server is configured to answer requests from anywhere, the PWA can be hosted on GitHub with https and the app can access the local server APIs, no?
Running openHAB3 behind a Reverse proxy which manages the https stuff works quite well for me.
I access the OH3 UI by using it as a Progressive Android web app. The only reason why I still have to install the native OpenHAB Android App is for receiving notifications.
Is there a chance to support push notifications ins the PWA?
Hoping so, at some point. The HABot app which is also a PWA does, but the backend part was in the UI bundle, in that case it’ll have to be added to the core I believe, so it might take a while.
1 Like
Hi @ysc,
I have an issue with the PWA on an Android device and debugged it remotely.
As you can see the app (and the css and js) are provided by the ServiceWorker. The app tries to call the rest API and failes because the HTTP basic auth information seems to be missing. The backend responses with a 401.
The problem is that I am not requested to enter my basic auth credentials… instead I just see a blank screen. Any ideas how to solve this?
I deactivated the Service Worker by using the Chrome Dev Tools and now the application asks for Basic Auth credentials…
Nevertheless this solution doesn’s seem to be feasible for everyone.
Yes that’'s a problem I also had. When the basic authentication succeeds the first time, do you get a prompt from the browser to save your password? If so try to save it, chances are, it will be reused automatically, otherwise it will have to be solved with code.
I will try to save the credentials, another option might be the usage of a client certificate, but I’m not sure if this would work in conjunction with the rest API calls.
Saving the password doesn’t help 
This is not a PWA problem. I have the same problem in Chrome.
Okay, thanks 
I’ll come up with something probably in the next few weeks.
1 Like
Switching to a client certificate looks promising. I disabled http basic auth and enforced the presence of a valid client certificate. Seems to work for the rest calls as well. 
The Basic Auth prompt does not work with Service Workers, because of a problem in the specification and implementation of the Web Fetch API, see Allow more flexibility in how 401s/407s are handled? · Issue #1132 · whatwg/fetch · GitHub