Skip to content

Push Notifications

Jano requested to merge pushnotifications into master

Closes #336 (closed)

What does this MR do?

This Merge Request implements Web Push Notifications for Chat messages in foodsharing. It provides a service worker that listens to push events and creates notifications and it adds a settings module as well as a banner on the dashboard that enables users to subscribe to the notifications. If they do, the subscription gets sent to a newly created REST endpoint and stored in the new database table fs_push_notification_subscription, for which a migration is provided. The backend also has been adjusted to send chat messages to all push subscription endpoints saved for every user receiving the chat message.

The backend is implemented in a modular way, so other push APIs than Web Push can easily be supported by implementing the PushNotificationHandlerInterface and registering the implementation in the PushNotificationGateway's constructor.

How to test?

Enable Push Notifications (Method 1)

After checking out my branch and loggin into your local copy of foodsharing, you should see the following banner on your dashboard:

Screenshot_20190407_164508

This banner will appear if you haven't already allowed the site to send push notifications to you and if you havn't clicked the X-Button yet. Also, this banner is only implemented on the non-foodsharer-dashboard (the dashboard all users except for foodsharers see).

After clicking the green "Pushbenachrichtigungen aktivieren" button, you will be prompted by your browser to allow foodsharing to send you push notifications.

Screenshot_20190407_164531

After allowing, the push notification banner will disappear and a pulse message will inform you that push notifications are active now.

Screenshot_20190407_164545

Enable Push Notifications (Method 2)

No matter if you are a foodsharer, closed the banner or allowed the site to send notifications to your browser, there will always be a push notification section in the settings. So first, open the settings:

Screenshot_20190407_164602

Then, click on "Benachrichtigungen" in the navigation on the left.

Screenshot_20190407_164622

The first section on the page is the push notification setting, showing an explanation what it means to activate them and a button to do so.

Screenshot_20190407_170553

After clicking this button, your browser will ask you to accept or deny push notifications. Choose accept.

Screenshot_20190407_170617

Now, a pulse message should state that the activation succeeded. Also, the button will now allow you to deactivate push notifications, and the explanation text will be updated to explain to you what it means to deactivate push notifications.

Screenshot_20190407_170715

Receive push notifications

To receive push notifications, open a private window or another browser and go to localhost:18080 and log in as a user that can write chat messages to the user you activated push notifications for (userorga can chat to anyone). Close the browser tab of the user you activated push notifications for.

Screenshot_20190407_171054

Search for the user you activated push notifications with in the other browser.

Screenshot_20190407_171130

Click on the "Nachricht schreiben" button in their profile.

Screenshot_20190407_171154

Write a nice message.

Screenshot_20190407_171224

See push notifications in action.

Screenshot_20190407_171259

How confident are you it won't break things if deployed?

That depends on how well I get the merge done. The branch is half a year old and I merged master several times, but now as func got refactored and removed, there is much that could possibly go wrong. I'll do my best to take care that everything works fine after the merge locally, so we can test it on beta. I'm very confident that it won't break the database, so we could do that.

Checklist

  • added a test, or explain why one is not needed/possible...
  • no unrelated changes
  • asked someone for a code review
  • joined #foodsharing-beta channel at https://slackin.yunity.org
  • added an entry to CHANGELOG.md (description, merge request link, username(s))
Edited by Alex

Merge request reports