 So before starting off, I had a conversation with some of you guys who are sitting over here. And I found that not all of you are from the programmers community or the JavaScript community. So with a show of friends, can everyone say as to who all are the programmers over here? Okay. How many of you are into core JavaScript? Okay. I mean, you are writing JavaScript code in a week, at least. Okay. Doesn't matter a lot, though regarding other people who are from the project management or other, I would say that it's not very geeky, it doesn't dive into the code, but it's more about discussion regarding as to what are the things that you can do with service workers and how you can use them if you intend to. So that is what this talk will be focusing upon. So thanks a lot for SingaporeJS to allow me to actually give this talk. I didn't know that it was one of the agendas to discuss about service workers. Though I'll not be describing as to how you can write your own code for having a service worker of your own. You can have that basically via simple Google search that allows you to see some tutorials. This discussion is more focused towards what you can achieve by doing multiple other things inside service workers. So let's start. So a small survey is what I'm going to put in and you can simply respond with a show of hands. So my first question will be how many of you are aware of more than one feature of service workers just with a show of hand? You can think of offline being it and any other feature apart from offline will be considered. Not a lot of people I would say. But let's see after this presentation I intend to have a lot more people who will be interested towards writing some code using service workers. And what about the people who adjusted your hand? How many of you are actually using service workers in your project? Okay, just one or two. Not much adoption actually. Okay, no worries. What about your applications of using service workers? So if I may ask you, how are you using service workers? Is it for offline experience? I use it to... I use it to consider what you're doing in the browser before sending it to... Oh, okay. Okay. Yeah, that's a nice use case. And who are the business apps regarding using service workers? Yeah. What is your use case? To store an index CD. Indexing? Index CD. Okay, to store it in an index CD. So you're like having a cache basically in an index CD is what I'm going to do this time. Okay. After you download it straight away, you'll be shopping inside the index CD. But you load out the JSON drive, you're straight away... Okay. Sorry, I'm not even going to understand it properly. Oh, so you load the JSON file using service worker. Okay. So again, tap on it, and then you put all this data inside the index CD. Okay. Okay. So basically getting the data from your service and storing them inside the index CD is what the service workers are doing. Instead of hiring the logic and the application is what I am going to understand, right? Okay. Sounds cool. Maybe some specific reason for doing it this way. Maybe we can discuss it later. So let's start with our conversation. So what is a service worker? You can think of it as a scriptable interceptor slash network proxy, or you can even think of as a small script that is running every time in a person's web browser, who has used your website. So when a person comes to your website and you have your service worker script, so your service worker will get registered onto the browser, and your service worker script will be available all the time. So let's say that in case a person has left your website's tab on his browser, and you want to send some information via a push notification, then you can do that via service worker. So it is one of the use cases that I just said, though the most popular as of now is being used as a network proxy. So prefetching resources is what he just mentioned about, that via service workers you can basically prefetch the resources, but it's not just about the data that you intend to display or use or create HTML using that data, but it's also about the static resources so that you can prefetch them basically. Second comes in is syncing data that is when offline and after being offline. So once a person is offline, you don't have any control in storing that data, right? Either you can do it inside a local cache of local storage, or the other way to go with it is to basically let the service worker maintain it. How it will differ from the current implementation of storing it inside your indexed DB is that the current workflow of your application won't be affected by integration of service workers. So by that I mean whatever requests are made when you're offline, your service worker can understand that this is an offline experience that a person is handling. And in those cases it can basically store all the data in any way it wants to and once it's online, it can sync up with the service without actually your application to take care of it. So that's how you can have syncing data feature in the service worker. Next comes in offline capability. That's the most popular feature of service worker where people cache static resources, cache the data that they're actually displaying rendering into the HTML pages and that's how you can provide an offline experience. So if you intend to have a website maybe for a conference or some other page which doesn't get updated or even if you have some sort of single page application, you might want to explore this feature so that you're able to provide an experience when the person is not online. For example, if you're having a 3G network and a person is going into a subway, maybe the connectivity might deteriorate, right? And in those cases you might want to not deteriorate the customer's experience. I mean, he can take some actions at least or just read the data, right? Which doesn't require a network connectivity. So in those cases you might want to actually explore this offline experience. Next comes the fallback response. For example, a 4-4 request for an image. So if you are actually asking or looking for or you have added an image onto a web page and you see that it's giving a 4-4 error, in those cases what you can do is you can basically get another image in that place. So it will be such things can be done very easily via application logic also. Though using service workers you can have an experience where you don't actually change your application's code, instead you add another feature via service worker that takes care of these situations. The next is mock responses. You can also, how many of you have used some other 8Ks or built on top of some other 8Ks? Or consume some other platforms API? Okay, a couple of fans. So in those cases what we usually see is that in case that service is not available, what we intend to do is basically maybe use Charles or some other software that allows us to mock the responses. So in case, so a library hasn't built so far but you can even explore creating a library via service workers that allows you to actually see as to for which request you want what sort of data. Using that you can basically mock a response and in the application code it will be purely that your service worker is handling those requests and responses and your application is working as it should and even in the production. So that's how you can leverage service workers to mock the responses. Next, communication between renderer and service worker using post message API. So that is how our web page can interact with the service worker. So basically service worker allows you to offload what you will process on a web page. If you think that it's CPU consuming, you might want to actually offload it to a service worker so that it can do it for you and then give it back. There are several other things that are integrating with the service worker API. For example, animation. So when that happens, what you can do is basically in case you are doing a lot of processing in some way and wants to offload that particular experience, you can hand it over to service worker which will be taking care of it and you won't be blocking your single thread on the JavaScript side in your web application. Comes next, timeout request. So I guess most of you should be aware of a single point of failures. Should explain what is single point of failures. So single point of failures is a situation when you have put in some sort of static resource on your web page and it's not available. So what will happen is that the browser will make a call to fetch that particular resource but if it's not available, then it will wait for it and your page ending will be stopped till that resource is available or gets to it. So different browsers have different timers for it. For example, Chrome has around 30 to 40 seconds for it but because of a resource which is taking 30 to 40 seconds to get to your client, your client won't be able to see any part of your web page because the rendering of your web page has been stopped for fetching that particular resource. You don't want to have such situations but they usually come in very frequently when you're using maybe some of the third party scripts for your site analysis or some other service. So this is the way that you can now go over it. So the reason for using service workers for a request timeout and not using asynchronous way is that a lot of services, for example, A-B testing services, like Optimize League, they allow you to only have the synchronous code in place, have the synchronous JavaScript in place which is like render blocking, right? What happens in those cases when a CDN is down off Optimize League? What will you do in those cases? So in those cases, basically you don't have any other option but your page ending will be stopped. So what they say is that they have an SLA which is 99.99% but in those very small person when it is down, in those cases your page will be affected. Using service workers, you can basically have a timeout for those cases. Then comes in offline analytics caching. Over here, it's a use case where if you're having Google Analytics, for example, as an example, if you take Google Analytics, whatever data or request have been made to Google Analytics or any other analytics server and while a user is offline, they can be cached by the service worker and they can be synced later after a person is online. So that is how we can use. I guess a demo won't work because it's simple to understand, right? Then coming on, requesting JSON and render HTML via cache templates. So a lot of time gets consumed, a lot more in single page applications when you're rendering your web page by using libraries that allows you to render, use your JSON data and create HTML on the fly. So in those cases, what happens is that the HTML that's created as a template, it takes time to get built in case your data is huge. So in those cases, what you can do is basically cache those HTML templates and use it once again whenever a person does a page refresh or even before when the page is getting loaded. So it can be done in parallel. So that can basically reduce the start render time of your web page. The next comes in, don't invalidate the complete resource. What I just mentioned previously was that you can cache your static resources. For example, you can cache the entire CSS, but when your CSS gets updated, what in those cases? You might want to actually get only the CSS that's newly added, right? So based on the HTTP archive data, almost 97% of the CSS files that are loaded, 97% of them are the same as the previous one. And just 3% is the one that has changed. So why do you actually load, I mean the entire 100%, right? No point. So using some of the plugin or writing some code in your service worker, you can basically get the diff of a particular static resource and use the same instead of downloading the entire file. Next comes in images and service workers. So images have a lot more to do with the service worker because they are huge, right? I mean, most of the time that is taken on the networking performance of your web page is taken by the images because they are quite heavy. So in those cases, you might actually want to offload this process somewhere. The following are the methods that you can do. Comes in next is dynamic image format. So how many of you are aware of WebP image format? Okay, a couple of fans. WebP allows, is a better compression algorithm that's available for compressing your images. And it's not available for all of the browsers and is limited to the browser support. In those cases, what you might want to do is that depending upon what is the browser or whether it allows the use of WebP, you might want to have that particular image in place. So using service workers, you can basically intercept the request for a particular image. See as to what the header is sent for that particular image because that will be sent by the browser, which will say that, yeah, I allow a WebP image. I support a WebP image. And when you see that, you can basically modify the requested URL that may be for your CDN. A lot of the CDNs allow it that they can basically respond with a WebP format image in case a browser allows it, though a lot of CDNs don't. In those cases, you can basically use service workers and do it by your own script instead of relying on the CDNs. Next comes in is image spreadsheet. So image spreadsheet, most of us use it in CSS, right? With a hack or with a functionality where we actually signify it using the background image, the CSS rule. And that's how you can use image spreadsheet. Though if you actually intend to use those images in different parts of the page without using the CSS, so how will you do it? That logic can be basically extracted into the service workers so that whatever the request comes in, you can actually, in the image spreadsheet, see what image it is and depending upon that, create a resource for it and send it back to the request that was made by your application. So that's how you can even differentiate the logic of using image spreadsheet from your application to the service workers. So this is a simple example. Extracted SVGs can be used in multiple ways. It's just an example where I've demonstrated that the SVG master is a single file which contains all of the SVGs that are coming from the server. They are requested by a service worker which is basically a network proxy in a browser. Over there, you understand that this is a SVG sprite and you extract and you basically do a mapping or a sort of mapping that you can think of and depending upon what image is requested by your application, you can get that particular SVG and respond back to the application. So your service worker has basically requested for just a single file from your server which is SVG master and the application of yours, depending upon the use case or whatever it is, it can basically get the particular image. Comes next, cached header for JPEGs. So has any of you read that particular article by Facebook where it said that it wanted to reduce the load time of their Facebook application so much so that their image or the image that is loaded as the cover photo, it gets reduced as even 200 bytes. So that's what they were looking forward to implement and they actually implemented it inside their Facebook iOS application and on the native devices. But you can do a similar thing via service workers also. So basically, if you intend to reduce the size of your images down to 200 bytes, you'll actually see that a lot of images have their static headers which is 200 bytes. In those cases, what you'll want to do is cache that particular header in some way and just get the response which adds up to that particular image so that you can reduce the cost of that particular image. So that's how you can use it. This link refers to the optimization that Facebook did. An implementation for the service worker is not available though if you really intend to, you can write this particular method by your own. Next comes in is push notifications. So a live demo will be... So how many of you have actually used push notifications? Okay, this is a single hand. So push notifications allow you to send notifications to your browser to the subscribers of your website. So over here, I have actually subscribed... Okay, I haven't because it's a new laptop. Okay. So I do trigger opt-in. It shows a pop-up which asks whether you want to allow the push notifications or not because this is not my laptop so I have to ask, can you allow for the push notifications? Okay. Well, that's being generous. So once you allow, you have basically subscribed to the push notifications from your website or the publisher in which case will be the platform user of push true. Once that's done, well, this guy makes a call to create a request or to send a push notification to all the subscribers. This is the sort of notification that you'll see on the top right that you can get to all of your subscribers. So let's say that you have a blog post or you have a blog basically and you want to have subscribers like you do for email sign-ups, right? So what you can do is basically have this sort of JavaScript which allows people to be a part of your... be a part of your following and via that you can send push notifications to them which come onto the desktop. If they've accessed it via mobile, there's a notification on their mobile. And it has got better conversions as compared to email notifications. So you should definitely check it out. So now what happens when everybody starts using it? Yeah, when everybody starts actually using them, it surely will be... I mean, a hassle because a person will be seeing a lot more notifications. In those cases, there also means for making those notifications go away. You have those settings in place that you can remove or stop getting push notifications from that particular website. So it's not visible now but when the push notification came, it actually mentioned as to what website you had opted in for. So you can go to that particular website and if they had provided the provision or by doing just a right click on the HTTP sign, you can basically disable those push notifications from over there. What he's saying is you're subscribed to his blog now. I mean, you can opt it out for sure. Did you get a new laptop? Which emails were you comparing this to that it gets more conversions? So I actually read the blog post and they were saying that the usual conversions that they saw for the email sign-up letters of their customers was around 27% around. And after this, they were able to see a jump of 35%. Having the push notifications in place, they were able to see the convergence of people landing up onto their blog post as 37%. This might not be your fourth day, but have you seen this used in any e-commerce sites? Or have you seen an example of this being used on the e-commerce site? I haven't seen so far though. So there are several things that you can do with these push notifications with e-commerce stores. So do you intend to have an example for the same old poll? I saw Facebook for the mobile website used post notifications without the app when you use the website in home. So yeah, that's one use case that people have used and so forth. But surely, I mean, you can think of several other ways, for example, people can, I mean, if you have a push notification saying that you're offering a discount and if a user sees it and is interested, then maybe it can get you conversion, right? I can just imagine my grandma or somebody knowing how to get rid of them and just putting a sticker at the top right hand side of the screen or something. I can see this being just such a horrible abuse mechanism. The problems are always a bit solved based with the mobile devices so I'm sure we'll take some more steps. Maybe a notification center might come in for Android or iOS as well where you'll be able to see in a better way as what our services we are subscribed to and from over there you can hand it off like you do for the native devices. Actually, there was a notification center which was there in Google Chrome, but they I mean, disabled it because they were seeing that it was of no use. I mean, people were not using it actually. They were using it for removing it altogether. When you authorize that it's just like a permanent on, right? So this is like what you do is similarly for getting the location of a particular user. So in a similar way that you disable it that is how you can disable it even for the service worker. I'm just wondering if there's sort of deep rails this whole thing, but the ability to set something like a time-based permission would be good. I'm wondering if Safari does stuff like that. I could do Safari location for example. It'll say like you can allow it for now one request or for like a day they don't even allow for like indefinite Chrome. So it's through a privacy launched browser render. I have actually seen that particular feature inside Chrome where when you have implemented this particular feature of adding your website as a web application that is add to home screen. Over there you have a similar concept where it doesn't allow you to actually do it till it has been viewed by more than three times or four times. That is how it is. So I'm not sure as to people have abused it for now and Google or any other I mean platform provider sees as it being misused though if it will be and most probably it will in many future so they might have a solution in place till then. So the next comes in what is the security? By security I didn't actually mean to say the usability regarding this but having CSP to work with the service worker. So as of now you can have any sort of so with the ease of hand can anybody tell as to how many people understand by CSP. Okay so CSP basically means content security policy that you can implement in your website which allows you to tell the browser as to what sort of resources you want to fetch onto a particular website. What are the domains that you want to whitelist? What are the scripts or the styles or the images that you want to whitelist? Anything apart from that won't be ever loaded onto your webpage. Whether be it a Chrome extension injecting some sort of malicious malware or your ISP actually injecting some sort of step to analyze or get the traffic for a particular website to analyze a particular traffic. So that is what you can implement. And with the integration of CSP so this is more of a future plan where CSP when used with service workers will allow you to actually verify as to what all resources are being fetched from a service worker. So I mean the features are done. This is like imagination is more important than knowledge and it's about us as to what we think can be the applications and that is how we can extend this particular community and add up more plugins to this particular community so that people can use it. What are the features that I have mentioned so far? They don't have a lot of code base or modules that you can use by yourself. So if you want to actually contribute you can for a particular use case and you find it useful for your project as well. You can basically create a module for the service workers so that everyone can use it. So the resources that are used to keep track of this particular feature is C for the W3 specs. The service worker specification, the demos that are there on GitHub contributed by Google. The service worker ready is a great resource that you can find. The slides by Ilya Grigrick will help you to understand as to how you can specifically use this service worker for having a network proxy. My slides will be available on Slideshare.net and I'll be updating that link on the Meetup as well so you can see my slides from over there. That's it for now. Thanks. Did you just do the whole talk without mentioning browser support? Okay. I can only assume it's terrible because you didn't mention it. What's the browser support like? So it's limited to users. So even though it is but in the near future you will be having it and if you're able to think of some applications which are there for most of the users, for example if you have Tom users and you're having a lot of Tom users of your own websites then it will be available for them and if you can think that you can enhance their experience then why not? So that's what you can take for now. Any other question? I was using WebWorkers before so I was wondering what is the difference between WebWorkers and ServiceWorkers? So ServiceWorker is a specific implementation of WebWorkers when it allows you to have different integration with other services. For example there are a lot more things that are coming up in ServiceWorker like animation, like for example you can have a renderer for example from the main page or the main website, you can pass in some reference to your Tom to your ServiceWorker so that it can use it for adding for offloading the process that you will be handling onto your JavaScript to the ServiceWorker. That's how you can use it in differentiation to a WebWorker. Any other question? So the way to invoke a ServiceWorker is to call a URL? No, it's not a URL it's a ServiceWorker that should be loaded on HTTPS and over there you have to use the basic API which allows you to register a ServiceWorker once the ServiceWorker has been registered it calls to a particular URL which will be your ServiceWorker JavaScript and that will be the one that will be loaded every time a change happens into a ServiceWorker or for the first time when it gets registered. So the WebWorker I can invoke it directly from my application ServiceWorker is invoked by me directly or only by so you will be registering a ServiceWorker and then the script will be loaded for your ServiceWorker and that's how it will get I mean it has already got registered though its actual implementation will start when that script is paused and loaded Any other question? Okay, thank you, thanks