Skip to content

GitLab

Open
Created by calix@3wc
Report abuse

Add web push notifications

Closes #931

This is currently working on https://testwebpush1.startinblox.com. To test there:

  1. Log in to the client. You can use username: 3wc and password: toto
  2. Once the client has loaded, click the notification icon in your browser address bar and allow notifications
  3. Do a browser reload of the client page
  4. Open a private browsing window and log in with a second account. You can use username: trav and password: lizard!site=yeah3exotic
  5. 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:

  1. Add required dependencies and settings (see below) to your server's settings.yml
  2. Run python manage.py gen_vapid_key to generate a VAPID key-pair, and python manage.py show_vapid_key to display the public key
  3. Add your VAPID public key to your client config.json, following the format in config.sample.json. Also copy over the webpush_subscription_endpoint setting
  4. Open the client in your browser, and log in
  5. Once the client has loaded, click the notification icon in your browser address bar and allow notifications
  6. Do a browser reload of the client page
  7. 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
  8. You should see a browser push notification

settings.yml changes:

  • Add django-cors-headers to dependencies
  • Add djangoldp_webpushnotification to ldppackages
  • 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
Edited by calix