Add web push notifications
Closes #931
This is currently working on https://testwebpush1.startinblox.com. To test there:
- Log in to the client. You can use username: 3wc and password: toto
- Once the client has loaded, click the notification icon in your browser address bar and allow notifications
- Do a browser reload of the client page
- Open a private browsing window and log in with a second account. You can use username: trav and password: lizard!site=yeah3exotic
- Send a direct message from the second user to the first. You should see a browser push notification
We have noticed an issue where previously-received messages are shown as push notifications when the client is reloaded. We're wondering if this is to do with how the client is processing message notifications, as this issue doesn't occur with manually-generated notifications (see below).
To test on your own local client/server:
- Add required dependencies and settings (see below) to your server's settings.yml
- Run
python manage.py gen_vapid_key
to generate a VAPID key-pair, andpython manage.py show_vapid_key
to display the public key - Add your VAPID public key to your client
config.json
, following the format inconfig.sample.json
. Also copy over thewebpush_subscription_endpoint
setting - Open the client in your browser, and log in
- Once the client has loaded, click the notification icon in your browser address bar and allow notifications
- Do a browser reload of the client page
- In a terminal, run
curl 'http://localhost:8000/users/test/inbox/' -H 'content-type: application/ld+json' -H 'Origin: http://localhost:1234' -H -X POST -d '{ "@context": "https://cdn.happy-dev.fr/owl/hdcontext.jsonld", "@type": "ReviewAction", "object" : "http://localhost:8000/users/butt/", "summary": "THISISTHEMESSAGE", "author": "http://localhost:8000/users/test2/", "type": "view"}'
. Replace:-
test
with the username of the user you're logged-in as -
test2
with another valid username
-
- You should see a browser push notification
settings.yml
changes:
- Add
django-cors-headers
todependencies
- Add
djangoldp_webpushnotification
toldppackages
- Add the following settings, configured appropriately:
WEBPUSH_SETTINGS:
- VAPID_ADMIN_EMAIL: "test@example.com"
MIDDLEWARE:
- 'corsheaders.middleware.CorsMiddleware'
CORS_ALLOWED_ORIGINS:
- "http://localhost:1234"
CORS_ALLOW_HEADERS:
- 'accept'
- 'accept-encoding'
- 'authorization'
- 'content-type'
- 'dnt'
- 'origin'
- 'user-agent'
- 'x-csrftoken'
- 'x-requested-with'
- 'dpop'
Several possible enhancements occurred to us; we'd like some guidance on which (if any) of these should be done before merging; if necessary we can give it a go:
- Showing a browser pop-up dialogue to request notification permission, as some other apps do
- Avoiding the need for a page reload before push notifications start working
- Loading the VAPID public key from the server, instead of requiring it to be manually configured in
config.json
- Using one of the existing URLs in
config.json
instead of adding a new settings key for it