Web Push Notifications from Solid Pods

Our demo showcases how a Solid Pod, i. e. a web server that adheres to the Solid Protocol, can be extended to support Web Push Notifications for Progressive Web Applications (PWAs).

Authors: Christoph Braun, and Tobias Käfer from AIFB @ Karlsruhe Institute of Technology (KIT), Germany

Watch our video » Check out the live Demo » Get the code »

Abstract

Our demo showcases how a Solid Pod, i. e. a web server that adheres to the Solid Protocol, can be extended to support Web Push Notifications for Progressive Web Applications (PWAs). For a user’s perspective, we present a PWA where a user can choose to receive Web Push Notifications when a message is posted to her Solid Pod’s inbox.

The paper

Please find the submission here.

Walkthrough

We have a live demo, where you can play around! For example, try the following:

  1. Log in with your Solid WebID (using the button in the top right corner).
    Don't have a Solid WebID and associated Solid Pod yet? Take a look here.
  2. Click the bell icon to enable Web Push Notifications. You will be prompted by your browser to allow Notifications.
  3. Send a message to your inbox by clicking on the speed dial (the big green button at the bottom center) and then
    by clicking on the appearing envelope symbol to post your message.
    (For the demo, we prepared the target URI to be your Pod's inbox. And we prepared some demo content.)
  4. Receive the Push Notification when the message is successfully posted to your inbox. This happens automatically.
  5. Check out your inbox by clicking on the profile picture with the green badge displaying the number of resources currently available in your inbox.
  6. Inspect your messages. You can delete them if you wish. There will no Push Notification be displayed when you are inspecting your inbox. Just like in any other chat app.
Other things to try out: Gotchas:

Figure 1: Preview Screenshots of the inbox view with one message which a Push Notification was received for.

Notification Scheme

So, what happens in the background?

The following sequence diagram describes the Solid Web Push Notification scheme:

  1. First, the subscriber discovers an suitable notification endpoint from the metadata on the resource of interest. In our case, the service profile of the Solid Web Push Service at the corresponding Pod is found.
  2. Next, the subscriber registers its subscription: It subscribes to the browser's messaging service to receive Web Push Notifications. Then, a corresponding subscription is send to the Solid Web Push Service which defines the corresponding Web Push subscription information and includes the target resource it wishes notifications on.
  3. The Solid Web Push Service registers the subscription and SHOULD check authorization of the subscribing agent on the target resource.
  4. Then, the Solid Web Push Service acts as a proxy that forwards update notifications on the target resource to the browser messaging endpoint as specified by the subscriber's subscription. Upon resource update, the service SHOULD check the authorization of the subscribing agent on the target resource.
  5. When the subscriber chooses not to receive Web Push Notifications anymore, it unsubscribes from the browser's messaging service. Additionally, it sends an unsubscription request to the Solid Web Push Notification Service, which in turn cancels the subscription and stops forwarding.


Figure 2: The Solid Web Push Notification scheme as a Sequence Diagram.


Data Modeling

We model a Web Push subscriptions and the corresponding service on the SolidPod in RDF using the data model depicted below. We use CURIEs, abbreviated URIs, with prefixes from prefix.cc . We use push as prefix that is short for <https://purl.org/solid-web-push/vocab#>.


Figure 3: The data model underlying the Solid Web Push Notification scheme.


An example (in Turtle format) for the Solid Web Push Service profile is available here: 

            @prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.
            @prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.
            @prefix dc: <http://purl.org/dc/terms/>.
            @prefix xsd: <http://www.w3.org/2001/XMLSchema#>.
            @prefix as: <https://www.w3.org/ns/activitystreams#>.
            @prefix ldp: <http://www.w3.org/ns/ldp#>.
            @prefix push: <https://purl.org/solid-web-push/vocab#>.
            
            <> a as:Profile;
                rdfs:label "The profile of the Solid Web Push Service"@en;
                as:summary 
                    """ 
                        The described resource is a Service called Solid Web Push. 
                        To subscribe to the service, post the subscription to the provided URI. 
                        The should indicate which resource the subscriber whishes to receive updates on (as:Follow, as:target)
                    """;
                dc:creator <https://uvdsl.solid.aifb.kit.edu/profile/card#me>;
                as:describes <#web-push> .
            
            <#web-push> a as:Service;
                as:name "Solid Web Push"@en;
                rdfs:label "Solid Web Push Service"@en;
                ldp:inbox <https://solid.aifb.kit.edu/web-push/subscribe/>; 
                push:vapidPublicKey "BAOxV1U1Hj5npToInct2VhhYpJkL0GmHqc-ADbHu7O8Z2CJNkqSzc8BfCStWbTKq_yT9B6g6kYjyEHrAEpVuqww"^^xsd:base64Binary.

And an example for canceling a subscription: 

            @prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
            @prefix as: <https://www.w3.org/ns/activitystreams#> .
            @prefix push: <https://purl.org/solid-web-push/vocab#> .

            <#unsub> a as:Undo;
                as:actor <https://uvdsl.solid.aifb.kit.edu/profile/card#me>;
                as:object   [
                        a as:Follow;
                        as:actor <https://uvdsl.solid.aifb.kit.edu/profile/card#me>;
                        as:object <https://uvdsl.solid.aifb.kit.edu/inbox/>;
                        push:endpoint "https://fcm.googleapis.com/fcm/send/ezblK6NIv80:APA91bHrjqImGaqs5-kcIZ_zO72HVDHGfnrzi9xwJvSsHD3qu4js1nQfHvcjf1Fjgo3mpxBqMkFcqPdiaRPFXnYSkEf9yz78m9FFBaWzwIvmaQ8M1-2vxaAO3S-ha2jf7ALLqRP92Y9z";
                        push:keys   [
                                push:auth "Z51Yn6DRglyzR6SpDYHkqw";
                                push:p256dh "BNocq-WqQufNxY5NtFWz-ckbLoCprrHT74ALR-DXcpCoKmqV2cVflQ6ibyas-vJBMWMLeSDPdRBbJhcc0lDmJ5g"
                                    ]
                            ].

How does the developer benefit?

Video Presenting our Demonstrator

Related Work

The current state of notification schemes in Solid are comprised of two alternatives:

Either the client relies on polling to detect updates on a resource independent of the Pod's implementation, or the client uses a WebSocket Subscription as defined in version v0.7.0 of the Solid Protocol (see here). As the WebSocket notification scheme is currently supported by the most used Pod implementations we rely on this scheme in our demo as a fallback when the user chooses not to receive push notifications.

Recently, the Solid Community Notification Panel started reworking Solid's notification protocol. Four notification schemes are currently proposed:

  1. The WebSocket Subscription defines a notification scheme for bi-directional communication between client and Pod using WebSockets.
  2. The EventSource Subscription defines a notification for uni-directional server-sent events from Pod to client using HTTP/2.
  3. The Linked Data Notification Subscription defines a notification scheme relying on the Solid Protocol itself for sending Pod-to-Pod notifications.
  4. The WebHook Subscription defines a notification scheme for pod-to-server callbacks using HTTP.

Web Push Notifications have been proposed in an IETF Draft for Generic Event Delivery using HTTP Push [6] and have been picked up by the W3C in the Push API [1]. Push Notifications are common-place in a typical PWA and are a feature that users expect, especially on mobile. With this demo, we propose an additional notification scheme of Solid Web Push Notifications in Pod-to-PWA fashion. where notifications can be received even when the application is closed.

References

Code

The code of our server module is available on GitHub.
The code of our demo PWA is available on GitHub.

Authors