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.
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:
Npm local web server (and they explain step by step how to secure the web server)
Here the info to generate a self signed certificate and how to apply it
This should help you with the next steps