 Hi everyone, today I'll be talking about web-bush 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 Mozilla and I got selected for it through a program called Outreachy and I also contributed to Brackets, which is a co-editor by Adobe. Now what exactly is Outreachy? Outreachy is an initiative of the Software Freedom Conservancy and it's open to participation for women, transgenders and other underrepresented communities throughout Outreachy, 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 Outreachy 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 Mozilla 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 know you're 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 you know 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 backend is deployed, scaled and secured only once and which is awesome. Now those of you who want to you know 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. 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 you know sending engaging and timely content to users since a very long time and the web is still following. So you know 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 the 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 resorts. That's quite powerful and when there's power there comes responsibility. 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 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 registers call you basically a promise gets resolved 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 pop-up kind of thing which asks your permission whether you'd 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 pushmanager.subscribe is called what this does is it subscribes the service worker with the push server so that it's able to receive push notifications what happens with pushmanager.subscribe is basically a promise is returned which resolves into the subscription 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 a 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 can send notifications as in 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 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 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 PubSub service as I mentioned in the starting so a little bit about what PubSub is 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 how this is done is through PubSub channels basically PubSub 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 basically the publisher is able to send across information on a channel it is not aware of how many subscribers are there or 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 of you for example sake of use the form builder update 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 whenever there is a message published on this particular channel the one which the user has just subscribed to now coming to the part when there is some changes and some data and you know you need to publish to a channel and to inform the subscribers about 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 were 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 to 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 it 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 pop-up 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 see 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 if 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 encrypted 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