Add PWA manifest, service worker, and web push

[nimbleghost]

Resolves #346
Resolves #199

Adds a PWA manifest, service worker, the required go server routes, and VAPID-based web push

I can't test Android, but this is what it looks like on macOS and iOS:

[codecov-commenter]

Codecov Report

Patch coverage: 67.63% and project coverage change: +0.10 🎉

Comparison is base (4c7dc4c) 65.70% compared to head (141565d) 65.80%.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #751      +/-   ##
==========================================
+ Coverage   65.70%   65.80%   +0.10%     
==========================================
  Files          50       53       +3     
  Lines        7342     7648     +306     
==========================================
+ Hits         4824     5033     +209     
- Misses       1728     1777      +49     
- Partials      790      838      +48     

Impacted Files	Coverage Δ
server/errors.go	70.00% <ø> (ø)
server/log.go	78.84% <ø> (ø)
server/server_account.go	65.99% <33.33%> (-0.68%)	⬇️
server/webpush_store.go	59.13% <59.13%> (ø)
server/server_webpush.go	61.22% <61.22%> (ø)
server/server.go	63.99% <77.50%> (+0.48%)	⬆️
cmd/serve.go	60.07% <83.33%> (+1.06%)	⬆️
cmd/webpush.go	85.71% <85.71%> (ø)
server/config.go	100.00% <100.00%> (ø)
server/message_cache.go	66.38% <100.00%> (ø)
... and 3 more

... and 1 file with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[binwiederhier]

This looks great. I have no idea what's involved to make the web push part work. I always assumed that ntfy will be a push provider, but my understanding is that that's not possible.

[nimbleghost]

I always assumed that ntfy will be a push provider, but my understanding is that that's not possible.

It does work! I have it working with VAPID keys and no intermediate (e.g. Firebase) required. Pushing now - I will send you a message on Discord to discuss how to configure it though, that's what I'm looking at currently.

[nimbleghost]

thanks for the review and good questions. I'll respond in detail when I have some free time or after work.

(I'm going to have a lot of nit-picky responses. Please do know that I am extremely impressed by what you have delivered here. But I am a little OCD about this stuff.)

much appreciated, I'm only vaguely familiar with go so I'm learning the patterns / idiomatic way of doing things as I go (haha).

[binwiederhier]

Did some work. Not even close to done.

• 8f2120e changes some names
• 0d2f0dd moves stuff to a new file
• ad761f4 makes things more Go-y, and switches to user_id in the database
• 35ac095 moves the config to config.js

Things I've noticed:

• I love that the subscription drop down now has icons. Random change, but love it!
• I do not for the life of me understand what "Sound only" means. I didn't look at the code, but from a user perspective, that's odd
• I have that the "SubscribeDialog" now has 4(!) toggles. I don't think I want to even give people the option to opt-out of desktop notifications. If they want to, they can just mute the topic. That way, it'll be just 3 options (or we could even drop the web-push one and just make it available in the drop down, idk yet.

Lots of TODOs. Here are some major things:

• The subscribe/unsubscribe endpoints should be POST + DELETE to the same endpoint v1/webpush/$topic or something
• The unsubscribe endpoint does not work at all for me, the payload is empty

(I'll do more tonight, likely)

[nimbleghost]

I love that the subscription drop down now has icons. Random change, but love it!

:D added the checkmarks for the type and then the rest of the list looked empty

---

I do not for the life of me understand what "Sound only" means. I didn't look at the code, but from a user perspective, that's odd

fair. the reasoning was that if a user denied browser notification access at all, I wanted there to be a way to represent that. or if the browser/context doesn't support it, e.g. http or opening a site in incognito. how would you represent that? It's distinct from muting the topic; I wouldn't want to force a topic muted state if the notification APIs were unavailable/denied. Maybe "No notifications"?

---

I have that the "SubscribeDialog" now has 4(!) toggles. I don't think I want to even give people the option to opt-out of desktop notifications. If they want to, they can just mute the topic. That way, it'll be just 3 options (or we could even drop the web-push one and just make it available in the drop down, idk yet.

Hmm, the desktop notification toggle was again browser notification opt-in UX driven. When you first visit the website and click subscribe, the toggle defaults to off:

You tap it, then you either click allow and it goes to enabled, or you see this flow if denied or unavailable (browsers will silently deny in incognito for example):

Maybe the solution is to have a little dialog that shows up when you subscribe for the first time, asking to enable notifications first. I do agree that there are too many toggles (esp. when logged in).

---

relatedly, I'm wondering if the "reserve topic" toggle could be replaced with just the dropdown with a default "public" setting.

---

The subscribe/unsubscribe endpoints should be POST + DELETE to the same endpoint v1/webpush/$topic or something

that's what I wanted initially, but you can't have a DELETE body, and we need to specify the endpoint we want to unsubscribe. since it's a URL it's inconvenient to embed in a URL, or it could be DELETE /topic/webpush/<subscription-id>..

The unsubscribe endpoint does not work at all for me, the payload is empty

which payload? it works for me:

$ curl https://<server>/test/web-push/unsubscribe \
  -d '{"endpoint":"https://fcm.googleapis.com/fcm/send/<xyz>"}' \
  -H "Authorization: Bearer xxx"

{"success":true}

[nimbleghost]

Alright, addressed most of the review comments. What's remaining:

• Naming: "Sound only"
• UX around browser permission approval and the 4 subscribe toggles
• Rate limit subscribe?
• Perhaps limit publish to known browser push endpoints (https://github.com/pushpad/known-push-services/blob/master/whitelist)

Do you see anything else?

[binwiederhier]

Additional action items:

• "Bulk endpoints"?
• Changing endpoints to v1/account/webpush
• Subscription expiration (+ warning notification)

I'll try to actually get some time to try it tomorrow and on the weekend.

[skurfuerst]

Hey @nimbleghost and @binwiederhier ,

Just wanted to give a big THANK YOU to the both of you ❤️❤️! For my use cases, this makes ntfy even more helpful.

Thanks so much and keep up the great work 🥰
Sebastian