Webpush Channels
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Kaur, Mansimar
After introducing the Kinto project I am working on, I will explain why pushnotifications can be useful in the web environment and how I integrated theweb push API in Python in Kinto as well as on the client using serviceworkers. What is Kinto? Kinto is a minimalist JSON storage service with synchronisationand sharing abilities. It is easy to use and to self-host. Kinto is used anddeveloped at Mozilla and released under the Apache v2 licence. Why use Kinto? Kinto lets you focus on writing great user-facing interfacesand takes care of storing, sharing and synchronizing your application statewith multiple devices or users. It is often a big deal for developers todevelop web APIs that handle CORS, are secure, respect users privacy bysupporting encryption when building applications that work offline, store dataremotely, and synchronise across devices. Existing solutions either rely onbig corporations that crave user data, or require a non-trivial amount of timeand expertise to develop a new server for every new project. We want to helpdevelopers focus on their business logic and value proposition, and we don’twant the challenge of storing user data or developing backends to get in theirway. The path between a new idea and deploying to production should be short!Also, we are firm believers of the fact that data belongs to users, and notnecessarily to the application authors. Applications should be decoupled fromthe storage location, and users should be able to choose where their personaldata is stored. The backend can often be universal, generic and reusable. Weenvision mutualisation of services and self-hosting: the backend is deployed,secured and scaled only once for several applications, which is amazing! Why Web Push? Push notifications allow users to opt-in to timely updates fromthe sites they love and allow you to effectively re-engage them with not onlycustomized and engaging content but also enable real time interactions withother users of the application, realtime updates and real time data sharingthrough websockets With Web Push, the notification payload is encrypted by theserver sending the notification which makes it really secure and privacyaware. Web push is a browser API feature so that you don't need to pay or todeploy anything on the server side to have it working out of the box. HOW TO PUSH: What is a service worker? A service worker is a worker working in thebackground of your browser that can handle events for a given origin and path.It takes the form of a JavaScript file that can control the web page/site itis associated with. They will also allow handling of push notification eventsand background sync APIs. Service workers keep working after the page orwebsite is closed and between browser restarts. How to use push notifications? On the client side, it means to setup a serviceworker and to get a subscription for the user browser. The resultingPushSubscription includes all the information that the application needs to beable to send a push message: an endpoint and the encryption key needed forauthenticating and encrypting the data. What is the Kinto Push Service? In the Kinto use case, all users of the sameweb application will probably want to receive notifications informing themabout the creation, updation or deletion of a collection or a record fromanother device. Each device will have its own subscription endpoint andencryption key and the payload will need to be sent to each one of them. Myproject was about creating a service that can handle subscriptions managementand notification broadcast for a given channel. When the web applicationstarts, it will start a service worker that will be configured to receive pushnotification and sent them back to all the active browser pages of the webapplication. The application will call the push service to register the pushsubscription on some events. A Kinto plugin will be triggered each time theapplication collection changes and it will call the ‘send the notifications’on the push service channel. The push service will get the notification,encrypt it and publish it to all the subscriptions for that user. Role of the PushAPI: \- So, once you’ve got the permission for notifs,registered the service worker and suscribed to push notifs! Congratulations,major breakthrough has been achieved already. \- Send the endpoint associatedwith the subscription and generate a client public key(PushSubscription.endpoint and PushSubscription.getKey()) to the server so itcan send push message when required. \- Using the Channel Messaging API set upa new message channel (MessageChannel.MessageChannel()) to communicate withthe service worker and by calling Worker.postMessage() on the service worker,in order to open up the communication channel. \- On the server side, storethe endpoint and any other required details so they are available when a pushmessage needs to be sent to a push subscriber. In a production app, it needsto be…
 Hi everyone, today I will be talking about webbush channels which is a Pub-Sub paradigm and channel based push service. My name is Mansimhar Kaur and I work as a software developer intern with the storage team of Missila and I got selected for it through a program called Outreachee and I also contributed to Brackets which is a core editor by Adobe. Now what exactly is Outreachee? Outreachee is an initiative of the software freedom conservancy and it's open to participation for women, transgenders and other underrepresented communities. Throughout Reachee, free and open source software organizations hire interns to work remotely for three months on projects in collaboration with mentors. So what I'm talking to you about today is basically my Outreachee project and the organization that I'm working with is Kinto. So a couple of points about Kinto and why it's so amazing. Kinto is basically a minimalist JSON storage service which is being used and developed at Missila and it has been released under the Apache V2 license. So through Kinto you can create great user-facing interfaces which can be synchronized over multiple devices and when you create a web API there are multiple number of times you are worried about handling cross-origin resource sharing or maybe you want your web app to be very secure, you want to take care of the privacy of the users through encryption. So when you use Kinto the path between your great idea and the deployment to production will be quite short and we at Kinto affirm believers of the fact that user data belongs to users and not necessarily the application. So we believe that the application should be decoupled from the storage location and now coming to the mutualization of services and self-hosting part which basically means that the back end is deployed, scaled and secured only once and which is awesome. Now those of you who want to start contributing to Kinto or want to use it, you can join our ISC channel which is hashtag Kinto on isc.phenote.net and you can also join us on Slack and you can find us on GitHub on github.com.kinto and now coming to address the elephant in the room which is my project, what is web push? Now basically native apps have had the privilege of sending engaging and timely content to users since a very long time and the web is still following. So maybe you're busy doing some other stuff, you're folding your laundry and you're connected to the internet or you're surfing some other website and you've allowed another website to let you push notifications. So they can send you notifications with whatever new content is available. Now why is it exactly called web push? Because the data that is being sent to you is basically being pushed by the web app server to you and it is being displayed to you in the form of a notification using the show notification API. Now for a website to be able to push notifications, it's very essential that the website has an active service worker. Now what is a service worker? A service worker is basically a JavaScript file which acts as a background worker and it is able to control the web pages and sites it is associated with. It basically acts as a proxy server between your browser and the web app server by routing data between them. And a service worker is active and keeps working even when you're not on that particular web page or website to which the service worker is associated and it even keeps running during browser resets. That's quite powerful and when there's power there comes responsibility. So service workers can only be registered over web pages that are served on HTTPS and since a service worker is not associated with a particular tab or just page, it cannot handle the dom but it can send events to it and in future service workers will be able to support geo fencing which is basically, geo fencing is an API in which there will be geographic boundaries which can be marked and when your device crosses that you'll be able to receive notifications. Now that basically when you use a visitor web page which has a service worker associated with it, what happens is through service worker container or register call you basically a promise gets resolved to a, I'm sorry, through service worker container or register. After this an object is returned that object is basically the registration of the service worker. Once the registration is done, the service worker file is downloaded on your browser and this happens after every 24 hours or so and can be done even in a lesser time and if the file that is downloaded is found to be new, it is installed and if your browser is not using the previous service worker file then the new one will be activated and once the activation is done the first step to be able to receive push notifications is done. Now coming to the next step, basically when you visit a website you must have seen that you get this popup kind of thing which you know asks you permission whether you would like to receive some notifications. You can always choose to receive notifications or to block them. Once you click on always receive notifications what happens is push manager.subscribe is called. What this does is it subscribes the service worker with the push server so that it is able to receive push notifications. What happens with push manager.subscribe is basically a promise is returned which resolves into the subscription. Now what happens, now that I mentioned the push server what exactly it is, it basically acts as a middleman between your web app server and the client routing the payload between them and what happens is the service worker has a communication channel with the push service. Now talking about the UAID, UAID is the user agent ID what happens is there is a communication channel between the browser and the web and the web push server that channel between them is recognized with the UAID. So if a particular user has basically given permission for the push notifications the server will be able to send information with the help of this UAID to your browser. Now when the browser receives the information it has to be sent to the service worker that is involved. Now to be able to send that information to the service worker the browser identifies it through a channel ID. So through the channel ID the service worker is able to receive the information. Now coming back to the part where we have sent this request for subscription to the push server. Now what the push server does is it returns the capability URL and encryption keys. Now talking about the capability URL on the internet there are two ways in which we can access information. The first is through passwords and the second is through obscure URLs which contain information and people who should be able to access that information only those have those URLs. So capability URL is just that and encryption keys are for encrypting the payload that will be sent across in the push messages. So the push server sends back the capability URL and encryption keys to the service worker and the service worker sends them back to the, sends them across to the web app server. So the web app server when, so that the web app server can send notifications as and when they have to be sent. Now talking about the web push channels that I am creating in that what happens is one to be able to, this is a sample request which sends across the subscription, the push notification subscription to the service. So this is basically a post request in which the endpoint URL which is a capability URL and the keys are being sent across. Here I have used HTTP pi to send the example request and this is my server, this is my URL and the endpoint is slash subscriptions and what you can see in the form of auth token is basically basic auth which is used for authentication. Once I send the post request, this is the example response that I get which is 201 created. What happens is this subscription has been created and saved for future reference you know when a subscription has to be, when a push notification has to be actually sent to the subscriber. Now what basically the service that I have created is a pub sub service as I mentioned in the starting. So a little bit about what pub service, now that the subscription has been done and we have allowed the web app server to send us notifications, we need to inform the web app server about what things we require notifications. So what, how this is done is through pub sub channels, basically pub service is a paradigm in which there are publishers and then there are subscribers and the publishers are the ones which send out information and subscribers are the ones which want that information and both the publisher and the subscriber, I mean the publisher and the subscriber bosses them without like, basically the publisher is able to send across information on a channel, it is not aware of how many subscribers are there or you know like not directly sending it to each one of them, basically there is a channel just like a TV channel on which you can just send across the information and the publisher publishes the information and the subscribers which have subscribed to a particular channel, they can access that information. Now coming to the part how to subscribe a channel, to subscribe to a channel you basically have to send a put request on the end point slash channel slash channel ID slash registration where channel ID is basically a channel name and for example, for example sake of use the form builder update, a form builder update channel and channels basically after you send the put request, you get an accepted request which means that the servers acknowledge the fact that you want to be informed about whenever there is a published, whenever there is a message published on this particular channel, the one which the user has to subscribe to. Now coming to the part when there is some changes in some data and you know you need to publish to a channel and to inform the subscribers about the whatever changes have taken place, so what happens is a post request is sent to the push server and the data payload is encrypted using the encryption keys which was sent with the subscription, the subscription that we received initially when the user had allowed us to send them push notifications along with the end point URL. So those encryption keys will be used to encrypt the payload and send across the push message in the form of a post request. So the end point here is slash channel slash channel ID. Now the example response will be 202 accepted and as I told you that data payload will be encrypted and it will be authenticated through the end point and for encryption we use web pusher and when this push message will be sent across it will be sent across with a TTI header which is a time to live header which tells the push server for how long the message that has been sent has to live on the server when the user is not online. So once the push server receives it, it can send it across. Now to summarize the entire process that takes place, what happens is you get a popup saying would you like to subscribe to notifications, you say yes. So what the service worker does is it sends a request to the push server basically and the push server sends across the end point in the encryption keys and after you get the end point in the encryption keys you send it to the web app server. That subscription is saved and now you have to inform the server about what channels you want to subscribe to. You send across a put request and you inform the server about what channels you want to subscribe to and after you've subscribed and say some data changes happen and now you need to be informed about it. The data will be retrieved and the encryption keys will be retrieved and the encryption will be done and the payload will be sent across to the push server and then the push server will store it until it can directly pass it on to the browser if the user is online or the user is not online. The message will live on the server for the time specified in the TTL which was the time to live header and when the payload is received, the payload is decrypted and sent to the respective service worker and the service worker decides whether it has to be shown in the form of a notification through the show notification API or something has to be done in the background. So that's about it. Thank you. Thank you.
 Hi everyone, today I will be talking about webbush channels which is a Pub-Sub paradigm  and channel based push service.  My name is Mansimhar Kaur and I work as a software developer intern with the storage  team of Missila and I got selected for it through a program called Outreachee and I  also contributed to Brackets which is a core editor by Adobe.  Now what exactly is Outreachee?  Outreachee is an initiative of the software freedom conservancy and it's open to participation  for women, transgenders and other underrepresented communities.  Throughout Reachee, free and open source software organizations hire interns to work  remotely for three months on projects in collaboration with mentors.  So what I'm talking to you about today is basically my Outreachee project and the organization  that I'm working with is Kinto.  So a couple of points about Kinto and why it's so amazing.  Kinto is basically a minimalist JSON storage service which is being used and developed  at Missila and it has been released under the Apache V2 license.  So through Kinto you can create great user-facing interfaces which can be synchronized over  multiple devices and when you create a web API there are multiple number of times you  are worried about handling cross-origin resource sharing or maybe you want your web app to  be very secure, you want to take care of the privacy of the users through encryption.  So when you use Kinto the path between your great idea and the deployment to production  will be quite short and we at Kinto affirm believers of the fact that user data belongs  to users and not necessarily the application.  So we believe that the application should be decoupled from the storage location and  now coming to the mutualization of services and self-hosting part which basically means  that the back end is deployed, scaled and secured only once and which is awesome.  Now those of you who want to start contributing to Kinto or want to use it, you can join our  ISC channel which is hashtag Kinto on isc.phenote.net and you can also join us on Slack and you  can find us on GitHub on github.com.kinto and now coming to address the elephant in the  room which is my project, what is web push?  Now basically native apps have had the privilege of sending engaging and timely content to  users since a very long time and the web is still following.  So maybe you're busy doing some other stuff, you're folding your laundry and you're connected  to the internet or you're surfing some other website and you've allowed another website  to let you push notifications.  So they can send you notifications with whatever new content is available.  Now why is it exactly called web push?  Because the data that is being sent to you is basically being pushed by the web app server  to you and it is being displayed to you in the form of a notification using the show  notification API.  Now for a website to be able to push notifications, it's very essential that the website has an  active service worker.  Now what is a service worker?  A service worker is basically a JavaScript file which acts as a background worker and  it is able to control the web pages and sites it is associated with.  It basically acts as a proxy server between your browser and the web app server by routing  data between them.  And a service worker is active and keeps working even when you're not on that particular web  page or website to which the service worker is associated and it even keeps running during  browser resets.  That's quite powerful and when there's power there comes responsibility.  So service workers can only be registered over web pages that are served on HTTPS and  since a service worker is not associated with a particular tab or just page, it cannot handle  the dom but it can send events to it and in future service workers will be able to support  geo fencing which is basically, geo fencing is an API in which there will be geographic  boundaries which can be marked and when your device crosses that you'll be able to receive  notifications.  Now that basically when you use a visitor web page which has a service worker associated  with it, what happens is through service worker container or register call you basically a  promise gets resolved to a, I'm sorry, through service worker container or register.  After this an object is returned that object is basically the registration of the service  worker.  Once the registration is done, the service worker file is downloaded on your browser  and this happens after every 24 hours or so and can be done even in a lesser time and  if the file that is downloaded is found to be new, it is installed and if your browser  is not using the previous service worker file then the new one will be activated and once  the activation is done the first step to be able to receive push notifications is done.  Now coming to the next step, basically when you visit a website you must have seen that  you get this popup kind of thing which you know asks you permission whether you would  like to receive some notifications.  You can always choose to receive notifications or to block them.  Once you click on always receive notifications what happens is push manager.subscribe is called.  What this does is it subscribes the service worker with the push server so that it is  able to receive push notifications.  What happens with push manager.subscribe is basically a promise is returned which resolves  into the subscription.  Now what happens, now that I mentioned the push server what exactly it is, it basically  acts as a middleman between your web app server and the client routing the payload between  them and what happens is the service worker has a communication channel with the push  service.  Now talking about the UAID, UAID is the user agent ID what happens is there is a communication  channel between the browser and the web and the web push server that channel between them  is recognized with the UAID.  So if a particular user has basically given permission for the push notifications the  server will be able to send information with the help of this UAID to your browser.  Now when the browser receives the information it has to be sent to the service worker that  is involved.  Now to be able to send that information to the service worker the browser identifies  it through a channel ID.  So through the channel ID the service worker is able to receive the information.  Now coming back to the part where we have sent this request for subscription to the  push server.  Now what the push server does is it returns the capability URL and encryption keys.  Now talking about the capability URL on the internet there are two ways in which we can  access information.  The first is through passwords and the second is through obscure URLs which contain information  and people who should be able to access that information only those have those URLs.  So capability URL is just that and encryption keys are for encrypting the payload that will  be sent across in the push messages.  So the push server sends back the capability URL and encryption keys to the service worker  and the service worker sends them back to the, sends them across to the web app server.  So the web app server when, so that the web app server can send notifications as and when  they have to be sent.  Now talking about the web push channels that I am creating in that what happens is one  to be able to, this is a sample request which sends across the subscription, the push notification  subscription to the service.  So this is basically a post request in which the endpoint URL which is a capability URL  and the keys are being sent across.  Here I have used HTTP pi to send the example request and this is my server, this is my  URL and the endpoint is slash subscriptions and what you can see in the form of auth  token is basically basic auth which is used for authentication.  Once I send the post request, this is the example response that I get which is 201 created.  What happens is this subscription has been created and saved for future reference you  know when a subscription has to be, when a push notification has to be actually sent  to the subscriber.  Now what basically the service that I have created is a pub sub service as I mentioned  in the starting.  So a little bit about what pub service, now that the subscription has been done and we  have allowed the web app server to send us notifications, we need to inform the web  app server about what things we require notifications.  So what, how this is done is through pub sub channels, basically pub service is a paradigm  in which there are publishers and then there are subscribers and the publishers are the  ones which send out information and subscribers are the ones which want that information and  both the publisher and the subscriber, I mean the publisher and the subscriber bosses them  without like, basically the publisher is able to send across information on a channel, it  is not aware of how many subscribers are there or you know like not directly sending it to  each one of them, basically there is a channel just like a TV channel on which you can just  send across the information and the publisher publishes the information and the subscribers  which have subscribed to a particular channel, they can access that information.  Now coming to the part how to subscribe a channel, to subscribe to a channel you basically  have to send a put request on the end point slash channel slash channel ID slash registration  where channel ID is basically a channel name and for example, for example sake of use the  form builder update, a form builder update channel and channels basically after you send  the put request, you get an accepted request which means that the servers acknowledge the  fact that you want to be informed about whenever there is a published, whenever there is a  message published on this particular channel, the one which the user has to subscribe to.  Now coming to the part when there is some changes in some data and you know you need  to publish to a channel and to inform the subscribers about the whatever changes have  taken place, so what happens is a post request is sent to the push server and the data payload  is encrypted using the encryption keys which was sent with the subscription, the subscription  that we received initially when the user had allowed us to send them push notifications  along with the end point URL.  So those encryption keys will be used to encrypt the payload and send across the push  message in the form of a post request.  So the end point here is slash channel slash channel ID.  Now the example response will be 202 accepted and as I told you that data payload will be  encrypted and it will be authenticated through the end point and for encryption we use web  pusher and when this push message will be sent across it will be sent across with a  TTI header which is a time to live header which tells the push server for how long the message  that has been sent has to live on the server when the user is not online.  So once the push server receives it, it can send it across.  Now to summarize the entire process that takes place, what happens is you get a popup saying  would you like to subscribe to notifications, you say yes.  So what the service worker does is it sends a request to the push server basically and  the push server sends across the end point in the encryption keys and after you get the  end point in the encryption keys you send it to the web app server.  That subscription is saved and now you have to inform the server about what channels you  want to subscribe to.  You send across a put request and you inform the server about what channels you want to  subscribe to and after you've subscribed and say some data changes happen and now you need  to be informed about it.  The data will be retrieved and the encryption keys will be retrieved and the encryption  will be done and the payload will be sent across to the push server and then the push  server will store it until it can directly pass it on to the browser if the user is online  or the user is not online.  The message will live on the server for the time specified in the TTL which was the time  to live header and when the payload is received, the payload is decrypted and sent to the respective  service worker and the service worker decides whether it has to be shown in the form of  a notification through the show notification API or something has to be done in the background.  So that's about it.  Thank you.  Thank you.
