/?dashboard. Display same page as on /, but:

• don’t show any subscription buttons

• polski
• English
• Deutsch

Resources:

• https://developer.apple.com/notifications/safari-push-notifications/
• node-apn looks promising

• Optional --host=HOST
• If non-IPv[46] host given, use greenlock-express to run on https with let’s encrypt certificate

Blocks #4.

When server gets free status, push only to first subscribed client. Push to next one if status changed from and then back to free or after it’s free for some time.

• On page load, check whether client is already subscribed and reflect that in UI (disable subscribe button)
• 🐛 When status changes to error alert pops up on browsers with no push support

When queue is not empty and status changes to free:

• Only client from top of the queue is notified. It states that one has 1min to get to the toilet
• If status changes to occupied within 1 min, top client is removed and she gets a notification
• If status does not change to occupied within 1 min, top client gets removed, gets a notification and next client gets notified
• Notification for removed clients contains action to insert themselves at the beginning of the queue (easy to abuse, but not really our priority here)

• /queue without web push subscription. Queueing should be possible even for non-JS users.

Defer beforeinstallprompt event.

See https://developers.google.com/web/fundamentals/app-install-banners/#listen_for_beforeinstallprompt

Display ➕🏠 icon in the corner of the screen.

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"> 🔗

Served by the server.

ⓑ HTTP Long polling 🔗

• 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 🔗

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

Don’t run code if it will fail.

e.g. subscribing on safari (which is not supported yet, #5) ends up in ReferenceError which prevents fallback from working

Now we have our debug interface baked–in in lib/status/observer/debug.mjs. Extracting it to separate file would allow other modules registering their own key shortcuts. e.g.:

• increasing lag
• printing queue
• checking active client

• subscription button is hidden
• theme-color is missing

Steps

1. Run on https so that push notifications work.
2. Change status to occupied
3. Subscribe for notification
4. Change to „free”
5. Change back to „occupied”

Expected outcome

Page reflects every status change.

Outcome

After receiving the notification page stops working.

• Accept firebase tokens on /subscribe

• Use FCM (Firebase Cloud Messaging) to send messages to these. See https://firebase.google.com/docs/cloud-messaging/send-message

• Figure out whether this supports actions (needed for #11)

• [client] Subscribe for push notifications
• [server] When status changes:
  • to occupied/error: push to all clients, don’t clear them
  • to free: push to first client, remove from queue
    • if status does not change for some time, push to next subscribed client, remove from queue
• [client] Upon receiving a status in SW, send to all clients and make them update the UI
  • If client is marked as „subscribed”, show notification
• [client] If push notifications are allowed, use them instead of /check

• Clients with no push support (and SSR) should get occupied while push queue is not empty

Design our own icon, instead of using toilet emoji from Google Noto Emoji font.

• app icon (svg, png 192×192px, png 512×512px) for splash and android homescreen
  Keep content in the safe zone: https://www.w3.org/TR/appmanifest/#icon-masks

• iOS app icon (svg, png 512×512px), because iOS does not take icons from manifest, ignores transparency and adds rounded corners

  With solid background and rounded corners of 80px. Add to index.html:

  <link rel="apple-touch-icon" href="/icon-512-apple.png">

• favicon (svg, png 32×32px, ico 32×32px) that looks good in 16×16px

• remove LICENSE-icon file and mention of Google Noto Emoji from README.md and

Probably reading from a file.

• [client] Subscribe for push notifications
• [server] When status changes:
  • to free: push to all clients, remove them from queue
• [client] Upon receiving a status in SW show notification
• [client] If push notifications are allowed, use them instead of long polling (#2)

• chrome (web-push)
• firefox (should work with web-push)

Similar to https://github.com/DietLabs/okupando/issues/25, but if number of people in queue goes up, announces the new number, if is occupied longer than some time.

Perfect for stressing out people occupying toilet for too long.

Should be easy enough with rpi-gpio looks promising.

We could then run it in single process with HTTP server and avoid file-reading shenanigans.

Come up with a way of running outside raspberry for UI development.

• Add aria-live=polite to status before changing it.
• Test on a screenreader.

Blocked by #10.

Instead of long polling for clients that can do web sockets.

Remember to update CONTRIBUTING.md

HTTPS is out of scope for this project. It should be handled by a load balancer or other router.

e.g. https://traefik.io/

Why? 🔗

We want to set up our instance so that you can go to the same address from company’s intranet and get a real okupando, but when you access the URL from outside of the company (to show the application off), you get a demo instance.

What? 🔗

Demo mode that changes status every so often by itself and sometimes adds ghosts to the queue.
With big „demo” label and link to official website.