13

I have multiple devices on my local network each running a webserver. This web server simply displays a UI to interact with the device. There can be any number of these available and they can be used with multiple different networks. Because of the many possible configurations static IP's probably wont work.

What I have written is some javascript that finds these devices on the local network and returns their IP. Once I have this IP I am using websockets to connect to the server and control it. What I was hoping to develop was a progressive web app that could do this. This is because it would streamline development and mean I only need to make 1 application as apposed to 4 (Windows, MacOS, iOS, Android). However my issue is with HTTP and HTTPS. The PWA will have to be HTTPS while the web servers are HTTP. This means web sockets do not work between the two as it is blocked for mixed content. I am guessing if I want a PWA I will have to find a way to secure the web server on each device. The issue is its not feasible to get a SSL cert for each device and seems silly because they are on the local network.

The web side of things is not my strong suit so I am wondering if there is a way to achieve this or if there is a different route I could take.

jdm
  • 165
  • 1
  • 8
  • As you rightly said, Service Workers won't work outside of an HTTPS connection. `localhost` is also considered secure (to be able to test locally). Why would you specifically need a PWA for your case? It does not seem a typical use case for PWAs. – Francesco Jul 16 '19 at 11:19
  • @Francesco I liked the sound of a PWA as it meant I could develop a single app for all devices in one go. Also using an app that auto finds the devices is a much nicer user experience than typing in an ip address and getting the 'This site cannot be reached' error. Do you know if a web server can be made secure (ie. http**s**://192.168.0.10 or similar)? – jdm Jul 17 '19 at 06:49
  • I think PWA is not what you need according to your requirements. Probably a simple NODE.js script can achieve that much easily. I wrote a series of articles about PWAs, if you are interested in getting more insights about what you can achieve with them: https://dev.to/paco_ita/a-gentle-introduction-to-progressive-web-apps-step-1-24da – Francesco Jul 17 '19 at 07:15
  • With NODE.js can the same app be used on any device? Also how easily is it to distribute a NODE.js app to different devices because PWA's seem incredibly simple to distribute to users especially on different devices. – jdm Jul 19 '19 at 02:06
  • PWA is nothing else than a web site. Therefore you let people access it (and eventually add to the device home screen), rather than "distribute" it. A node function can run on the web app site (eg. as a Cloud Function) and be triggered, according to different conditions, to do some logic. Have a look here: https://firebase.google.com/docs/functions/use-cases – Francesco Jul 19 '19 at 06:32
  • I have written some client-side JavaScript that scans the local network for compatible devices and opens a web socket to it. This is really the only special functionality that the app needs. There is no real need for any server side processing as far as I can tell (even though it could be achieved with node). Because the functionality is client side was hoping I could package it as a PWA and have the functionality as a service worker so even though its just a website it will still function if the user looses their internet connection. This seems simpler to me then node? – jdm Jul 19 '19 at 08:35
  • Und those requirements then a PWA might make indeed sense. You have to plan what to display once offline, maybe caching the list of previously connected devices, but then packing your logic in a Service Worker is an option. – Francesco Jul 19 '19 at 09:49
  • Okay great I will try that. I appreciate your time. Also that gentle intro to PWA post that you wrote was very helpful. I will also accept your answer you wrote. – jdm Jul 19 '19 at 09:56
  • Glad I could help you! – Francesco Jul 19 '19 at 09:57

2 Answers2

4

About your question to secure a web server, you will need to provide a certificate for it (if it is for dev purposes you can also generate it by yourself):

There are some solutions that provide already the boilerplate for you:

This should help you with the next steps (correct me if I misunderstood your requirements).

Francesco
  • 9,947
  • 7
  • 67
  • 110
0
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src http://192.168.XXX.XXX 'self'; object-src 'none'">

check at: https://csp-evaluator.withgoogle.com/

anon
  • 1