🌐 Offline Mobile web apps

Oh boy, I was really triggered me with this thread! :rofl:

So I decided to have another go at doing an offline capable mobile web app using UIBUILDER.

But this time, instead of trying to do the horrible, complex manifest and worker's, I used Vite with the vite-plugin-pwa plugin which uses Google Workbox to do some of the heavy lifting.

A couple of hours later - shazam! I have a working (very simplistic) version.

Complete with a call to the browser's location API.

No frameworks involved, just using Vite to do the build process.

4 Likes

Im expected great things now Julian! :wink:

Nice work :folded_hands:

1 Like

Why NR on a phone? Just asking about the use case. Typically NR on a 'server' and phone access to dashboard, I would think.

Sorry, while the original thread was about NR on a phone, I rather went off at a tangent. This thread is about using a Node-RED server with UIBUILDER to deliver offline capable web apps. Not about running Node-RED on a phone.

For anyone interested, the approach used here (using Vite as a build engine) also uses vanilla web components.

For example, the location component:

<!-- Watch for changes, send updates when moved 50+ meters (default) -->
<app-location data-watch></app-location>

<!-- Watch with 100 meter threshold and show UI -->
<app-location data-watch="100" data-display></app-location>

<!-- High accuracy mode (uses GPS) -->
<app-location data-watch data-high-accuracy></app-location>

I will actually extract this one and add it to my web components library as I've just updated the test to include battery saving features. It is, of course, enhanced for uibuilder but does not need it. If uibuilder is present, movement will be sent back to Node-RED for connected clients.

Another component that I will likely extract to the core uibuilder client library is <uib-connection-status>. If you add that to the page, you get a visual indicator on the page if uibuilder's socket.io connection goes offline (even if the page itself still believes it is online).