Setup:
I have an ESP32 running a HTTPs-Server with a self-signed certificate. It provides status information about some homeautomation-devices.
Now I built a Vue-based PWA that is served from a public HTTPs-Server with a regular certificate.
The PWA requests data from the ESP in the local network via https://192.168...
After installing the PWA on my mobile device, Chrome warns me that my PWA accesses content from an untrusted-cert https (which is perfectly reasonable for me).
As a workaround I have to do the following (only once): Access https://192.168... in Chrome, where I get the warning for 'NET::ERR_CERT_AUTHORITY_INVALID' and allow this untrusted access.
After this workaround the PWA works great with the ESP32 even after restarting and updating it.
I want to use the PeriodicSync-API to get the status from my ESP32 once a day and show a notification on my mobile device if something's not ok.
I setup the service-worker to listen for the periodicsync-event and then fetch() data from the ESP32 via https.
Problem:
This works correctly if I connect to my device via chrome://inspect/#devices and simulate the 'periodicsync'-event.
But if I leave the app alone for 12-24 hours and the regular periodicsync-event is finally triggered then fetch(...) catches an error with the following reason: TypeError: Failed to fetch
My guess (after spending many hours on that issue) is that this error relates to the untrusted certificate. It seems that chrome remembers that I agreed on the unsafe access as long as the PWA is open but it does not adopt this agreement for the service-worker.
Question: Any ideas how to trust a self-signed-certificate in the service-worker or tell the service worker it should use the same permission as the PWA?
A no-go is:
- starting browser with certain flags
- using a paid long-term-certificate on the ESP32
