 First of all, morning everyone. It's audible at the back. Am I right? Perfect. So Hi, I'm Trishul. I work at Clicks, a company called Clicks, and I volunteer for Mozilla and Just a way to put it, I believe myself as a clock-handed at Clicks and Superman at Mozilla. So Today, I'll be talking about progressive web apps. How many of you know this term? That makes my task really, really easy because the next slides I can just really skip that. So what is a PWA? It's a common ground between website and native app. It has discoverability of web and retention of an app. So how many of you know Alex Russells by any chance? Okay, so he is a guy who said they are just the website that took all the right vitamins. How many of you agree on this statement on with me? Okay, let's see the hand count and let's talk after this stuff. Why are you talking about PWA? It's installable. How many of you agree with that? Perfect. Works offline. Faster load time. This is our crucial one. How many of you agree on this? They're faster load times. Cool. Push notifications. I know everyone is annoyed. How many of you are really annoyed by push notifications? Okay, we are on the same page then. All in all, an app-like experience via web. So a typical PWA looks like this. Whenever you visit a website, it gives you a notification like, hey, do you want to install this one? When you install, it gets an icon like that. If this is the icon just in case. It's a simple app. Then it has a splash screen and finally, finally the app. So this is what a PWA looks like. How to create a PWA? A simple web app manifest. So the first part basically tells where the manifest is and the second part what manifest is. It's just a JSON file which has kind of metadata about your app like your name, short name, the color theme, the icon on the splash screen, something like that. And I believe like this is a common knowledge by now. How many of you know service workers? It's getting easier. So I believe service workers are building block of PWA. So it provides features like offline caching, push notifications. So the title of my talk is PWA on steroids, right? But this is all about PWA. The question is where are the steroids? What are steroids? Any guesses? Anyone? I know it's early morning, 10 o'clock. So still here's the thing like I'm just engaging so that I don't sleep. So anyone? Kind of. That's a right good. Anyone else? Multi-platform native plugins like Kodoba. Sorry? Syncboost request. Okay. Yeah, kind of. Sorry? Performance enhancement. So this is really interesting because I got lots of new ideas now because my idea was very, very, very small, very, very narrow. And I just keep it to browser APIs. So the modern browser APIs gives the power to JavaScript to interact with the device features. That this led JavaScript to go beyond the browser to make more app-like features to start with. We have something called a speech synthesis. How many of you use this one? For those who have not used, let's try to use it if my browser allows me. Okay. Oops, not this one. Or really I should have put if it works. Mirroring has always been a pain. Where is it opening? Really? I cannot see. I'm just typing like hopefully it works. So let's say speech synthesis. Okay. So as simple as it's a normal text-to-speech engine and so maybe my laptop needs a mic. Good morning. Or maybe how I said morning in the really morning. Good morning. That's how my morning sounds in the morning. I really wish it could be like something like this. Good morning. But you know how it works. So looking at this, this is the line of code. These are the lines of code which I used to make that. Just look at the code for a while. That's the beauty of JavaScript. The developers have done enough work to expose an API which you can use for five lines and you can generate an output like that which I did. So the first thing we have to get a speech synthesis object and this is kind of not mandate free. This gives the voices from a browser. Else it will default to whatever your language of a browser is. Then we create this speech synthesis is a trend and we pass the text, the actual text which we type or which we read. Kind of screen read or something. And these are the settings which I can do which are not mandatory. And then all you have to do is very, very obvious thing, speak. So that's the line of code which I wrote for that experience. Okay. So let's do the reverse of this. Speech recognition. So let's say so before this I'll give you a disclaimer. This talk will be lots of demos and whoever has attended a talk before or spoke anywhere you know the probability of success of the demos in live talk, right? So please spare me. Please believe in me. And let's keep our fingers crossed the demos work. To start with, let's try this. Oh really? Yeah. Good morning. No? Good morning. Okay, it's working. Okay, time to turn off. Sorry. It's getting really, really literal. So the point is like this is right in my browser. I have no text, speech to text engine there. This string has been originated from my browser. And before I say something please get kind of acquainted with my laziness. So if I do something I really don't want to write a code for that. I want to write like 5 line, 10 line, not more than that. So in the same case I wrote few lines with that. All I need to do is have this WebKit speech recognition and we have some functions like on start when someone starts speaking when the microphone get the audio from somewhere on error or end on result and recognition dot start. So this function is really interesting on result. So if you have looked at the example what it did, it typed something and then it tried to rectify that to make more legible string out of it. So this function basically has something called as isFinal. So this function what it does is the parameter which it gets is called result and isFinal. So without isFinal it still tries to make sense out of it so it shows interim results and when isFinal is true it shows the final result. So how many are still on this like this makes sense through your speech recognition speech synthesis? Do you think of any usability in your app which you can provide with these things? How many on that? Okay. We are getting there. Media capture API. How many of you know that? Okay. I'll put it very simple. It captures the media of your laptop or system whatever it is. In our case let's have a quick example if it works. Media capture API. So don't judge me on my UI because I'm really bad at that. So I just want the work to be done. So it's a simple app which kind of takes my camera input and I'm really sorry for you guys because you have to see two of me. I know how I look. So I just created a very small app. What I do I just take a pic of me. It works. And these are the simple CSS filters which I can apply maybe like this or maybe just blur it and then go to the normal window. So once the right side is the canvas element and you know how much magic can be done with the canvas elements, right? So again for this there's a small piece of code which I made. So this basically gets the user media which is from my device and I can define I want video, audio or whatever I want. So in this case I just wanted video. I said video through and my stream object has the video of me and via that I can capture the element and put it on the canvas. Okay. Okay next one. How many of you know this device orientation? Okay how many of you play Temple Run? It's old I know. So what happens is like with this API we get a three dimension position of our device. In this case specifically mobile. So you know like this is why I feel this is interesting because this is another way to have a user input, right? Rather than just having like type something or speak something this is very getting very physical. Like for example Temple Run I really like that game because in that I was engaged rather than putting left, right swipe. Right. So this give me another dimension where I can use the JavaScript to give a better user experience to my user. So I'll give another try. I will try to connect my phone to my laptop and see if that works again. Is it working? Okay it works. So no thanks please. Let's go for device orientation. Okay. So this is my masterpiece of UI so please don't judge me on that. So this give this ball gives me exact position where my mobile is in the 3D dimension. And accordingly I can take the user input or whatever I want to do. Please don't judge. Okay. Moving back to our slide. All I need to do is to listen to this even device orientation and it gives me three dimensions. X, Y, Z. Z is, can you read that or if I'll read that for you. So Z gives the rotation around Z axis obviously. X give you like left to right how my mobile is moving and Y gives the front and back. Okay. So let's move to the next one. Web share API. How many of you know this? How many of you dated like in your app, in your like let's say any website. If you want to share anything your data you have to write the URL and give a copy feature so that you can just copy it to the clipboard and user has to paste in whatever social media. How many of you have faced this problem? Right. So in modern browsers this can be solved like this. Oh, I'm using that. Did it work? Oh, come on. Sorry for that. Okay. So let's type something like hey share it for them. I'm out of time. Okay. I heard the alarm so I thought. Okay. So all I need to do is share and it opens my native it opens my native browser native browser and please don't look at my contacts. I should have turned it off. And I can pass the text to my gym really everything right now. Okay. Cool. So I did this just from my web app. A native share right to my Gmail. So I love this API for a single reason. This is one of the simplest API like pretty straightforward. If you look at the code of this navigated or share the title you want to share the text you want to share the URL you want to share that's it including this will create that native search for you. How many of you want to implement this in your app? Perfect. We are going there. Cool. Okay. How many of you know this API? Amazing. Amazing. So till now for every API I have a demo and I have a demo for this too but the breakout chances of this is 95% so please don't judge me on this API because you know how this works the connection in the browser in the real time and in live talk. Okay. So I'm still here. How many of you want to try this with me? Not so interesting. Trust me. I'm not that bad. Okay. So here what I have is a Bluetooth bulb. Okay. What I will do is try to connect this with my browser. Okay. So I will just turn it on. Okay. Hopefully it is on. Let's check for this. Let's check. This is kind of bad situation. Really? Okay. Hmm. So the better idea is I will do it here and then publish it there maybe. Can I share it like this? Okay. So that you can see actually so what I'm trying to do here is connect this and this detects a Bluetooth bulb around. I just connected. Okay. This turns blue. So that's my indication that it is connected. So Okay. Now it's tricky how to hold both of things. Hmm. Okay. I will do it more. Let's quit this. Color choice. Is this purple? Yes, it is. Okay. Let's do like this. These are individual APIs and they are not powerful. No doubt. But the real power of JavaScript is in clubbing the APIs. Right? So what I have done is um I wrote some JavaScript to upload a file and detect the color of it and turn it in that color. Make sense? Since my demos are working I'm getting a bit more ambitious and and if... If it fails in further, please don't judge me. Judge me on the previous contents, okay? Okay. Let's try this. Remember this API? Okay. So I'll again turn it on and let's... I'll just put it here so that everyone can see it. It's interesting. I'll just keep it. It's red. So that's what I want to convey to you people, right? I can give you the knowledge of APIs. These APIs exist. These APIs work like this. But this combination is to us on our JavaScript developing things, right? Like these are the dimensions which you can use. You can combine the APIs and do amazing stuff. Okay. So five minutes are left. It's for with question answers or without? With question answers. So okay. I had some more demos but I think we are not permitted with time. So for that all I have to do is first find the device and here what I do is just give the device name or the service which I want to use so that I will narrow down if you see in my Bluetooth list, not all elements not all the Bluetooth devices were discovered. For example, lots of mobile will be having Bluetooth. My laptop will be having Bluetooth. Only the one which I wanted. So I can bound it which kind of devices I want to look. Okay. Then there's something called as GAT. I'm not sure if that time is enough for that probably. I will be outside to explain more on this. So I want to make understand two things. One is service, one is characteristics. So service is basically what kind of service I'm giving. Like for example, bulb is light service or battery service is like for example this example was from what's that like heart rate monitor a Bluetooth heart rate monitor. So I can get the battery service of that and what characteristic I want is the battery level. So this will give me the battery level of that monitor and I can listen to that even something called as characteristic value changed. So whenever that battery level change, it will notify the server. Okay. Cool. Here we have some success stories from PWAs. There are some name, some may you may know, some may you not. But I'm sure this I can everyone knows. Everyone in the room knows right. How many of you use Twitter PWA by any chance? If not try it once. Okay. What is the future of PWA? It has been around for long. Right. But still very small subset of it is really popular. Any guesses? Play store? It's on the way. Exactly. More APIs, better browser support because what I've shown is like may or may not work in every browser. Right. This is a caveat. So with better browser support with more APIs and the first thing Web Assembly. How many of you know that? How many of you are excited about Web Assembly? The day we can we put Web Assembly code with the PWA things will change drastically. Here are some references which I use and with that I'll show you. Thank you. Okay. So we'll have time for a couple of questions. I can just hold it, right? It's fine. I can hold it. Yeah, sure. So who had a question? Hi. Thank you for presentation. I have some more questions. So do you think it's production really because of we know that only Chrome support all the way I can make sure that I use Chrome but my client can use it. So implementing any advanced feature how I would do that I I create two versions of it. Like I have like for example share API I have both options. I will detect if there is navigator.share I will show just the share button else I would go for the native like how we do the copy paste thing. So from the experience of using speech synthesis what I learned was that you can get offline when you've turned your phone off a native app will still do speech synthesis but the browser won't which is frustrating. So I also learned about an API called Wakelock which is super bleeding edge. True. That will be really helpful but the caveat with that is like the browser when the home screen is locked just to it's kind of security feature you can say but that's a trade-off. But that will be really interesting to allow in some cases. Anyone else? One more question. What do you think about React Native Web because I heard that Twitter implemented WA with React Native Web or something right? Yep. I love that. So I believe in like idealistic I never say like PWA will take over everything but there are cases where we don't need a native app there are cases where we don't need PWA right? So you don't need to create a native app for everything lots of cases can be covered with this for example you are having an e-commerce site you want to create an app for that in no way you need a native app for that. So we have to live in a like homogeneous word you know. So it totally depends on you like what kind of cost you want to bear what kind of clients you have. So yeah. Last question. How was a shared API in the browser? Sorry? In the browser, shared API when you want to share something in the browser, in desktop how was how looks when you I'm not sure I get a question. I mean it will not make sense in desktop because these are extending the native behaviors which is concerned to mobile. Thank you very much. Thank you everyone.