e should be good So we move the card as you touch and swipe But as you get across to this side, we have this marker like 0.35 now I picked that at random you could pick a different number 0.35 if you go past that point We basically say well this card is being dismissed. So we slide it off to the side The other thing that we're going to do is we're going to change the opacity So the further you go across the lower the opacity in both directions so that works there Okay, so we're going to put each card on its own layer and shift it side to side and fade it out Let's go back to reality What we're going to do here is we're going to step into the code So you can actually see bit by bit what we actually did Here's the cards and what we do first of all is we basically create an array from the cards that we've got in the document So we'd have to have some kind of code that adds or removes those cards later on But don't worry about that. We'll just get on with what we've got here The next thing to notice is that I've got these named functions on start on move on end and update Now the first three are our input events and I choose to do it this way What I do is I take a copy of it by calling dot bind on this And that takes it from the prototype into the actual instance But it does another thing for me as well It means that it's bound to the instance so that in those functions when I say this dot whatever Is actually applying to the instance and not to the target's event No wait the event's target. Oh one of those two So it also does something else for me It means that I can do add event listener and remove event listener and I can call it by name I can say like this dot on start for example You can see that down here in the add event listener So I do add event listener for touch start touch move touch end mouse down mouse move and mouse up all of them Yay And I can just basically say on start on move on end and so on and if I wanted to do the remove event listeners I could do that and that would just work out fine for me. So We've got our event listeners and we have a bunch of variables here That are just sort of housekeeping things that we need to keep a track on The other thing I do is I start a request animation frame where I busily sort of kind of do an update Now if you're doing this in production, I would suggest you don't do it quite like this I would start the request animation frame when the user starts interacting and then when the animation's finished I would stop doing the request animation frame loop But for the case of this just to keep things simple I just start it right at the start and I do kind of busy loop through So what do we actually do in the on start on move and on end event listeners? Wow saying event listeners over and over and over and over and over again. That's not confusing for me. No What are we doing those? Well first in the on start the main thing is this We basically take a marker for the start position of the interaction Where does the user put their finger down on the screen and then we get that with page x The other thing we do is we take a copy of that for the current position because as we move our finger We're going to update the current position So we know where we started and where we currently are and the difference is how far we want to transform the card The other things that we do in this is we set the dragging card to say true But as we discussed in theory corner, we set will change to transform now We can check that that actually works by going back to the code bringing up dev tools And in the rendering settings, we're going to show layer borders Anything that's got its own layer is going to go orange around its border. You ready? So when I click you can see that we immediately the card gets its own layer Which is really cool. That means that we can transform and move it around cheaply like we discussed over there In the theory corner. Here's what we've got in the on move It's fairly straightforward. All we do is we take the current position of the input and we basically said that's the current x Now inside the update What we can do is we can say if they're dragging the card the screen x Which is basically the position of the card on the screen is the current minus the start That's basically how far they've moved and we can apply the transform to account for that Now when the user stops interacting We actually have to make a decision if you remember over in theory corner We said if the user is past that 0.35 marker So it's a sort of a zero to one range one being the full distance of the card zero being not at all If they go past 0.35, which is what I've chosen But you could choose a different number what we want to say is They are dismissing the card and we do this by setting a target x Which we use later on in the update And here we do screen x plus equals the target minus the current screen x over four What this is going to do is it's going to ease the card to that final position, which will either be the Me again Hey, it's more I more people more drinks. It's kind of crazy. Uh, is everyone good with the break useful? Great. Cool. Did you speak to a lot of people? Yes, good. There's other people that know never spoke to anyone. It's fine I always have this thing like so if you ever see me walking around I have this like permanent grumpy face. I've been told that my face is like 100 grumpy and it looks looks like I'm annoyed all the time It turns out. I'm actually a really happy person. It's just my face doesn't express it So just like if you see me and you want to talk just come up talk to me talk to any of our team as well I'm more than happy to talk to you unless I really am grumpy and then I don't know what to do So I don't know what I'm talking about now. I'm waffling. This is not on my script So anyway, one of the things that we've been trying to talk about at least anyway through the like the two days is that We you know, we don't want these features to be kind of thought of in isolation Like you build an experience and it needs to rely on service worker It needs to rely on push and you have different ways of thinking about how you can actually build experiences which are useful engaging and kind of Useful engaging and usable by everyone everywhere Uh and one of the things is that we have a number of different browser vendors as well And I like to think that we have this idea of like a lumpy web where We have some features which like these massive holes in the ground when like features are just not implemented across different browsers And then you have features which are kind of implemented But you have kind of like compatibility issues where it's like little blumps and bumps that you have to deal with Um And the great thing is like we we've got people here to talk about that today. So Uh, I would like to introduce. Well, I don't know how to pronounce his name because I go to speak to people and say So I just want to check your name. How'd you pronounce your name? Yes? I said is it patrick Kettner, right? I said, yeah close enough. I was like, what do you mean close enough? Is it right? It's like, well It might be kezner or something. I was like, really? It's no. I'm just messing around We said you can't call me p. Diddy so, uh I don't know whether we can go with that. Can we announce p. Diddy? Uh interrupt pm for microsoft on the stage Oh, actually patrick kettner Thanks paul My name is patrick feel free to call me p. Diddy. Um, no one actually does But I'm here today to talk to you about keeping uh the progressive in progressive web apps Um, like paul said, my name is patrick kettner. If you google me, that's the photo you'll find Over there, uh, and despite what my shirt and my cake have actually work at microsoft Specifically I work on the edge uh team in the edge browser If you guys are uh up to date on your news, you might have seen a couple of days ago One of my co-workers jacob rossi released a wonderful blog post called the progress of web apps, which is an awesome pun High fives were all around when we thought of that. Um, and it's all about microsoft's plan for what progressive web apps can be On our platform and uh, maybe alternative install flows or stuff like that It's a great blog post. The edge team has done a lot of phenomenal work and we're continuing to uh Commit a lot of resources to the progressive web app story, but that's not really what i'm here today to talk to you about I'm here today to talk to you as a web developer. Um, I've been a web developer for a pretty long time Uh, when I started writing websites, they looked a lot less like medium and more like uh, that well That's not like that, but like That yeah, hey, uh, that's mosaic and um When I first started writing websites like about ninja turtles Um, it was just kind of really exciting that we had the ability to save a file And then someone around the world would like open a file and see it That was just my mind was blown that I could actually show someone my ninja turtles And they would be excited about it as much as I was not that anyone ever was this is the first time I've had an audience to show my favorite ninja turtle, but um Yeah, I was just I was hooked at a really young age basically and it's been such an exciting experience being able to be a part of the web community and kind of see it evolve to win like DHTML was introduced. Do you guys remember that? Whoo? Yeah Ppk, um, you know to the the wired redesign where we showed that standards were actually a really good thing And you can make some really awesome websites that didn't need uh Table layouts and um, you know css zen garden the responsive web article by ethan mark hot You know there's all these Big stages in web development these kind of seminal moments where things changed and they never ever really went back And so a while ago I was sitting at my home in seattle and I heard about this Kind of really new exciting way to make websites one that would use the latest web technology that was You know safe and secure and would use the same encryption that our banks and e-commerce used and it would look and behave Exactly the way that apps did and uh one of the most compelling features being that they were easy to release You could just change the code rather than go through this really complex update process Anybody ever developed on an android or ios app and you know how painful yeah, it's kind of painful to release anything and I'm preparing for this talk I was thinking about how far we have come You know in the last year, you know all the different amazing progressive web apps that have been created and have been shown And I was just really thrilled at how far we had come since steve jobs talked about all this in 2007 at WWDC when he introduced the original iphone And all of the web apps that came with it You might not remember that but he actually did and that there was a great Collection of web apps that worked well for the web nine years ago. We actually just passed the nine-year anniversary Of it. It was the middle of june 2007 and uh eight years after that about a year ago from now Alex Russell had dinner with his wife francis and they came up with the concept that we now today call progressive web apps He penned it the next night and it was you know, what brings us here today And progressive web apps are finally that fulfillment that we have been promised for nearly 10 years on the web the idea That you can have this rich native experience that leverages all of the user's device And we have gotten some really really beautiful wonderful examples of what that can really be like stuff like the flipkart api The flipkart redesign Flipkart if you're unaware completely shut down their mobile website and then a month or two before alex's article And brought it back with an amazing reference implementation of what progressive web apps can be The washington post had their recent progressive web app demo that is incredibly fluid incredibly slick They have 80 millisecond load times on new articles. It's it's wonderful One of probably the best reference implementations airhorner.com Of a progressive web app it works across I've yet to come into a device that it doesn't work wonderfully on Except if you don't support web audio, I guess but um that you know, I was sitting there and thinking about how How it was amazing that we could finally do all these things on the web And something as excited as I was something wasn't quite sitting with me right And it wasn't the sites themselves the teams that made them are wonderful They do incredible work But it was more of the way that as a community we're sort of focusing on progressive web apps It wasn't the sites it was it was this It was that we're sort of thinking of them as standalone applications that are created wholesale for the mobile web and What's been presented isn't really the mobile web. I mean this is a better example of the web And I mean that's the again airhorner is a phenomenal app. Um, and you know, it's Even then like air horner, sorry not air horner, uh progressive web apps in general and how we've thought of them including airhorner Uh, isn't just like this. Uh, there's more than just this I'm sure you guys are all aware that last year google announced that mobile search had taken over desktop search For the first time in history. It's been well over a year now and that's true mobile is the future in india china africa any emerging markets Mobile is where people are going first But if you think about what that is saying that it's just now Surpassing desktop that means that there is still a huge non trivial part of the web that is still the desktop People use computers Even though we spend a lot of our time on mobile there is still a lot of people my parents included Never hardly touch their smartphones. They touch their desktops at work And there's a lot of content and a lot of ways that we can introduce Progressive web apps and the ideas behind them the apis behind them To produce stuff other than just new wonderful mobile experiences But wonderful web experiences because progressive web apps are not just a radical new way to create sites They are so they are also a radical new way to update websites You as booking.com showed you can take pieces of the what make up progressive web apps the new apis And update your existing app have something that is a really compelling experience and i'd like to go over a couple of different ways that i've Myself and my team have come up with them recently First of all the app manifest If you i'm we've mentioned it a number of times So i assume everyone was at least paying attention at some point when we talked about the web app manifest It is basically just a big Text corpus. It's a jason file that has a whole lot of metadata about your website Stuff like the language the direction of the text A description for like search engines an array of different icons that might be used Where you want to start the orientation a whole lot of stuff like seen color just a lot of different metadata about your website You can also include related applications Ways if you also for those few that raised their hands because they have helped work on an ios device You can actually support a user being able to automatically jump into a native application if that's what your company wants You also have the ability to say prefer related applications. Hopefully that's always false And the great thing about The web app manifest is to add it to your web app today or your website even all you have to do is this It's a link rel tag It's a simple line of html You just plop it into your website and the great thing about a link rel tag is that there's no feature detection needed You just add it to any website today and it'll parse in mosaic 2 It'll work everywhere if your website doesn't support manifest. It's fine. It ignores it It's gets right over it, but you can add it and enhance everyone's experience right away Um something that kind of bothered me when I started looking at the manifest first when I compared it to the websites I've worked at is that most of that content That's in the manifest file is also in my html already It's just a little bit different and so I created a tool to try and help People transition into using the manifest as soon as possible called manifestation. It's available on npm And it does a lot basically what it does is it goes you give it a url And it parses the html of that page and generates the most comprehensive Manifest file possible Uh an example of one of the things we do is for the language detection It will go ahead and load up some node modules. It will load the page in cheerio, which is like a server-side jQuery Uh it will check for the lang attribute on the html if that doesn't exist We'll check for the xml language Attribute if that doesn't exist we'll check for the dublin core language attribute anybody ever heard of that No one has but it exists and so we parse it. Yeah, you have hooray librarians. Yeah whoo um and uh so if none of those exists, which is unfortunately a common experience We actually fall back to google's uh compact language detection where we'll load up the entire Text of your page throw it through the tool that is powers. Uh google translates Language detection and we'll try and get the result out of that it detects 140 Languages roughly or 160 languages and it's pretty reliable. Unless you're using a more obscure language it almost certainly Results in something it's only ever broken when i've tried to break it Not on live websites and finally we grab all that stuff and return it More complex check is like the icons check I try and get every icon anyone has ever referenced on their website ever You'll notice that the amount of modules that I use barely fits onto a slide and rather than go into the logic I'll just go over what it covers the fava favicon. I've never said that out loud Um the that ico file it'll download it parse it check if it's multiple uh ico files inside of that one because that can be You know multiple icons within the one file It'll also download it automatically if you don't have one declared on the page from the server's root It obviously gets the apple touch icons all the different sizes available for that It even downloads the ms application tile image, which i'm sure everyone has on their website And or even the config inside of that where we where you can declare a tile image It checks every possible place you could have a tile and then some Now to make this even easier. I actually created a website web manifest However, you would pronounce that And if you go to it you'll get this ugly website that I made in an hour That is all you do is you insert your url And then you'll get a pop-up dialogue that'll give you the web manifest file You can add it to your site right now in as much time as it takes you to deploy a single line of html You should do that today and your journey to creating a progressive web app has already begun. Correct Web manifest also has a couple of cool short urls if you're interested in the spec. It is pretty neat Slash validator will give you google's webcash manifest validation tool if you want to modify what we give you There's also slash spec, which will give you a hotlink to the specification Now moving on something called service workers I'm not sure if anyone's ever heard of this because google doesn't talk about it that much But it is actually a really cool part of progressive web apps Now like I mentioned, I am a web developer at heart. I work for a browser But most of what I do is from a web development perspective And an example of that is I'm actually one of the lead maintainers for modernizer Modernizer.com had a redesign about a year ago now And the biggest change between modernizer 2 and 3 was us going completely modular Every single detect became its own module. We had roughly 262 I think we're up to almost 270 now individual detects along with a couple of dozen options modules The idea basically is every single time you check off anything on that page Although you get a dependency, but that dependency might have subdependencies and subdependency it goes on and on and on And the problem is that a single module that you might be adding might be Might be triggering dozens of requests on the network and that really sucks If you've ever traveled or used hotel wifi by chance you can know that if a website is doing a whole lot of network activity It's going to be a really really crap experience And so we used a service worker to try and speed that up and our service worker implementation was super simple because we didn't need Complex content generation or anything like that. We just needed a really simple cache And so we have two different sections our prefetch cache where we uh, you know List a whole lot of files that we want to download in an array that prefetch checks in And then we open up the cache when we load the page and we add all those files to our cache And then they're available instantaneously These are files that every single user is going to have stuff like our icon our css stuff that's shared across browser Sorry across users It's available everywhere And the second part is again really simple on our on fetch We check to see if anything that that's being requested is already cached something that was in our pre cache And if it's not we trigger off a new request We check to see if it is in our cache and if it's not we fire off a new request and grab it from and then Cache that response later on. This is that trust the cache then Hit the network after it works really well for us because We only ever need to update files when we do a release And so we can just update the hash file on our service worker the next time we have a new file to change We can just everything in the cache will be invalidated So it it's a really simple service worker and something that works for a lot of websites that I help The only problem with service worker if you can call it that currently is its support Obviously chrome and firefox Have it shipping. This is actually a couple of months old. I apologize But the and it's coming to edge which is awesome and hopefully to all other browsers that people use on apple products and it will Be really exciting when it has there, but it's not there now Even though we're lucky to have most of our content or most of our content being served to chrome and firefox as a developer focused website It's only about 75 percent of our traffic that support service workers Which is great. It's average better than the average about 50 percent But it's not everybody and that isn't acceptable.   I'm not saying it's not if you've never watched apcache douche bag from Uh The jasconf 2013 it is a wonderful talk and it will educate you as to why everyone hates apcache If you've only ever been told that apcache is terrible. It's great service worker is much much much much much better than apcache And apcache is going away on top of that. It's already deprecated in the html 5.1 specification But it covers our use cases and on top of that it's available Basically everywhere every single browser that you'll probably ever counter will do that It's like 90 percent. There's almost nothing on can I use that's 90 percent It's out there and so if you keep in mind the problems with apcache and you're aware of all the problems you might hit I think it's okay to use it. It's a douche bag But it can be like that douchey friend you have that you have to have in high school until you can get rid of them And so in order to use it It's a really simple check Obviously we want to use service worker if it's available And so we'll do a simple check for service worker and navigator if it's there we register it If that's not there we check to see if application cache exists in window if that does we add the apcache If you've never used apcache, which seems pretty common If in order to add it to the page it's an eight the attribute on the html element It's that manifest attribute you just pass it a url to your apcache manifest file And the problem with adding it via javascript is that it's a little bit complicated that manifest attribute has to be there At page load time you can't dynamically add that attribute and have the apcache take over So in order to add it to the page we had to do a little trickery We create an iframe That is hidden with a the source is a file That's just a really lightweight html page that just has that manifest and then we append it to the page So that file just looks like this. That's the entirety of the file and we um We register it, you know in that iframe container And then it's available on the page instantaneously. It works really really great in fact. Oh, sorry. Yeah, actually This is what a manifest file looks like But basically that prefetch section that we showed in our service worker cache We're able to shove into the section for apcache manifest That's stuff that we know for a fact every single user is going to want and going to need in order to use our website And it's able to function now. We now have over 97 or 98 of our website works completely offline And it took our website from 20.7 seconds on non-service workers stuff when I from hotel wi-fi down to 190 milliseconds on reload Apcache is a douche bag, but it can be useful if you know what you're doing Just pay attention know the problems watch that video And check it out. It can be useful for the short time until service workers are available everywhere The next thing I'd like to talk about is web workers now web workers Are not a part of progressive web apps in the traditional sense But they do enable one of the most important parts and that is keeping your applications fast Um now web workers have been around for a really really long time. They were added to webkit back in 2008 Um, which is insane that it's been almost that long It was version two of chrome when it looked like that I mean it's it's it's been around for a really really long time and for some reason every time I talk about it I generally get this reaction from people. This is like, yeah, I've heard of web workers But I have no idea what they do or why like anything about it and um So web workers if you're unaware solve a really basic problem On the web and that is that it's single threaded by default If you've ever tried to create like a scroll handler or tried to create one of those really super cool Like a parallax websites and then all of a sudden everything gets terrible and slow and janky like almost all of them You'll know what i'm talking about. It's because everything fights for cpu time You can only be doing one operation at a time And so if you ever try and do a lot of calculations at once you get a really really janky experience And it ends up being a really terrible user experience. So what web workers allow us to do Is offload tasks to a background thread Where I basically able to take stuff that would be too expensive to run and still have 60 frames per second And be able to generate A much faster experience by having it go in the background you lose access to the dom You lose access to most web apis But just about anything that's pure javascript and calculation that has to run can be done without a problem So as a result super expensive functions become really really really cheap You can able to do some crazy stuff that you would never imagine Possible on the web without completely getting like this spinning beach ball of death or a blue screen of death Or any other kind of death that you might imagine Um and it's completely fine. You get 60 frames a second. It works great even better web workers Like I said 2008 it's green baby like it works everywhere just about anywhere where you can run javascript So basically not opera mini guaranteed You can run a web worker and they work phenomenally well One of my co-workers Nolan Lawson created pokedex.org It's a great example of a progressive web app if you haven't checked it out before I highly recommend it And one of the really cool things he did here is use virtual dom of virtual dom is sort of a Smaller version of react. It's the idea of being able to take A virtualized version of the dom and then when there's changes You're able to do a diff of those changes to get the smallest number of javascript actions that have to happen to make that change It's what the concept is what makes react super fast. It's coming to It's in embers glimmer engine It's coming to angular two you have the ability to use it in angular two rather The really interesting thing that Nolan did was that he used virtual dom inside of a web worker He used it to do all that expensive Dom diffing he did that inside of the web worker Then responded over the post message api back to the website as far as what changes need to be made It would make the dom changes and then wait to send back what changes need to be calculated again as a result He was able to run at 60 frames per second on a galaxy nexus. This is from 2011 a phone It's nearly five years old and he is getting just phenomenal experience on it. It's awesome Just about anything so you might be thinking you might be not do a whole lot of calculations on your website But you'd be surprised if you're not getting 60 frames per second Debug your javascript and your dev tools find out what bottlenecks are and see if you can do some off Some off thread calculations. It makes almost every website. I've used it on much much faster And it's criminally underused on the web. You can find out more about uh, Nolan's website on his its open source and it's a great implementation. It's available uh on github It's Nolan Lawson pokedex.org The last thing I wanted to cover because i'm running short on time is index db Index db is another api like web workers that have been around Seemingly forever. Mozilla was one of the first implementers back in 2010 and that's uh Yeah, I think it was like chrome version five version four of fire fox that's been around for a really long time And if you've never used index db, there's probably a good reason for it It's that you have other things that you can possibly use that make a lot more sense Local storage. I'm sure most of us have checked out before it's local storage that's that item and get item and it just works It's synchronous. It's simple. Your clothes stays clean. This is a similar thing in index db It's hurts my head really hard to read that. There are cursors. There are transactions It's if you come from a database background if you're dba Then you might understand this and you are way smarter than me And I don't know maybe I can hire you to make me something work better But it is very confusing to me and it's really difficult And on top of that index So when you're presented with the concept of using index db for something a lot of people are like well I can just use local storage or Appcache or document.cookie or any of the other possible web storage things that are available on the web There's 15 16 17 different ways where you can try and store content and index db becomes One of the more complicated ones and therefore one of the less used ones and that's a shame because there are uh wrappers around index uh wrappers around index db like Dexy.js which give you this really super clean amazingly beautiful promise based api and you have the full access you have full access to index db all of the Content that you can store in there you can do through this beautiful promise based api It's like the jQuery of index db. It's beautiful. Um, if you like local storage style implementations There's local forage from mozilla And it gives you literally rather just change the st in storage to an f and local a you have local forage Set item local forage dot git item. It's packed by index db and it works great Nolan the guy who created that pokedex implementation created a thing called pouch db And it's a full couch db implementation that is Works off of index db and the great thing about all these things is that they can fall back to web sequel Something that is supported in browsers even older Then firefox 4 is basically just about any brow they'll fall back to web sequel They'll fall back to local stores. They'll fall back to in memory So all of these libraries have phenomenal browser support because they are able to run And because they take into account that we're not necessarily planning on these You know cutting edge browsers in the on the mobile space they want to run as many places as possible And if you choose one of these and you get and you start to plan around using index db You get storage that is way higher than most of us even realize you can store gigabytes of data in index db On the desktop with the with the g not an m not anything else gigabytes of data I've created demos of podcast apps where i'm able to offline sync dozens and dozens of 120 200 megabyte episodes Completely offline and have it work fine and it works great now that storage isn't guaranteed to stay around constantly It's not it can be deleted by the browser if the user runs low on space There is that persistent storage api that ben kelly mentioned that Is coming from google and hopefully all other browsers in the near future But for stuff that can just help to be worked offline that just is better if it's offline media content Even just static caching of your assets on browsers that don't support the full cache api There's tons of stuff index db can be used for today and it works great On top of that if you've ever if you've never checked out web storage There's this awesome thing called the browser storage abuser that's made by one of the google guys And it's available online and you're able to see just how much storage you can you can Sheldon to the browser basically and all the different types. This is Going that it has file system api the file api index db web sequel local storage session stores all these types of stuff I'm requesting five gigabytes right here without a problem I've gone up to 200 gigabytes on my laptop and it's never once complained it works great The quota api can explain more about that. It's available at this url And yeah, I just I can't say enough about why aren't you guys checking out index db You can store so much phenomenal content You can make your website scream if you store your assets offline and you don't have to wait for the cache api You don't have to wait for the new apis and all browsers to be there This is stuff that you can do on a slightly crappier api than what's available But have it available to all your users today, you know I guess the point of what i'm trying to get across is don't wait for a rearchitecture To start using these features, you know Check out what fallbacks exist Check out what you can do to create a similar experience something that you want to be in the future today Because most of the time those things already exist, you know Don't be afraid to use the new things in the web if it's only if it's a feature that's only supported in one browser Don't wait for it to be everywhere, you know Do feature detections fall back to things that if they're if you're able to And have a great experience today make awesome websites and make your users You know love the web as much as we do you can do phenomenal things with the web if you start pushing the limits I would love to see more and more experiments that bring app like experiences To stuff that is you know years and years old steve job said we could do it So let's show them that we were right about the web Now like I said, my name is patrick ketner. That's my handle pretty much everywhere on the web That's also my email at microsoft I'd love to hear about anything other than internet explorer feel free to contact me It's a great great time The edge team is awesome. I'd love to hear you guys's feedback or questions or complaints about anything Thank you very much and i'll be in the codelab later if you guys want to talk about progressive enhancement Thanks for having me Cool. Hey, so does does pdiddy at microsoft.com also redirect to you? Yeah, I actually requested that today. Okay, so yeah, it's gonna work now. So you can try that one Maybe don't maybe it's wrong No, it's cool. I actually just want to ask a really quick question So who who stores data on the client and a web in a website or a web app? Can you raise your hands? Cool. Can you keep it raised as local storage? Okay index db Wow, okay web sequel So i've just gone through most of them. What what what does everyone else use to store data on the client? I think it's gone through cookies Wow, that's a good one Cool. Uh, we're going to be really quick now. Um I've been taking notes about kind of what I how I should try and kind of introduce the next speaker And I sometimes I mess my job up And I've got test. It's the worst thing ever. So I apologize in advance But we've been working with opera for quite a long time now And we've got quite a nice relationship with opera and you know, we've got a nice story for how to build on the web progressively, you know, even ignoring progressive web apps But I'd like to introduce Andres bovens, uh, the product manager for opera mobile On stage as well and he's going to talk about progressive web apps and opera's perspective. Cool. Thank you Hi everyone, um, it's great to be here. Thank you so much. It's a great turnout and it's a fantastic venue And thanks so much to google For inviting me to speak here So today, uh, I'll be talking a little bit about opera's perspective on progressive web apps My name is andres bovens and i'm a product manager of opera for android And i'm also heading up opera's developer relations team And so last year has been a really fantastic year for us Because we had the pleasure to implement with every release Adding more features to our support for progressive web apps So we've added support for add to home screen And the prompt you get at the bottom to sort of suggest that you add a site to the home screen if it qualifies For as being a progressive web app and if the user positively engages with it We've also of course have support for service workers and offering a great offline experience We've just last week released a support for push notifications So this is brand new and there is also some internal labs builds already With that support background sync. They haven't been out yet. We still need to test a little bit more But I expect this to land very soon In opera for android as well Um, I want to in this talk. I I don't want to go again through the various apis and the things you can do So it will not be a very Code heavy talk, but I want to look more at some ux patterns I want to look at at some questions you may have around the emerging markets opera mini And then also some of the challenges we face With progressive web apps and potential solutions So let's get started First of all, I want to look a little bit at some of the the ux patterns that we've seen coming up With relation to home screen At the home screen So first of all the first pattern I want to cover is channeling users to install banners And so if you you probably know this if a user engages frequently with a site that is a progressive web app The browser shows an add to home screen install banner And so pops up from the bottom looks a little bit different depending on the browser you're on But the basic mechanism is the same. It suggests. Hey, do you want to add the site? to your home screen The user can then pick no thanks or to add it and maybe it's shown again at the later point in time However, it's also possible to prevent this banner from just popping up all by itself and do something else with it You can tie it to an alternative trigger like for instance an install button and here on airhorner.com You can see that When the page is loaded initially there's this install button that pops up at the bottom when you press it The native install banner of the the browser's install banner comes up and the user can choose to install So to to install the application or to add it to the home screen And flipkart does something similar. It's quite interesting. If you haven't tried it yet, definitely check it out What happens is when you load the flipkart website A couple of times you will feel that it vibrates a little bit and then there's this little You know cross at the bottom that sort of wiggles a bit and it suggests Okay Do you want to install this web app to your phone? And if you click it only then the install banner shows up at the bottom um, and this is quite interesting because it allows flipkart to Only channel users to this install banner Who are really engaged so only engaged users get to see this because they first have to to click this little button And so that you know flipkart is certain like yes, they're going to to press add to home screen And and and sort of they keep more control over the user flow and user funnel So this is quite interesting something to consider if you're building a progressive web app Another pattern I want to look at is that what I find quite exciting is that now the more and more progressive web apps are popping up all over the place We see that progressive web apps are using Uh display modes other than sort of the the standalone display mode And so I want to look here at two simple examples I recently was browsing the guardian and suddenly Uh an install banner popped up and I said hey, do you want to add this side to your home screen? So I did when I launched it. I actually noticed that so they're using display browser Which pops the side back up into the browser So it doesn't go uh standalone or full screen or something like that And so you can still use the urls and and sort of use that as a navigation aid Or maybe for sharing and things like that, which is of course, is quite important for a newspaper if it wants to build Social media engagement around its content. So that was kind of interesting to see This is another app. It's called flick play flick play You can find on flick play app dot i o It's made by chinese developers And I've been talking with them and so they were really they're really excited about the potential of progressive web apps And they're using this play full screen an orientation portrait So they lock this game in portrait mode because it would make sense to sort of Reorient it if you go in horizontal in uh landscape mode And so you can see they can offer a really immersive experience. It's also really smooth So you you it's it's barely noticeable or not at all noticeable that you're using this game inside a web browser It feels like a totally no a native app So do check it out And then let's talk about offline some of the the UX patterns we see there One of the things you have to wonder about is okay. Do I want to save specific content units or do something else? For instance a sound slice Offers a save offline option for specific content units in this case It's not articles, but it's it's lessons with musical notation And so what happens is if you click the save offline button there at the bottom The the musical notation and the audio is downloaded And then afterwards it says okay offline mode is enabled and you can play it back even if you're offline so The interesting thing with sound slices if you access it while being offline It it just shows you a special uh UI that lists all the lessons you've downloaded And so you can you don't have to hunt around and try to figure out in the UI of the site Okay, what did I download and what didn't I download and where can I find it? But it just gives you a nice list and it you can interact with it and play play back So it's a quite nice experience But here so user interaction is required user says I want to keep this this and that and later on you can get back to it Another type of approach is to try to save almost all site content. This might also be right for your particular use case For instance, if we look at the washington post, uh, this is you know, the online experience normally very very beautiful layout Release and snappy experience if you go offline and you refresh this is what it looks like It's exactly the same. The only thing that's changed is a little airplane icon in the top right corner Um when you click on articles in offline mode. Um, so let's look at that first article there Um, you see that you can read the the full text of the articles the text is a bit more at the bottom But believe me it's there, um, but images they're not prefetched So the text is prefetched and it's all there in the background But the images are not there and I found this kind of funny actually particularly for this image Which it's actually not offline. That's why it's not shown the users are fine The image is online and that's why nothing's shown but I found this kind of a funny a funny quirk anyways um And so when you refresh the page you actually This is what the article looks like when we reconnect and refresh and then when you go back offline the article stays So all the content you've interacted with Actually stays including images this time. So this is a really nice and smooth experience And it it you know, it just balances Rightly the the you know text is is cheap to download. So it's nice to have that cash This is probably what the user is interested interested in Whereas images are more expensive to download and you only want to do that when there's specific user intent to Sort of load that image and get the full content of the article Um the google i o uh progressive web app also does something similar What it does is it downloads the full site in the background which is not so heavy There's a few images a bit of text schedule and so on Um, and it doesn't do this with videos because that would be a bit too much Users would incur significant bandwidth costs otherwise Um, and it also informs the user. Hey, the site will work offline So it says caching complete future visits will work offline Also quite nice. So this is a similar approach on a different site And there's many other sites. So it's it's quite it's been quite interesting actually to see How all of this stuff is surfaced and explored by various sites Then another pattern, um, I wanted to look at real briefly is how sites indicate that the user is offline Um, and let's go back to our google i o site. So when you go into offline mode It just turned on airplane mode in this case Um, there's a banner at the bottom pointing out that you're offline, but that editing will work So this is quite nice. It tells me. Hey, you know, you're in you're offline, but you can still use the site and interact with it And if you look at flipkart it also all the way at the bottom It says, uh, hey, you're offline currently you may still browse Previously viewed items though and what you also see is that they've grayed out the whole content And there's another site geodot tv that also grays out Its images when it's offline. Um, personally, I'm not a big fan of this But it might you know, it might work as sort of a an indication of like, hey, this content is stale. It's not so fresh Um using this filter on top, but it might also be uh, ux pattern that we see More commonly popping up and maybe that users might like or you know make sense to them Especially as these offline experiences are still very new Okay, let's have a look at push Um, we implemented push recently and this is a funny story I I was looking around for sites that support push notifications in opera and to my surprise actually a number of them do browser sniffing So stuff wasn't working. We had implemented the api But we had to sort of work with with a number of sites to get things to work But anyways new scientist was a happy exception. It worked out of the box And what I so this was the very first push notification I got I was like, yay a push notification and then unfortunately it was to say that you know, the great barrier reef rat is the first mammal wiped out by Global warming. So that was kind of sad at the same time. So here's a picture of this this rodent Too bad, but yes So that was my first received push notification on opera for android So what I want to look at is how we can use notifications for re-engagement Of users I don't have much of a demo here or an example But I like to think I like you to think a little bit about the idea that push notifications allow web apps Basically to list visitors for re-engagement in a really low friction manner without requiring them to download an app Or sign up To receive emails with the latest news or things like that is just enough if the user goes to the site Flix's switch and accepts a notification prompt Notification permission prompt and from then on you can reach this user The user can forget about the site can remove it completely And and you know still you will be able to reach this user at some point in the future This is for instance very interesting for let's say a concert ticket site or something like that Where you don't you know if you a lot of sites ask you to convert by using Their app to come to download their app or by signing up for for future news But push notifications make this unnecessary basically and you can just with the flip of a switch You can get users to sign up and later on you can reach them Unless they clear permissions of course So celio, which is a site that a service that created a progressive web app They also pointed this out and they said in their their document. I really recommend looking at it It's a really great presentation about progressive web apps They say that web push is a killer communication channel. It's a more reliable than native app push And we can't send push messages even when the user doesn't have the app So that is that was for them eye opening and it it you know allows you to build an experience Get users on board in a really low friction way and later on reach them in a much more pervasive way actually Maybe longer term way. Let's say then you can with that in the native app or other, you know, uh sign up methods Um, another pattern. I want to look at is how sites contextualize why They need permission to send notification Send notifications. So this is something you as a web developer should look at. Okay. How do I how do I want to do this? And so on weather.com It does also push notifications that work out of the box here And so you you have to go to a specific section in the settings And and you have to go there to to uh configure your notifications And they really explain very well why you'd want to click allow on the push notification permission prompt that comes up next So they say, okay, you can activate your alerts right here and so on and so on the user has to flick a switch And then you know this this comes up and uh, then you can choose and save your settings So they really try to Give a good story as to why the user should accept This permission request And I find this a quite interesting experience. So this is one way to approach it Another way to approach it is to just ask up front almost on first load. Hey, give us permission And you may say that no, this is terrible design, but in some cases it might also work So for instance, if you look at facebook, um, you could argue that well once the user signs in to facebook This maybe is enough in sufficient intent to indicate like, yeah I want to engage with the facebook side on the mobile browser and of course I want to get push notifications on Say a native app you would expect as much right? So maybe on the web, uh, it's it's fine to just ask it up front Before they start even using using the site just to get as many people, uh on board as possible There is also, uh, for instance new scientists also asks this on first load of the page This is there. It's maybe a little bit too fast because you haven't even read anything There's no intent yet. You know, do you want to sign in or something like that or come back and immediately push notification? request is asked So there's different schools of thought Some of them say, okay It's better to ask these kind of difficult questions as early on In the process as possible because if you sort of leave them for later very few people will find them Few people go to the settings and try to enable it there. So you have to think very well where you Where you want to ask this? So I think best practices will emerge over time I don't know if there is a golden bullet probably a silver bullet it probably, uh Will evolve and it depends very much on the experience you're building So to summarize these are the things you should consider some of the things we we looked at Channel add to home screen prompts or not? Is the display mode and orientation of your site optimal? What type of content do we want to save offline? Do we want to save this content after user action or automatically in the background? How do we indicate that the user is offline? And do we want to ask them to sign up or are push notifications better? And when do we want to ask users to accept notifications so that we can interact further with them? These are sort of some of the things we've looked at and some of the questions you should ask yourself When you build a progressive web app Um, let's have a look at emerging markets as the next topic So over the last year over the last couple of years Millions of mobile first and mobile only users have come online And if you were here yesterday, you also saw tal openheimer stock, uh, which also covered, uh went to went quite into detail About this topic and so these users have specific needs and concerns um A real quick background story. Uh, we found that a subset of active opera friended users was not updating to the latest version They were stuck on an old version. Um that we released last year or a couple of other versions and they you know They were active users using it daily or weekly, but they were not upgrading to the latest version So we sent them a survey and we asked why why are you not upgrading? Why why don't you uh want to get on the latest version? And this is what they told us um in many cases their data package was so limited That they were afraid to run out of data by updating the app They said, you know, we only want to do this if it's really needed if it's really necessary And just an upgrade with like some tiny feature was not enough for them to spend X amount of megabytes to update the latest version and also interestingly some a lot of these phones are Underpowered phones that are being used in emerging markets and a number of users had run out of storage space So they couldn't their operating system sort of you know told them well you cannot upgrade and Maybe they didn't want or it wasn't obvious to them that they had to delete pictures To to save up more pictures or other data or other apps to save up space to upgrade So this was quite eye-opening and um recently this this was also we well recently I followed some conversations on twitter around progressive web apps and I saw a few developer web developers from africa Talking with each other and and interacting and discussing progressive web apps So I reached out to two of them On the right you see Eugene He's from Nairobi in Kenya and on the left there is Constance and he works in Nigeria for conga And so I asked him some questions and this sort of confirmed what we found earlier also in our in our server in our user survey So the article is on developer if you want to check it out. I'll I'll just feature a couple of quotes And he so this was mostly Constance here that I'm quoting and he said Nigerians are extremely data sensitive The same is true for for people in Kenya and probably a lot of other african countries And he said people side load apps and other content from third parties So they go with somebody with a computer with a lot of apk's on it plug in usb And then transfer apps like that. So what could possibly go wrong, right? So they side load apps and other content from third parties and also via extender, I think that's how you pronounce it It's a peer-to-peer Sort of app that is being used for local file sharing And with progressive web apps without the download overhead of native apps developers in Nigeria Can now give a great and up-to-date experience to their users because it's just really low threshold Really low friction to load a website is very light and of course these updates are instantly And he continues if I were to pick just one feature of progressive web apps I'm super excited about is the ability to detect and handle offline unreliable network conditions with service workers so this is this is very interesting and That's probably also why you see early adopters of progressive web apps it's not wired.com when you know css came around wire.com was one of the first sites to adopt CSS for its layout or if you remember Boston globe, which was one of the first Major sites using responsive web design, but instead we see a lot of these apps Web apps or web services in Asia and Africa Jumping on progressive web apps and building really interesting experiences And so this is very exciting and it sort of you know shows a little bit the direction and and Really why why this why this this whole idea around progressive web apps? Matter so much because it creates a it allows them to create a great low friction experience on any kind of device basically Let's talk a little bit about mini because we're talking about emerging markets and a lot of people in emerging markets And all around the globe are using opera mini every day So actually about 250 million people every month use opera mini And and the number is still growing And so if you didn't know opera mini is a is a proxy browser, but over the last Year actually it has evolved quite a bit and if you haven't looked at it lately I recommend you to try it out. This is a preview of the latest beta on opera on on android And opera mini now has multiple rendering modes on android So it's not only the the classic view anymore It's still there the the presto based server side rendering, but there's other views as well And so on when you use data it uses the built-in web view component with compression So it uses our servers to compress content And but it uses the built-in web view a renderer, which means you will get great compatibility and a lot of standard support On wi-fi it uses built-in web view without compression And unless you turn it on so this is also using web view. So it's really a great experience as well um And there is also an extreme mode which is sort of also known as obml or the the classic presto based compression mode that You know, maybe you know if you've looked at opera mini in the past Uh, it results in really large data savings because we compress the pages to something really small but it also We incur some breakage along the way because javascript is somewhat supported but not To a great extent and and so there's there's much more limited page interaction um We're in the process of moving users as much as possible over to the web view Based powered modes the web view powered modes Sometimes we even switch this dynamically when we detect to the site is you know better off using A web view powered mode. We switch to it in the background and then we switch back to extreme modes if they continue If the user continues surfing But many of our users are still using extreme mode The reason is because they like it Because you know, they've gotten used to it or maybe because they have a handset like a java phone or Windows phone where these other These web view modes are not supported So it might be that you know, they're one of those devices and they don't have a way to switch back But you'd be surprised actually a lot of people really Use extreme mode and they prefer this experience over what we would you know What we would think would be preferential, which is like the full the full package With with full web standard support a lot of users actually Really like and are concerned about this extreme mode because it allows them to save so much data So what about progressive web app support? This is sort of difficult question And so in the web view powered modes they have solid standard support as I said including service worker support So sites will work pretty nicely. We work together with flip cards to get their site To work well there and this you know, you've got full interaction and so on it's really nice You don't have to home screen or push notifications, but the service workers part works really nice And of course all the rest of the page interactions Um The extreme mode does not support progressive web apps features and comes with limited java script support So you have to you know, watch out a little bit there. It's a bit more complicated So before this reason I want to go back to like this is sort of about putting the progressive and progressive web apps and things like that It's important to you build your apps carefully balancing content presentation and client side scripting And you follow this progressive enhancement principles as much as possible to build up an experience That works well on lower end devices or or you know proxy browsers like opera mini all the way up to the the latest Browser with the latest bells and whistles on on really powerful devices And so of course there are certain experiences. Let's say you built a camera app There's a progressive web app that will be very hard to support an opera mini Simply because all the necessary apis are not available But if you start from if you have for instance a site that is very content heavy It makes a lot of sense to serve this content as html and then sprinkle Some some some scripting and so on on top, but still have a usable experience With html only And so this is quite important to consider if you Because these users they matter and there will they can also be users of your service. So why not? To paraphrase or to quote paul kinlin yesterday He was talking about this and he said don't start with the technology start with the experience That you want to build and sort of think of it like that and then build up The site around that experience to make that experience possible. This is a good approach, I think Because in the end of the in the end of the day what we want to build is a worldwide web another wealthy western web Where only people with powerful cell phones Can access content, but it should work for everyone so Coming to the last point some issues and ideas that we've had Um, I think personally that you are offline telling users that is a bit outdated It's maybe okay If it's the first time they visit the page and they happen to be offline And there's just no way that the browser can know what to serve for or that anything can be served at all So then that's fine But if you visited the site before and you try to reach it again But you happen to be offline on that point. Maybe this is what we should say This site doesn't work offline. It seems like you're offline But this site hasn't been built for offline use. So we blame the site instead of the user And I think it's sort of time to start thinking about how we can you know tell users as a browser vendor. Hey You know you're offline. That's great The site doesn't work It's not because of you but because the site just doesn't cater for offline use and sort of to Nudge site owners a little bit to provide an offline experience Which should be part of the package you service workers and so on to do this Then something about ambient badging and alex has been talking about this He said a couple weeks ago wouldn't it be great if there was a button in the url bar that appeared whenever you landed on a Progressive web app that you could always tap to save it to your home screen And so we also thought that that would be great So we implemented something If you go to Washington post for instance or any other progressive web app you see here. I don't know. Do you see what is what is different? Some of you maybe yeah, there's a little uh this little icon there Is a little phone icon uh sort of indicates add to home screen So that you can add the site to the home screen. It's just there It doesn't require a user engagement or anything like that But it indicates like hey, this is a bit special. There's this, uh, you know There's this mode you can add it to the home screen and it you know We'll provide a very nice experience for you. So this is something that is in a labs build that will come out Later on today just after the start of to finish writing the blog post and we'll put it on def dot upper dot com So do check it out and then Another thing is that we looked at is to how to pop a site a progressive Sorry, how to pop a progressive web app back into the browser and also a couple weeks ago. Jeremy Jeremy Keith who'll be moderating the panel later on Said I want people to be able to copy URLs.  I'm downright proud And we also think URLs of course are a very basic fundamental part Architectural part of of the internet and how we use the internet So we also saw okay, how can we when you're in a progressive web app that goes in standalone mode or in full screen mode How do you get back to the URL? How can you retrieve the original URL? Maybe because you just want to continue using the site in the browser or because you want to share it Pass it on to a friend and things like that. So this is what we built It's also in the same labs built And if I click here on an article Loaded this article in the washington post and then I pulled down to refresh, but I go to the right Then suddenly the site Pop the progressive app pops back up into the browser and you can continue interacting with it right there You can look at it one more time So this is the pull to refresh and then you go to the right or to the left if you want if you're left-handed And then it opens back up into the browser. So this will be in the labs built It will be released later on this afternoon on dev.oper.com. So do check it out and also worth mentioning if you are Interested in seeing more examples great examples of progressive web apps. There's a site pwa.rocks We try to update it as much as possible With new progressive web apps that pop up in the wild. We fully realize that this is not scalable But for now it's quite fun to sort of say hey, there's a new site. Let's put it on and you know Sort of that you can discover it and play around with it and so Yeah, so if you have a site that you want to see featured there Feel free to do a pull request every all the codes on github and we'll be happy to include it So that's it for me. Thank you very much Cool. Thank you.  Hey everyone Yeah, this is the kind of the last session I think it's probably the most important one as well because it's that chance that you get to be able to ask the questions That you want to see answered on the by by the browser vendors and you know people on the chrome team as well So I think it's important like I would still encourage you to keep submitting questions You've had a whole lot of questions going through. I've got like a little sneaky document I've got going which Jeremy will be able to see In case you know your questions come through so you don't have to get up and stand up and ask a question But if you do want to get up and stand up and ask a question. I have this really weird Licorice all sort thing. I don't know what it is, but apparently I can throw this And you can catch it hopefully and then you speak into it and you have to well I'm told you have to speak quite closely. So Okay, can we test can we test hello? So like they said don't do it down here, but do it here Try not to look it as well. So One of the things I was going to say is Jeremy will will be directing the questions from the audience So obviously put your hand up and then we'll try and kind of manage it that way And then when he says, you know, what's your question? I will try and throw this to you Then from person to person it'll be good if you could launch it the correct way when signified Signified signal, I think is the word So I want to get this started pretty quick because I know there's a lot of things that we all want to talk about I'd like to introduce Jeremy Keith up and also all of the panelists as well Hey everyone Are we having fun yet? For the Netherlands, that's positively effusive Okay, so I've got the panel has grown since I last looked at the website Uh, I'll get everyone to quickly introduce themselves. Just say your name say where you work and say what one technology or possibility Around all the things we've seen over the last few days that you're really excited by but really quickly. So andres go You already know me. Um, I work for our press after i'm andres bovens and i'm really excited about Some of the stuff I just showed you ambient badging and pop back into browse Great. I'm jack archibald. Uh, hello. Yeah, I'll just shout I'm jack archibald. I'm the developer advocate on the chrome team. Uh, and I'm really excited about streams as you heard yesterday Hi everyone, I'm emily shekter. I'm a product manager on chrome security at google And as most you probably imagined from my talk yesterday, I love htps And tls and secure connections and all that good stuff Hello, everyone. I'm jungki song. Uh, working working on samsung internet team. I'm editing service workers I'm alice maroski. I'm a product manager on the chrome team and I'm excited that the web Still has that strength of no gatekeeper. That's really cool Hi dan applequist also working at samsung and w3c tag co-chair Um, so two hats on this panel and i'm um, uh I think i'm really interested in Uh that the experimentation going on some of the stuff that andrea has presented around how How what the life cycle management of progressive web apps are how they get installed how we might be exposed to the url all that kind of stuff Hi, i'm alex russell. I'm a software engineer on the chrome team And i'm most excited about how much faster you're going to make the web this year with all the stuff that we've just built I'm tall. I'm a product manager on the chrome team and i'm most excited about page speed module and how you can use it to help users save data Hi, i'm ben kelly from ozilla on the dom team and Currently i'm probably personally most excited about streams because that's what i'm trying to implement I think it's cool. Hi everyone. I'm ali alabas from the microsoft edge team and i'm really excited about service workers I'm tal tran. I lead partnerships for chrome and the web platform team And i'm most excited to have everyone's phones be Combination of native and web apps and it doesn't matter to the user Nice, okay So my name is jeremy. I work at a little agency called clear left. I'm a web developer And something we sometimes do when we're kicking off client projects is we'll have what's called a pre mortem Where we say okay, it's nine months out with the projects finished and it was a complete disaster What went wrong and i'd actually like to do that in terms of the web and where we are. Yes, it's a very exciting time but Maybe it's good to get out into the open what the stakes are and what are the worst-case scenarios if we Fail with these progressive web apps here. I'm particularly interested in hearing from Not just google but also from microsoft and from from opera and from zilla so ali actually i mean How important is all this stuff? I think it's very important actually If you guys aren't aware Microsoft has this concept of a hosted web app, which is something that we had started back in 2011 As part of our web apps journey and just recently we have this thing called a hosted web app Which is basically just a manifest that you can publish to the store Which points to a url a url And then you can basically run your app Inside of windows whether that's the phone or an actual desktop and it it runs it in its own contained state so We do have some kind of history there with With apps and the web together And we're really excited with these new technologies such as service workers and and the cash and fetch and whatnot To really bring forward some of the technology that Will help us get to apps that are more like their native counterparts. Okay ali that wasn't what I asked Ben From zilla, how how what's at stake here? Well, how does the web look in five years time if this stuff doesn't succeed? That's a good question I don't have a crystal ball But I mean I think all the data is suggesting right more and more people are using mobile to start and I think as alex has pointed out a lot a lot of people are spending the majority of their time in native apps so creating a more compelling Capability on the web for people to build useful Sites that people want to spend time in Is really important because there has to be a real Value there for people to use the web on the mobile and if we don't Build that value for people and allow it to be to and Allow people to get locked into the silos again I think we lose a lot of the value of the open web in terms of being able to share information freely being able to Not just consume information be able to share it freely and Have an open marketplace where new ideas can come in not just in content, but also from browsers and whatnot Well in the case of you know, microsoft and google And apple you know they got backups because you know not betting on the web andre its opera is pretty much all in on the Web right it's it's all you do so What does the end game look like here if if the if these technologies don't take off? um Yeah, it is a bit it's a bit scary of course, especially because we've invested so so strongly in the web So it's because we believe in in in it and it's you know, it's open nature. It's power and so on so it is It has I've been concerned or increasingly concerned about you know sites or services that just use a website To channel people to download the app And so it's it's really exciting to uh to see less of that and more an experience fully in the browser Then you know handing off everything all the exciting stuff to native apps. So, uh, yeah, it wouldn't look so pretty I think if if Mobile was completely dominated by by native app native app frameworks and and and formats And Daniel and junkie in your case. I mean samsung you you own the device. Why do you need to To bet on the web because you you know native works for you guys Actually, uh Well, web ecosystem is really important to samsung as well because we have all the devices deployed out there And we made our own browser and also it's in new ecosystem to us Added to those android and tyson ecosystems So we see our opportunity is uh there together with you So it's well the reason why i'm here to just say that it's it's not only google But we are here together as a team web. Yep team web. I love that. Yeah, um, Alex everything's gonna be fine. Isn't that I mean five years out if this stuff doesn't take off I'd like to sort of flip the question. I know you're gonna. I was going to flip the question later Uh, we start with the dystopia then we go to you. Okay. Well, then I'll wait, but so okay one of the stakes My belief is that Large stable platforms don't actually die They just sort of pass quietly into the night and so the web could do that that could be a thing that happens And more and more of the experiences that you want to spend your time in just Aren't available there, especially as you switch form factors form factor switches tend to exacerbate those existing tensions Um, and so if we want to continue to have a free and open interoperable cross device cross platform ecosystem That any new os could show up and play in or any new browser could show up and show a better way I mean what andrea showed is incredible right the the ui innovation that comes from not having a single gatekeeper like alex said is is what may has made the web so powerful and if The platform can't support the experiences people want to build that that momentum will slow. Okay So i'm going to address something because a lot of questions are coming in From that document you're filling in and there were a lot of questions about apple You know, when will mobile safari do this when will apple do that? There's no point in me asking those questions to any of the people up here because they don't work for apple Um, I guess it is a big elephant in the room. They were invited But they're not here and they generally don't tend to come to any events like this But some people may think and well, you know, even if mobile safari doesn't support Service workers, that's okay because I can install chrome on ios and I can install firefox on ios and I can install opera On ios would anybody from those companies like to explain exactly what those browsers on ios are Please clarify Ben andres Sure, uh, I believe the store the Ios store has a you know a contractual constraint that they don't allow You know the execution of javascript or downloaded content that hasn't gone through their review Executed code that hasn't gone through their review So you can't put up a generic browser that downloads javascript from the web and run it and um You know their explanation for this is to prevent malware, you know, they don't want people to Uh There are other side effects. I guess you could say uh, so that means that chrome I believe opera and firefox are all essentially wrappers around safari's engine inside and there's different ways of doing that Which i'm not an expert on but uh And we try to add value at the product layer and and at the network Interface layer you can do some some things by intercepting the network requests, but it's not uh the same Gecko engine or a blank engine Running there. So okay, so there you have so you cannot install any other browser basically other than safari onto ios, right? Web web ui view i believe but there is a mode where you can switch to press server side press to rendering But then you know the engine lives on the server not really on the on the client And even if you can uh, it won't support service workers either because that's sort of a different, you know It needs to live on the client. So it's kind of a yes, but but actually not really type of type of thing So so but but um, um, so let's say on android where i genuinely do have a real opera mobile installed and a real firefox for android installed and If it's a samsung device then i've got samsung browser installed as well as chrome. All right, so maybe i'm trying different browsers let's say i I visit a website that is a progressive web app in opera And i add it to my home screen Or maybe i visit something in firefox and add it to my home screen now each time i open One of those things i've saved to my home screen am i opening the browser again Or if my preferred browser is let's say chrome do they open in chrome? How does this work? It's the first one It's that you'll be opening it up in the browser that you used to add it to the home screen And that's the same that if you've got like chrome and chrome dev and chrome beta installed And you add to the home screen using one of those it will launch in the one you added to home screen using Okay, is that because with progressive web apps the storage is done with the cache and each browser has its own individual cache So from the user perspective it's actually it could be quite confusing if you tap on a thing and you forgot that You know it's a that you added it with the different browser And then you clear out the cache and now you find the thing that you added your home screen And maybe you even forgot was built using web technology No longer works So that moment when you add to home screen We are increasingly seeing as sort of a special moment when you mint these things into something that feels more like an app Okay, so it's the storage is basically at the browser level because it's individual caches Is that the best idea? I mean we see push notifications happen at the os level should storage be at the os level But let me ask you a question How many people besides like us web? Technologists in this room like have like five or six different browsers on their phone that they use all the time Right, I mean most people have one browser that they use on their phone And that it's because it's the browser that ship with the phone or it's the browser that they're that the people that You know that that they know who knows something about this told them to use Or they saw an advertisement for chrome and they saw they saw something so then That they're going to stick with that So actually I've been thinking about this issue too because you can have multiple Progressive web apps from the same web app installed onto your phone simultaneously Actually, that's not it's actually a good thing for testing I'm not so sure if it's a real user experience problem because again, I don't think most people use multiple browsers Okay While I'm diving deep in how I would interact with progressive web apps on different browsers Let's say I go to example.com. It's a progressive web app And I install it to my home screen now later I'm surfing the web in a web browser and I follow a link to example.com now I take it that's just going to open in the browser But could it perhaps pop open like an app It's almost like web intense right where instead of at the protocol level now. It's at the url level Alex you look like you're thinking about this. Sure. Yeah So we have a technical limitation today because of the way android works other os's could do a significantly better job here By the way, we've designed the technology between manifests and service workers to give you this idea of the scope for the service worker Which joins up a bunch of different urls So we could say if you navigate to example.com slash thinger That that is actually a navigation that should be handled by the example.com app And we could send it there and we could Open it in new ui today. We have a system limitation on android that prevents that We can't know when a progressive web app has been uninstalled From your home screen and that means that we can't reliably decide to send you to a full screen thing because The home screen icon is basically the permission to run something full screen that prompt that you're saying yes to It's adding a capability to the website Which is the ability to run full screen and so if you've revoked that capability, but we don't know it It would be bad for us to just open it full screen again, but I think there's a Future in which that's exactly what happens potentially where if you navigate to urls that are handled by an app Just exactly the same way they work in android you should be able to do that You mentioned permissions there and it seems like a lot of what progressive web apps are doing is seeing what works on native and Doing that so oh nice having your icon on the home screen Launching full screen all this kind of stuff So, uh, I would say it looks more like native is looking at what the web does with permissions and copying us Well, I was just going to say I mean we should we be looking to native apps in the way they handle permissions Well, no, I mean and so we've always gone with the model of ask just in time that you know that we need the permission And and we're sticking with that we're looking at sort of other ways to innovate there But it's very much things like android are switching to a model of the just just in time thing. So, you know We're ahead on this Actually, what well i've got here speaking of native looking at the what what the web is doing and kind of imitating that What's the deal with the streaming apps native apps thing on android? Oh, it's net Yeah instant apps there we go. Yeah, so slap across the face to the web right there So I don't see it's quite a slap across the face I guess and I think google often tries to make sure that developers on different platforms can have be successful And I think historically when you look at Web you've had low friction which is due to this incredibly powerful security model that we've honed over the past 25 years collectively Which is a quite an accomplishment This low friction but also low capabilities and native apps have historically had High capabilities but also high friction And so progressive web apps has been a multi-year effort From multiple browser vendors bringing working on service workers push notifications to bring those high capabilities to the web And I think that the internet native instant apps is kind of similar and that it's a multi-year effort to bring lower friction to To native apps as well But what I think is cool about progressive web apps is We've worked on this together You've seen a bunch of different browser vendors who are either have already shipped a bunch of these capabilities that you can use Today with more on the way and so that's what I think is really cool Is you can go out as a developer and use this stuff today with progressive web apps So alex's how do you feel about streaming web apps are streaming native apps? You want to succeed behind it? So I think it's great that like lower friction allows users to be exposed to a diversity of experiences And I think that's honestly good Not what I asked So I think I think it's good for that native apps are also learning from some of the things that Web has done well just like I think it's great that the web has learned about some things that like robust offline Push notifications and other things that we learned kind of from native. I think that's great I think it's interesting because last time we were on a panel together It was in in Brighton and it was kind of at the time where some people were saying Should should the web stop adding features for for some amount of time should it stop developing And the case I made then it's like no we should look at the things that are successful On native and we should take those because you know what they're coming for us They're going to do the same And and this is part of that they're coming for our best features So, you know, we should we should go for theirs as well. This is the kind of dystopian five-year outlook I was looking for jake But I wondered like the question isn't like what we think about whether we want it to be successful I think at the end of the day, it's about developer success Right and so like making sure that developers have access, you know If you if you believe that your business is going to do much better on native Then I think we want you to be successful there And if you think your business is going to do better on the web We want you to be successful there as well, right? So I think for us it's really about making sure that people like developers like yourselves Have like the best tools across both platforms. Yeah The first day we had great talks from you and Alex talking about, you know Comparing numbers between between native and and web and there were some great numbers in there Like the average number of apps installed per month or added, you know to a home screen and native apps is zero Well, if that's the case, why are we chasing after the home screen? How will we know we've succeeded if if people install an average of zero web apps to their home screen? Because then we've achieved parity with native So for me one thing that's important with this is with native apps today, there's this all or nothing choice I haven't met this thing before I don't know what it's going to do for me And I have to decide do I want to add this to my home screen? Well, not not anymore with streaming Native apps, right? Well, I think that's the direction that's trying to get to to something as well But that's why I think with progressive web apps it builds on that That progressiveness that's one of the reasons progressive is in the name is that as a user you go to it as you Use it as you build a relationship with it. You can compressively build a better experience with push notifications home screen and all the rest and that you You've spent time with this thing So you feel more comfortable giving it more permission to do extra things for you It's not a cold call, right? It's not a cold call. You're not like saying. Hey, would you like my app? It's more like You like this you want to keep it and if you and if you don't want to if you if you do if it's something That you're only going to if it's an airline that you're only going to ever use once, right? And or you don't think you're going to fly them again You're probably not going to put them on your home screen You're just going to use it from the browser and that should be fine And the whole the whole application should work fine within the browser within a regular tab Then you find out next year. Actually, I'm going to be traveling a lot to rega. I better You know put this on my home screen. Okay at that point you could make that decision, right? It's like it's up to the user and I think that that's an important aspect The data usage is a huge thing that we hear over and over and over again even from users and you know Wealthy western countries yeah, the the storage constraints that devices have Ignoring even the data cost or the fact that you need connectivity to install it in the first place Just create a huge difference in the accessibility of even trying something out for the first time And so I think we do need to both go in each direction But each has something that it's geared towards So if you're building an experience that is really targeting users who are just coming online A native app might not be the right choice And a web app is probably the right choice to remove some of those barriers But there are other situations where it might be the reverse and the user shouldn't have to Pay the price Us as developers should pick what's best given the Probably tell me talk about the next billion. What kind of devices are the newer things older devices? What are they? So there they're new devices and that they're being built new and they released in certain years But a lot of their specs are ones that we associate from sort of previous years and some of the more Developed markets so in the u.s. Or in the uk or europe will there'll be devices that we think of from several years ago They may be shipping jellybean on the device Device size might be a lot smaller amount of storage space and ram Will be a lot smaller people rely a lot more on sd cards, which means they can also remove it and hand it to someone else and so how people are actually interacting with Data and storage constraints just varies pretty drastically. Yeah, so I guess I mean the responsibility is honest to be responsible with with storage And I think something alex in your your talk yesterday. You were showing the amp demo there with the washington post and You click through and there's the washington post amp thing and It was able to install the service worker with that custom element But I was looking at the url bar and that wasn't the washington post It was on the cdn from from so talk to paul back to explain it's an iframe and using an iframe You can install a service worker from someone else. Emily that that seems to violate the principle of least surprise to me Right. I thought the whole idea with service workers was it can only you know same origin and I realized iframes kind of are just a browser window But I mean we could abuse this pretty badly right and fill up a device with 20 service workers When you've only visited one web page with 20 iframes So service workers require a gps and I explained some of the reasoning behind this yesterday It's absolutely like one of the reasons Is because service workers sit between the browser and the network right and so that means that any person on the network Could be managing the requests that are sent back and forth And that's actually why we require hdps But but is the iframe thing a bit of a loophole there about the same origin and that I feel like i'm visiting One url and yet it's installing service worker or service workers for another url So one of the things about this is actually If you embed an iframe today another page and it might store stuff in index db You can do the same you can have the same kind of behavior And so actually one thing to clarify is that service worker is using the same storage That the website would have been using using other technologies index db the cache others And the browser reserves the right to evict those under certain conditions And so it's similar actually in practice to what's been Possible to date that specific demo the hand install service worker element on on the cdn hosted version of that document That element is a little canny it looks to see if the canonical url In that document is the target url that you're trying to install for so it won't let you install them willy-nilly It has to be the same document there. So that's built in the amp install service worker But I could I mean I could put on my website a bunch of i-frames to load other websites I have to absolutely and this is actually part of the web's Most powerful second most powerful feature the first one is urls, of course But we do runtime composition like no other platform ever has or ever can in a safe and trustworthy way like We are only because of the safety that alex mentioned earlier because we've actually honed the security model where we are relatively good Compared to other platforms About user privacy and security. That's the only reason we can do anything across origins or with mashups so I mean yes, but that's the status quo and it's also an incredible power that we've got and nobody else can get So that that storage demo that we saw earlier storage abuser thing that that is using i-frames It's not using service worker. It's just i-frames and index db and everything. So it's it's not a new problem That's i-frames I just wanted to point out also that there's room for browsers to add some features here like You can go and turn off cookies and third-party i-frames It's very similar to that and currently in firefox if you turn off third-party cookies and i-frames We don't allow service workers in those i-frames either or index db or any other storage nice and So I might be wrong but i think safari has that turned on by default It'll be interesting if and when they implement if they make a similar decision Speaking of the things that browsers can do differently. We're all familiar with the chrome Algorithm i guess for adding to home screen right? It's got to have htps got to have a service worker You got to interact with a couple of times Andres, what is it pretty much the same for opera or tweaking it? The install banner you mean yeah For now it's the same it's the same okay the same logic simply for Consistency, but we could tweak it. It's it's like that there's other you know could be other conditions But it seemed pretty reasonable and then currently firefox doesn't have any automatic We're still looking into it like the the experiment that was run was very You know if you visit it five times in a Period of time we would show it but I think we we need to have a designer look at what's right there I am a little bit Cautious just because this is a heuristic. That's not specced almost. I think it's on purpose to allow some innovation here and At the same time we do see some convergence on a single heuristic So far and the feedback I've gotten from developers is they care a lot about it. So they're trying to meet that heuristic and so Concerns me a little bit. Okay, at least microsoft going to have an automatic banner pop up We're looking at a few options. We're still in our planning phase for this specifically, but We want to be as We want to not be as restrictive As we can so For example, if you have a responsive Application you have a web manifest We think that's enough for you to declare that you're an application We've also talked a little bit about In that post that jacob Rossi had about the progress of web apps How we're looking at maybe leveraging bing to crawl the web to find any manifests that we want to ingest As apps into the store. So that experience would would actually Allow you to install with the store Onto your machine and the other thing the browsers can do differently is that andres what you should have stayed with the ambient badging It's like great shots fired Operers taking the lead here Beat that other browser vendors any any plans any ideas want to share this with the rest of the class Well, first of all, I wanted to answer your previous question about The heuristic because actually samsung browser have this have us have have more like what ali was talking about is just Purely needing the manifest file. So you're saying https is not a requirement. https is a requirement. Oh, okay A requirement because it doesn't really require service workers yet, but there's a history like we shipped w3c manifest in our 3.0 And we shipped service workers in 4.0. So by that time we shipped W3C manifest we just wanted to deploy it and we Founded that some of some of the content providers in korea actually use it as a like hosted web app And that's why we actually started from there. So we are still experimenting that What would be the actual actually Better user experience also Distributing this progressive web apps in a better way. So we are still just working on it Emily I'll take that that that the progressive web app at home screen is a nice carrot for you to dangle in front of people and say This is a reason for moving https Um, sure. You could say that. I think there's a lot of different reasons why we want people to move to https Do you tend to prefer carrots or sticks? Do you let you You know Like to threaten people that they should move to https or entice them to move to https I think um, both could be useful in in certain situations But I think we like to think of https is actually one of the things that enables the web to be so open and so low friction Um, and so it's actually a very positive thing Okay, so on the ambient patching, uh, if anybody's got any other ideas just shout them out You know, I just want to say I think it's awesome to see what opera is doing here And I think it's going to be really interesting to see what other browsers do Because it's not 100 clear what this should look like and that's one of the awesome things about having multiple independent implementations That are looking trying out different ui's and seeing what works best in practice So we've I think another thing I want to emphasize is that We've heard a lot of developer feedback from a lot of folks and that's led to us changing some of our heuristics right now And one thing that we've seen again and again is there are some use cases where the very first visit You know as a user I want to add this to my home screen And you want some way some affordance to do that or know that it's a special thing And so we've also exploring Some ways to do some ambient badging The for progress well as well something else to come up with the idea of discovery or re-engageability with progressive web apps Is the idea that oh we need a progressive web app store or now we see microsoft We're actually going to treat them like regular apps, right? We'll be first-class citizens in terms of other apps They'll be right up there with other native applications in the store So when you search for the app you'll find it like any other application But do we need a progressive web app store? I mean it'll be the same thing, but isn't isn't bing.com a progressive web app store kind of I think about this in terms of distribution You make an experience and you want to get it in front of users And what's the way that you can do that most effectively as a developer You're trying to get users into your experience and as a platform We're trying to make sure that only experiences that are worth keeping are things that you're actually sort of in your face To ask to be kept so that's where the heuristics come from But discovery can happen in lots of different ways search is a great one I'm so excited that microsoft is doing the store route. We've talked a lot about that on the chrome team I think the ambient badging that opera is leading on is Is outstanding and I think we're going to see all of the above really because we're here to try to help you get Your experiences in front of users when they like them the most But I do think that I would like to see as tightening as a member personal opinions tightening the heuristics from what we have now in chrome Um, and because we detect a service worker now But I want us to get to a point where we're detecting an offline experience I mean at the very least the fallback page Like I really want us to be able to build user trust in the things that end up on the home page And I think if we end up showing browser error messages that's there's no trust there Okay, and it's so interesting you're in your prompt at home screen. You also don't accept display browser For for adding that prompt Yeah, um I think we do actually. Oh, so there is a difference in the yeah We do accept display browser as well as far as I know at least I'll have to check But yes, yes, we do because in the Guardian it works so opera takes the lead again All right, um, but I think it's I think this you know having this strict Heurists or like strict rules for when it's shown Both in terms of technical capabilities and and user User engagement they're pretty crucial at first you would think well Let's try to make this as easy as possible for developers and just show it as soon as possible and so on But then aside of this maybe not not being ideal for the user It's sort of also I think makes everybody a bit lazy like well it will work and I don't have to do much Just include one file and it's like this magic file you put in the in the root and suddenly everything, you know You get all these banners for free And and and you know at the possibilities to to to add to get used to adding to the home screen I think it's good to start with pretty strict requirements. I maybe even make them more strong Over time just to sort of make the web better and make it really worth it Like because adding something to the home screen is like a special thing, right? It's like a privilege. You know, it's a privilege, right? It's like, uh, you know Certain kpi if you will like a kind of a conversion event or whatever you whatever you call it And and I think that's that's important to keep apart from samsung all of you that make browsers So you also make browsers for the desktop as well as mobile. How does add to home screen look work feel On desktop. I mean I use slack and it's a desktop app, but I know under the hood. It's actually web technology so Any ideas on how we're gonna Cross that uncanny valley. So you've heard my answer You guys have seen probably the whatsapp For desktop which is basically Just a web view instead of an application that you could put on your desktop So as far as you're concerned, it's it's an app And that's sort of the same idea with Windows but the install process there as you go to the store So for for that the the whatsapp example is you go to the site and you install it from there But for what I've described earlier, you'd actually go to the the windows store and you'd you'd search for the application and then you can install it Okay. Well, I'm in a browser. I'm at a url. It's a progressive web app. I'm on a desktop browser I want this installed. So we we've actually launched an add to add to shelf But a butter bar inside of chrome for chrome os So that exists today. So if you load a progressive up there, you should get it with the same heuristics We're still looking hard at what that would mean or what the ui would mean desktop is you know, we supported the bunch of desktop os's and There are a lot of differences in getting high quality system integration Actually, it's a little bit easier when you just have one activity at a time in android Then it is to sort of like handle all tab and all the rest of the details of a desktop os I'm again extremely excited that microsoft is going to lead on this Yeah, just to check because i'm running out of time. Do people in the audience have questions? Yeager, we have we have a couple. Okay. Well, let's get paul to throw the microphone Where's that? Where's paul gone? Yeah, he's got the microphone. So we can you can throw it over there Meanwhile, I just want to be setting up while while you're getting the microphone Yes, we're hearing from that a lot of a lot of uh disdain for Documents and a lot of excitement for apps and we've been talking about progressive web apps I wondered if anybody here could tell me what an app is Anyone As opposed to you know the rest of the web Progressive web app is a is a marketing term. No, but just app Just app What's an app?  Don't use the trick It's not an app on android because it's made with java It's not an app on android because it's made with c++ It's not an app on android because you distributed It One way or the other side load an apk It's an app because the overall user experience is set by the os About what is a first-class citizen and what isn't and so being an app is simply meeting the user's expectations Of all of the other things that the os has given privilege to and all the other Affordances that you're integrated into and that's what an app is Is that what you're seeing tau when you you know looking at native looking at web the people generally think like it doesn't matter It's just an app I mean, I will come from a From a non-technical perspective on this. I mean when I think about an app. It's just People just think a better user experience on mobile. I mean, that's you know So we often describe progressive web apps as like these app like experiences So if you think about it just it's just a more like like native access to Probably the os access to the device being able to actually feel like a rich fuller experience So I think about in terms of what the user is able to experience unless so about kind of the distinctions in terms of technical Specs and stuff so is it isn't an app when it's still in the browser. I have not as my home screen yet Is this an app anything that is an application that you interact with to achieve some goal is Is an app is my blog enough. Yeah. Yeah google maps on my browser is on my computer. Yes. Well Yeah, I think so, you know It's a truck I know it's a truck We can divide the whole web into apps and documents is not something. Yes Hi Up to your mouth, please don't look at but close to the mouth When you're browsing in the in the app store, you see how big an app is and when you're trying to install it You have don't have enough space. Well, it's as sorry. You can install it and then you have to choose What you've removed but when a progressive web app you install it and you don't have enough room The browser decides What to remove and then the user loses might loses an app that he Likes to keep how do you think about that? So this is part of the the storage apis that we saw earlier this this idea of being able to request persistent storage And if you're granted that permission then you can store as much as you want and the browser will not remove it And and the hope is we can get into a position where if the device does come under Storage pressure then you'll go to the menu you go to where everything's listed with the biggest thing at the top But it won't just be chrome sitting there using you know gigabytes It will be origins like all of your persistent origins will be there separately so you can decide Ah, do you know what that game can go but all of my offline videos can stay You can cache the the request with the service worker. Can you upgrade that to a persistent storage? Just clarify we've pulled the world's largest bait and switch at application installation time Right by the time you get that that prompt at the bottom and chrome today We've already done all the work of storing everything Right, you've already got all that's the that's the best part, right? You're already using the thing the question isn't do you want to install it? It's do you want to keep the thing you've already got Right, we're doing the upsell. We're not like trying to get you into the car in the first place It's like do you want leather seats?  It's too loud. No, no Have a question related to the future of native apps So some years back everybody wanted to have an app because It was the app boom so everybody invested money developers invested time learning new stuff And now we see with progressive apps that we are moving towards a different paradigm so in the future if these things really Like it's a thing what will be the future of native apps? Why would I want to install a native app if I get the same from this? This is brilliant because this is pretty much ties into how I was going to wrap this up which was instead of the pre-mortem we'd have the Five years out we've succeeded progressive web apps people are using them But this is a great addendum to that Well, what are people using native apps for in this beautiful utopia of progressive web apps? Who wants to talk about this future? I'd like I'd say that how high Games that require high cpu and high gpu will be the last the last things to sort of come to the last bastion. Okay games Yeah, well my in 2006 I posted the vision of kind of a future of web I'm a future of mobile basically and Because I saw that a lot of people were starting to this pre-iPhone A lot of people were starting to download internet connected apps for photo sharing and all this kind of stuff and and my view which I still hold is that native apps are going to play A role in that but more and more the web And alongside of the web sorry the web and native apps are or should play should both play a role and We want the web to where wherever possible to become the vector for whatever experience the user gets For whatever applications the user is using so whether that's a native app or a web app So I think that's the future that I see because I think that we're never going to do away With native apps and nor should we really seek to do that But I think that if we make the web as good a platform as it can be Then when we're going to make everybody's lives easier including users and and develop an alley you have a vision I think we shouldn't think that think of this as a competition I think it's more about providing options for developers.  How does life look? Well, I think there's always going to be a next billion at least given our population growth around the world at this point So there will probably be a new next billion Hopefully the the billion we're currently thinking about Will be online and ideally if we do everything we've talked about here Able to access really great experiences even under the conditions they're in but I do think we'll see Probably devices that we think are Top of the line today that might not be considered top of the line in three five years And while we're seeing a really a lot of improvement in network connectivity Around the world and I know there's a lot of ambitious goals and making that the case globally There will still be people who are coming online for the first time and don't necessarily have the context of That we all have with the internet and have their different context.  But there'll be people who have never interacted with anything. So as soon as we're sort of looking at these transitions There's always going to be an next billion I don't think it'll be solved and we're gonna be needing to adapt and just I think the biggest takeaway is just Think about people who come from a context different than your own And figure out what that context means for how you can make sure that the problem you're trying to solve Can be solved for them as well Okay, I'm going to wrap it up. I want to thank all the panelists. I want to thank Paul kind of actually for asking me to moderate this because I thought that was pretty brave of him But ladies and gentlemen, we're having a lunch break next, but uh, please give it up for all these panelists Cool, thank you.  Um I'm gonna say thank you. Jeremy not for the panel, but for mentioning web intents. Uh, that's good He was like uh Another panel is great. I enjoyed it. Uh, one of the things I was going to say is that I know there's a lot of other questions We do have the office hours Uh after this so after this session now, we've got some lunch We've got codelabs The codelabs are on the third floor if you go through where we'll have people helping you build Or integrate kind of progressive web apps into kind of experiences. We've got a load of like tutorials and guidance to go through It's pretty good It's on the third floor. You have to go through the Lift or the elevator or whatever we call it the lift The office hours are going to be in the main foyer. They're going to be labeled up as Kind of different areas. We we're all going to be pretty much there So if you have extra questions that you want to ask we can you know We'll be able to answer all the questions that you have for during the day at least um, I do have Things it's not that slide Livestream and record. Oh god. Yeah, I've completely forgot what I was supposed to talk about Uh The live stream is about to end. I'm very sorry for live stream viewers Uh, but thank you for joining us. Uh, we really appreciate it There is a lot of questions that came through from people who are on the live stream And you're trying to work out a way that we can sort out kind of different answers and a bunch of other stuff That we can help out like help give you that information that you asked for Uh, because obviously you're not here. So you can't ask the panel like the panelists Uh, but yes, thank you very much for coming to the live stream at least and then we'll see you soon The videos will be available, uh pretty pretty soon The other piece is now that we're over I can start talking