Refactor client code

[marek-saji]

static/index.mjs got fat and hard to follow.

Modes of operating

Progressive enhancement FTW.

ⓐ HTML page that refreshes itself with <meta http-equiv="refresh"> :link:

Served by the server.

ⓑ HTTP Long polling :link:

• [ ] We enter this mode if JS detects that client has all the features we want to use.
• [ ] Fetches status from the server (connection is kept alive until status changes).

When user subscribes

• [ ] Disable subscription button
• [ ] If features are in place, we ask for notification permission
• [ ] If features are missing or when we get denied we display permanent message: „Stay here”
• [ ] In some cases notification permission request promise may never resolve (e.g. on localtunnel.me). After some timeout, act same as we’d get denied.
• [ ] If features are in place, we register for web push (→ⓒ)

When we are not using web push and we see free next time

• [ ] If features are missing or notification permission is denied we display an alert
• [ ] If we have notification permission we display notification

ⓒ Push :link:

We enter this mode, when user user subscribes and JS detects that client has all the features we want and we successfully get notification permission.

Note: If there are subscribed clients, clients in mode ⓐ and ⓑ may be presented with status occupied, while subscribed clients get pushed about status being free.

After user subscribes

• [ ] We stop with the long polling and only wait for pushes, abort any ongoing polls.
• [ ] Don’t poll even after reloading the page.

After push is received in Service Worker

• [ ] Show notification
• [ ] Inform all clients that they should start polling again

Client state

• localStorage subscribedToPush
  • disabes polling
  • disables subscribe button
  • SW unsets this
• let waitingForFree
  • disables subscribe button
  • shows message „Stay here”
  • shows notification/alert when sees free