Configurator as Web APP (PWA)

[Scavanger]

*** Work in Progess ***

Preview, only partially working now: https://scavanger.github.io/inav-configurator

Working:

• In principle, runs on the web (HTML/CSS/assets/...)
• Flashing via DFU
• MSP connection via WebSerial
• Some tabs are working

To do:

• Add more bridge code to replace elctron api calls (Dialgos, load/save file, ...)
• Remove update
• More from https://github.com/sensei-hacker/inav-configurator/blob/7d1b2bceca1cae9830fdccecddde4640d2e8498a/WEB_MIGRATION.md

Not working, :

• SITL (and probably won't)
• TCP/UDP TCP would be possible via WebSockets, but somehow it doesn't connect properly with SITL. INAV SITL says it's connected, but web serial remains stuck on ‘connecting’. Bug in INAV, TCP handshake problem?

Things to consider:

• The CORS policy is causing problems with the firmware flasher. I have now solved this by using a proxy on a Cloudflare worker, which allows the app to download the assets. Any other suggestions?
• Where should all this be hosted later? Just on GitHub pages? => Deploy pipeline?

[github-actions[bot]]

Branch Targeting Suggestion

You've targeted the master branch with this PR. Please consider if a version branch might be more appropriate:

• maintenance-9.x - If your change is backward-compatible and won't create compatibility issues between INAV firmware and Configurator 9.x versions. This will allow your PR to be included in the next 9.x release.

• maintenance-10.x - If your change introduces compatibility requirements between firmware and configurator that would break 9.x compatibility. This is for PRs which will be included in INAV 10.x

If master is the correct target for this change, no action is needed.

---

This is an automated suggestion to help route contributions to the appropriate branch.

[sensei-hacker]

The CORS policy is causing problems with the firmware flasher. I have now solved this by using a proxy on a Cloudflare worker, which allows the app to download the assets. Any other suggestions?

$ curl -I https://github.com/iNavFlight/inav/releases/download/9.1.0/inav_9.1.0_MATEKF405.hex | grep -i Access
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     9    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  
$ curl -I https://raw.githubusercontent.com/iNavFlight/inav/master/README.md 2>&1 | grep -i Access
*access-control-allow-origin: **

https://github.com/Scavanger/inav-configurator/pull/3

[sensei-hacker]

TCP would be possible via WebSockets, but somehow it doesn't connect properly with SITL.

I think websockets wrap it in HTTP requests. They aren't raw sockets, as I understand it.

Both Electron and PWA support web sockets, though. So one solution would be something along these lines, roughly: https://github.com/sensei-hacker/inav_unofficial_targets/pull/42

BUUUUT I have another idea in mind I'm going to try.

[sensei-hacker]

@Scavanger I don't know if you've seen my other comments, but ...

I now have SITL mostly running in the browser, compiled with webassembly. It runs in-browser can responds to MSP communication. So no platform-specific SITL needed for Configurator.