 So, only if you're lucky enough to hear those music or songs. Not bad, Nicholas. So, this was a web in my taste, trying to connect to the internet. It was a beautiful dialogue mode in Dining West. And out of the seven is this. Probably your mom or dad picked up the car and said, like, you said you would be studying it. I was just sick even though you're all in Iran, right? That's how the web development was in the 90s. We still have the table, don't we? Probably he's picking. So, this was how web was developed in the 90s and people thought JavaScript was just a tiny tool for getting those alert messages or probably having your mark use on click events, right? Let's fast forward from there to say 2005-ish where everybody thought making native apps was the cool day. Let's go app only. So, you go to the site to buy something or order something. It says, go to App Store or go to iOS to install and then go to your App Store or Google Store or Play Store to install the app, right? So, everybody was like, let's go app only. I let you guys to be in the slide. That's what happened with going app only. I'm going to take the use case of Shukrat. People have been involved with those guys who built the app and back you up in there. So, how many of you think, apart from engineers here or the end users will probably read what all the things the app is really accessing? Right? You'll probably reuse to the next guest. Install, accept all, kind of. You'll love that. So, you can see how the app is looking for cameras, SMS location, contacts and stuff like that. There might be new status for that. But my question is how many of the users were reading? I also read somewhere that Uber is accessing your browsing history. Why do Uber read your browsing history? Probably they're doing some statistics on free Wi-Fi. I don't know. I really don't know the use case, but I just read that Uber is using your access to your browsing history from that app, right? So, this app on native, people can give a random guess on what the size of this app would be or the things that it's doing on Android and iOS. Yeah, it's around 10 to 11 on Android and 40-ish on iOS, right? So, the question is why? Why do you really need so much of space and why do you want to access all this information without even prompting the user? Probably once the user gets to know us while he's installing the app and later on the apps can go and access whatever they want, right? So, here's a simple gif of the same thing with HTML5 CSS and some React. It's all JS and HTML. It does almost everything that the native apps except for probably picking up the contacts and reading the OTP and things like that, which it should be in the future. So, what would be the size of this if you pick up a guess? Including the cache, all the cache assets and stuff. 500? 500? Kilobots? Almost, it's around 700 kb. So, to make it clear it's not a race between web and native. You have to draw a middle line which works raw, right? So, if your use case is such that it needs a native app or probably there's something you need to use the contacts or some ideas that is not supporting probably a native would be the way to go. But if it's web that's solving your problems I think it would be web which would help you all the way around, right? So, it's not a race between web and native. It's about whichever solves your business whichever makes the end users happy and probably one might replace the other they might be something third which we have not heard which would come in the race and kill both of them, right? So, it's about that. I just wanted to make that clear before I proceed. Here's a simple use case. I'm not going to read all of them but I'm probably going to give you an example. Say if your friend doesn't have an app and you want to share it and ask your friend to install the app. What is the process you call it? If your app or say if they go and install this app then you would probably log into his app store and then download the application, install it and then use it for some time and then finally it's in a space or memory probably uninstall it, right? So, at each level if you're targeting around 800 or if your target number is around 800 audiences, right? For your application for each level there's a decrease of approximately 20%. So, by the time the user uses it it's 260 to be in this case. So, if it's web it would just be an URL the user would open it and use it instantly and the target would reach almost 100%. If your friend opens the URL it has access to it. But in the context if you see web is becoming more appy in nature and app is becoming more web-like. What do you mean by that? If you remember the GIF which we saw that it looks and feels like native app, right? It acts like a native app. And in the context we have some instant loading apps if you have heard of that like where Google is experimenting on loading a native app instantly on your device, right? So, that is more of a web kind of feel, right? If you click on an URL and it loads instantly. So, instant loading apps would always be web apps, right? So, just in use cases show what would be the reduction and with Flipkart what really happened was this. So, their load time decreased to 70 seconds from 3.5 minutes which is really big. And 3x more of engagement and 40% higher re-engagement rate 3x more time spent on the site. And 3x less data as we saw like it's around 700 MB versus 10 to 40 MB. So, here we are here to talk about progressive web apps. So, what are progressive web apps? This is a very nice illustration by Adios Manikha I'm just taking out this image. So, anything that's installable has a splash screen, works offline and it's connectivity independent. It doesn't matter but only a few have heard about how about LiveFi. Oh, the internet through the frequency. It's like LIE. I'm talking about LIE5. Jake from Google Game of Stump got a LiveFi where... Oh, it's LiveFi. No, it's not through the LiveFi. No, I'm talking about the LiveFi. Is it used for like the networks? No. Yeah, LiveFi is like fake Wi-Fi as in you're connected but your phone shows that you're connected on full Wi-Fi speed but you're not really connected. So, it should be connectivity independent as in it shouldn't matter whether you're on 4G, 5G or low G at all. It should still work fine. So, if you see this, it's all like an app like free. So, the name progressive as in progressive enhancement of course but the app eventually progresses itself to a beautiful native looking and feel like an app. So, what I mean to say that if you give it to a third party or an end user you should not be able to differentiate between a native app versus a web app. So, we saw this era where all these JavaScript programmers who played a bit with Node became a full stack developer overnight. So, I think people slowly become a progressive developer or a full stack progressive developer. So, the whole idea is to kill this and be killing that with something special which we're going to see now. Long users have been left staring at a white screen for too long. They've been let down by the cruel seas of network connectivity. And for too long we've been powerless to help Node. We've been left but no longer. All the promise is there. As I said, you have the control of the network and the network is controlling you. So, you can think of Service Worker as a client-side proxy. So, if your brother is here and your operating system is here you could think that the Service Worker is sitting here and it's smart enough to inspect all the network requests that happen. And it's not like application cache where you have to... How many of you use application cache? Good. The lesser the number the better because it was really a douche bag and because it has a lot of problems you have to mention all of the files that needs to be cached in your application or manifest and it's not truly offline as in you didn't have control on the network. But with Service Worker you get the real part to control each and every request. You could cache it. You could serve from the cache. You could do a network first on a cache-first strategy. You could see whichever wins would serve things like that. It's the most based IPI and it's highly influenced by shared workers and web workers. Shared workers are like enhanced web workers where web workers had the problem that each two web workers couldn't communicate with each other. That's where the shared workers came into picture. And the design principle is of error rateability. What I mean by that is say you make a request for a new URL and you're offline. Then you won't hit the cache and serve it. If it's not there in cache, you'll probably try to make a network request. So if both of them fail, if cache also fails and the network also fails, you should not end up showing a 404 page or a lineup. That's the error rateability part of it. And Service Worker has no access to the DOM elements but it has access to a few of the things here. It's set time out and you could have access to the navigator object and you have access to the location object and it's read-only. What I mean by read-only is you can see on what it is you can't just say location dot h traffic or something and do the navigation. You can't do that. You can just see on what page they are on. And you can of course talk to the other service workers. I would suggest you to go ahead and look into importance as well. It's one of the ideas that helps you to import GGS to your service worker. This stuff is more of a free cursor. I'm not probably going to dive into the coding details of it. We have three minutes left and let's see where we go from here. The Service Worker life cycle kind of looks like this. You have an installing phase and then you have an active phase and it could also error out. After activation, it can be in the idle state as if there's no network, it was happening. You can wait for it. In the idle state, it can get terminated or if there's a new fetch happening it gets a callback on fetch also. It's all a different state in which the service worker might box. This was the strategy I was talking about. The page, the network and the cache. What happens and where the service worker sits. This is a picture called representation by shape. So the whole idea is to not to see your users waiting for what's happening. It should be instant and fast. If you want to host here, if you're building for a service worker and you want to host it, if you don't have your domain with HTTPS, if you have a domain, I hope you all have HTTPS to it. If not, please have HTTPS. Maybe Cloudflare or something like that. Or let's enter. I need not talk about why S is important in the HTTPS. If you want to experiment, you can use HTTPS. So how does it all go down? If you look at the Clipcard app or any other province in the map, I'll share the list with you. When you add it to your home screen, we saw that in the previous slides. You had an option to add to home screen. So once you add to home screen, you see an idea. So how does that work? It works by listening to what is Manifestation where we mentioned how the icons should look and what is the full name of the app, what is the splash paint color, things like that. So if you're lazy like me, you could use a module I wrote for Manifestation. You could just install Globi and use Manifestation. It will ask you three questions and generate the Manifestation for you. And I would also suggest you to have a look at what application shell is, how it works. It's about how progressively we lower it and this pattern called idle and this is a pattern called rail and this is a pattern called purple. Rail talks about what the response animation idle and load time should be and how you should handle them. And this is the purple pattern where you can look for push, render, how you do lazy load things and how you pre-cache things. So I would suggest you to have a look at purple. Yeah, now it's running out of time. I try to push for a minute or two. So I want to talk about this push notification but always had notification support, but not really push notification. Native web app developers would always talk about we have this privilege to notify the user even though the app is down we can do push notification and web can't do that and we can add the home screen we have icon standing there on the app and web doesn't have it. So here's a simple demo of push notification. You can just have a look at the enabled push notification there and in this example you just don't get purple so you get push notification there. One thing to notice here is whenever there's an action happening the user gets alert for the first time saying that this site needs to do a push notification. Are you okay with that? And if the user says allow setting and clear it out you can look at all the permissions that's been granted like microphone or camera access and things like that. And background sync is one such event that the service worker handles. In this example we are doing a demo on the chat application here. What basically background sync is even though your app is skilled when there's a scenario you're chatting with your friend and you go offline because you're having something. I'm on my way or something. But once you get the network and you close the app and once you get the network connectivity the message is being delivered to the other part of it. That's happening from the background sync even though the app is skilled the service worker's idling gets activated and the background sync event has been triggered and then you can do whatever you want. So you have total control on what and how you're requesting within the service worker. So if you want to have scaffold a simple progressive web app I've been working on this with couple of my friends for Generator PWA. It's a human generator. You can install this and just say yo PWA and it will generate scaffold out the basic progressive web app for you. And if you want to check if the website is a progressive web app or not you can just use this tool called East PWA which uses, internally uses a project called Lighthouse from open source from Google which kind of creates the site and sees all the parameters and checks whether it gives a score and based on this score this tool is predicting that whether even you are going to say that or not. And this is a slide I normally use for the questions. You can see me at hteamon.com or tweet me at Newman's and thank you and hold on to just as I promised I need to share you few links So PWA tips is one such website that we are not in public but I thought this is a good place to talk about it. Me and my friend are building this and if you go to CodeLabs PWA tips slash CodeLabs this CodeLabs is very much like in Google CodeLabs but it has all the steps whatever I talk about from the introduction steps we have a basic thing to start with and then we talk about what app shell is and what the protocol is and things like that and talk about service worker how do we instantiate the service worker what are all the life cycles and if you want to see all the lists of PWS you can just Google for awesome PWA and you land here into this repo where you have all the apps, different apps I think I need to show this app and there is articles and videos and slides and what not if you find something interesting or if you find something is missing please send it to me that is one of our progressive app which you can use to annoy your co-workers that is good by what and have fun. Thank you guys guys are building a progressive app and if you are facing any problems you can just tweet at me and there are a few folks of my Google developer experts on there and I will see if that will help you on resolving your issues Do you have time for questions? I was looking at Flipkart today and it seems like the live version is only on mobile so what is with that so is this not for desktop or is it only for mobile? Next stop they are rebuilding the entire stack they are there in Bangalore they said they have a new strategy for next stop I hope not like this only for mobile and that is a very good question the thing is it works on Android Chrome and Android Firefox or Android Opera Flipkart also works for Android Chrome iOS but normal progressive apps wouldn't work for Chrome iOS Any idea why is that? Because it doesn't run Chrome on iOS Exactly So the base is Chrome and the base is more of Safari So if you guys want to see if your iOS users how many? You guys are really missing the privilege of using progressive apps and if you would love it and if you want to use it tweet at Apple, tweet at Safari guys ask them for service orders So my question is will desktop have service workers will it be the same as or will there be two different sides? It should be the same so service worker is not just about offline and I want to say it again it's not just about offline but it's about performance also So if you have a desktop application and if you use your service worker for the second time when the user hits the site you could serve things from cash and it would be really fast Doesn't the browser do that by default? So if say I make an input request for a video alright and if I have cast it already in my service worker I make it all to that video again I could save that But that should be in your cash already No it won't be because it goes through my service worker and my service worker knows that I have cast this video So for every response you could inspect the response inspect the request URL and see whether it's there in your cash and serve it from there So that's where you could improve the performance It's not just about online experience So from a user experience perspective they need to go to an open browser and they will type in the URL No that's the only one right after which you can add to your home screen and you could use it So if I want to show a quick example here this is one app just like all the JavaScript features So it's on my home screen and I can use it It just behaves like a native app So how do we make the people like you just say go and download this app Is it possible to deliver that link to your home page? Yeah it's like I just go to and then it says add to home screen So I add to home screen and it gets added But people are working on having a place to have kind of thing for progressive web apps That is PWA Rocks Searching for PWA And there's also suggestions on having add to home screen functionality on Google search If the thing you're searching is a progressive web app you could just add to home screen Thank you