Webpush_notifications_for_Kinto_0_131.png Webpush_notifications_for_Kinto_132_311.png Webpush_notifications_for_Kinto_312_707.png Webpush_notifications_for_Kinto_708_1307.png Webpush_notifications_for_Kinto_1308_3263.png Webpush_notifications_for_Kinto_3264_3767.png Webpush_notifications_for_Kinto_3768_4907.png Webpush_notifications_for_Kinto_4908_7139.png Webpush_notifications_for_Kinto_7140_8627.png Webpush_notifications_for_Kinto_8628_9743.png Webpush_notifications_for_Kinto_9744_11483.png Webpush_notifications_for_Kinto_11484_12803.png Webpush_notifications_for_Kinto_12804_13187.png Webpush_notifications_for_Kinto_13188_13895.png Webpush_notifications_for_Kinto_13896_13955.png Webpush_notifications_for_Kinto_13956_14087.png Webpush_notifications_for_Kinto_14088_14339.png Webpush_notifications_for_Kinto_14340_16379.png Webpush_notifications_for_Kinto_16380_17435.png Webpush_notifications_for_Kinto_17436_17543.png Webpush_notifications_for_Kinto_17544_18359.png Webpush_notifications_for_Kinto_18360_18683.png Webpush_notifications_for_Kinto_18684_19487.png Webpush_notifications_for_Kinto_19488_21863.png Webpush_notifications_for_Kinto_21864_22079.png Webpush_notifications_for_Kinto_22080_22199.png