diff --git a/README.md b/README.md index 01f44d9..08fab17 100644 --- a/README.md +++ b/README.md @@ -110,7 +110,7 @@ return render(request, 'template.html', {"webpush":webpush}) Sending Web Push Notification ------------------- -A Web Push generally have a header and body. According to the W3C Specification, the data should be encrypted in transmission. the data is addressed as payload generally. Also a TTL header should be included indicating how much time the web push server store the data if the user is not online. +A Web Push generally have a header and body. According to the W3C Specification, the data should be encrypted in transmission. The data is addressed as payload generally. Also a TTL header should be included indicating how much time the web push server store the data if the user is not online. So in order to send notification, see below. - If you would like to send notification to a specific group, do like following: @@ -138,6 +138,28 @@ So in order to send notification, see below. # Here in the user parameter, a user object should be passed # The user will get notification to all of his subscribed browser. A user can subscribe many browsers. ``` + + **And the subscribers will get a notification like:** + +![Web Push Notification](http://i.imgur.com/VA6cxRc.png) + +- If you notification should have an icon or open a url when clicked, you can add those to the payload: + + ``` python + from webpush import send_user_notification + + from webpush import send_group_notification + + payload = {"head": "Welcome!", "body”: "Hello World", + "icon": "https://i.imgur.com/dRDxiCQ.png“, "url": "https://www.example.com"} + + send_group_notification(group_name="my_group", payload=payload, ttl=1000) + ``` +**And the subscribers will get a notification like:** + +![Web Push Notification icon](http://i.imgur.com/Vr1RMvF.png) + +**That will open https://www.example.com if clicked.** - If you want fine grained control over sending a single push message, do like following diff --git a/webpush/templates/webpush_serviceworker.js b/webpush/templates/webpush_serviceworker.js index e3c879c..1c19d7d 100644 --- a/webpush/templates/webpush_serviceworker.js +++ b/webpush/templates/webpush_serviceworker.js @@ -1,20 +1,34 @@ - // Register event listener for the 'push' event. self.addEventListener('push', function(event) { // Retrieve the textual payload from event.data (a PushMessageData object). // Other formats are supported (ArrayBuffer, Blob, JSON), check out the documentation // on https://developer.mozilla.org/en-US/docs/Web/API/PushMessageData. - var payload = event.data ? event.data.text() : {"head": "No Content", "Body": "No Content"}, + let payload = event.data ? event.data.text() : {"head": "No Content", "body": "No Content", "icon": ""}, data = JSON.parse(payload), head = data.head, - body = data.body; + body = data.body, + icon = data.icon; + // If no url was received, it opens the home page of the website that sent the notification + // Whitout this, it would open undefined or the service worker file. + url = data.url ? data.url: self.location.origin; // Keep the service worker alive until the notification is created. event.waitUntil( // Show a notification with title 'ServiceWorker Cookbook' and use the payload // as the body. self.registration.showNotification(head, { - body: body + body: body, + icon: icon, + data: {url: url} }) ); -}); \ No newline at end of file +}); + +self.addEventListener('notificationclick', function (event) { + event.waitUntil( + event.preventDefault(), + event.notification.close(), + self.clients.openWindow(event.notification.data.url) + ); +}) +