 Good morning, ladies and gentlemen the program will begin in five minutes Please take your seats now and silence all personal electronic devices. Thank you. Oh, hello. Wow I shouldn't be tested. Hey. Hello everyone. I have a hand like this time because I'm only on for literally a couple of seconds Which is good That music I didn't realize it. We've got it online if you want to listen to it to your heart's content It's on SoundCloud. All right. It's good Yeah So I can't remember who asked there was a lot of people asked last night whether it was online So that's why it's online because you're out. You did ask so we got it online for you Welcome today to at least this is a Obviously it's a kind of a bit of a it's a smaller event today a lot more intimate for us It's your chance for you to be able to ask us questions and kind of start engaging with The multiple browser vendor teams and the people actually building on the platform today So we want this to be a very collaborative and kind of You know collaborative style of event for everyone today, which is really good I'm excited about that actually because it's not very often that we get to kind of get direct feedback about everything that we've done Yesterday we were talking a lot and there was a lot of information And then I'm sorry that I run over and I've got everyone really late in the end But there was a lot of information now today is all about people putting things into practice Which is a really good thing I think because there are quite a few developers who have been out there They deployed production ready applications and they kind of see and benefits from it So you'll hear from them today And then there's also a number of browser vendors here as well talking about the kind of vision for the future especially with progressive web apps Which I think is a really exciting story to tell I do want to remind everyone again We do have a code of conduct. I'm not going to go into it too much But we are and we want to make sure we're a very inclusive environment And we want to make sure that no matter your experience your kind of skills You know everyone listens and kind of shares experiences and we just have a great time We do have this and I did everyone told me I made a mistake when I said this We have a zero tolerance. I'll mess it up again. We have a zero tolerance policy for harassment So any harassment of any kind, you know, if you report it we'll kind of we'll try and action it as well as we can So please do let us know if if you have any issues and we'll sort them out any criticisms any feedback Any positive feedback as well things as well We always want to hear this and so we can make these future of this event and future events even better The agenda today again, it's it's it's pretty packed in terms of talks But we kind of finish at midday with a panel session with Jeremy Keith and a whole bunch of the browser vendors as well I did we did share the link around and I've got a link in a minute But make sure you get your questions in so that we can make sure that you know You like you have your questions answered if you don't want to ask them in kind of in person We will have this microphone which we can throw all over the place It's going to be interesting to see how this works. We actually literally have to throw the microphone To do it, but we'll sort that out But that you'll be able to ask in person questions as well It is your chance to get your kind of issues concerns Hey, maybe even it's positive comments as well to the browser vendors about what you think the future of the platform should be We'll break it 11 back at 11 30 and then have a lunch at 1 30 till 2 It's a relatively short lunch and the reason why we have a short lunch is because at the same time We're going to run office hours and codelabs the codelabs will be upstairs and I'll talk about that more a bit more So again We are kind of manning all the kind of different channels in different ways that you can talk to us If you have questions that you want to get answered as well Throw them on either the slack or on chromium dev and we'll try and get that sorted Definitely, we just want to listen to your feedback and have any answer any questions that you have The codelabs we do have a dedicated area upstairs on the third floor When you come in you have to find like there's a couple of lifts like you'll see it is a little bit out of the way Seems a little bit out of the way But we've got the ability for you to have space with power and a whole bunch of other stuff to go and actually build and put Into practice progressive web apps. We've got tutorials guides We've got engineers as well from our team the chrome team as well there to be able to help you if you have any questions Well, so it's a nice way just to start playing with code and getting it live And we have that time today to be able to do that the office hours There's a lot of things on the office hours today We have two sections for the office hours of roughly about an hour and a half each Paul Irish is kindly staffing dev tools if you want to talk about dev tools He'll be there all afternoon. We've got some media Microsoft Samsung Opera Mozilla will be there to be able to kind of kind of take your questions And you'll be able to go up and talk to them so dedicated time to make sure that you can go and find and speak the people That you want to talk to more information is on the website about the office hours that are happening And it'll be clearly signposted around and it'll be in the foyer the lobby area today Again, it's one remind you Q&A panel That's the it's the URL if you can't get us on slack or chromium dev Just drop them in there We'll make sure it's at least on the agenda and then the people running the actual panel itself will kind of try and get Trying it to the questions And that's it. That's me. That's me done I'm gonna come on every every other every talk just to kind of introduce the next person Which means I can actually now introduce the next person so from Konga I think was it Cape Town you from came from today could always from Cape Town this for this event Andrew Murray from Konga So Who here enjoys? Deploying production changes late night last minute on a Friday night Well, you really shouldn't I certainly don't and neither does my team So we had to break some rules to be able to join you here at the Dev Summit to be able to release our Progressive web app just before just in time So, hello, my name is Andrew and I work for a company called Konga And I'm here today to tell you a little bit more about our new progressive web app Konga easy So let me find my clicker This is not working Give me a moment One minute was working a minute ago Can I get a show of hands has anybody been to Cape Town before? Got a couple. That's good anybody been to Lagos before Lagos, Nigeria wonderful. I'm glad to see you there so If you'd like to see You know what we're building and what all these improvements to the web I urge you to come and visit us in Africa and see how these changes are actually affecting people in Africa It's a good start to the day I mean, I can use the yeah, I can use them. That's working great Thanks So what is Konga? So Konga is an online Shopping website in Nigeria leading one and we have a product catalog consisting of products from our marketplace So we have our merchant partners who who manage and an upload and manage inventory and orders, etc In a separate system and so it's consisting of marketplace products and retail products our own in-house retail products So we currently operate in Nigeria But our mission is actually to become the engine of trade and commerce in Africa as a whole That's our mission statement. So we have teams based in in Lagos, Nigeria and in Cape Town, South Africa And the main reason I enjoy working at Konga Is that through business service and technology we actually make a difference to people's lives We add value and we can see these changes on a relatively easy easy scale so we offer support to SMEs and Provide a wider selection of products to consumers and customers and we're actively making a difference to these people There's not a large amount of brick-and-mortar shops So for consumers to be able to have access to this to this product selection makes a difference I would like to extend a serious. Thank you to the awesome team of technologists based in Cape Town in Nigeria And I'm extremely proud of the work that they've done over the last couple of weeks It's been an extremely short period of time and I'd like to say a big thank you to them So I'm going to tell you a little bit about the Nigerian market and the network infrastructure there It's not normal not simple There's about 185 million people in Nigeria and of that number about about a hundred million internet users And this is a difficult number to to manage because Nigerians are known for multi-simming so they'll have some multiple SIM cards and the reason for doing that is because the telcos that Telecommunication companies have varying rates and varying network coverage. So that's probably not a very unique number But of that we have a high mobile penetration 80% and here's an interesting stat that 65 or 64 percent of All traffic in this in this areas is being served on 2g and actually about 15% is being served on the edge network and Which leaves a remaining 20% that's being served over Wi-Fi and 3g so you can see this is relatively problematic And I'll explain why in a moment So Nigerians fantastic people They're particularly price sensitive so they're willing to sacrifice almost any other aspect of a product in over price And and this is a source from a Kinsey So besides being price sensitive this obviously relates to being data sensitive and obviously doesn't associate a cost with data and These numbers are not particularly correct. I'm just trying to paint a picture here So don't don't quote me on these numbers But imagine if the the minimum wage in Nigeria about 18,000 Naira or more or less a hundred hundred US dollars per month And imagine the the cost per megabyte of data and of city It's point five, but I know it's actually recently it is coming down and I look forward to it reducing in further But the picture I'm trying to paint here is the fact that you know, there's a non negligible amount and a significant Percentage of that monthly wage could be spent on downloading our app and this is something we would like to mitigate So we also have mobile traffic very strong mobile traffic iOS and Android apps So besides that if you just look at our web traffic and we have a response of web web application Our current traffic is sitting at about sixty percent mobile or mobile web and about five percent Tablet and the remaining is desktop so you can see what our customer base is actually quite focused on mobile web So Why progressive web apps? I think it's actually quite simple. It's actually really really well suited to our To our use case so right now and traditionally, you know We've had about three and a half years of operation and in that time We've built a responsive web design a responsive desktop application and it works really well on Wi-Fi and 3g as you'd imagine But I guess if you look at 2g networks and the average transfer rate on our CDN It's sitting at about 250 kilobits per second Which is obviously not ideal if you're trying to download a home page for the first time and it sits at two and a half megabytes You can imagine how long this takes for our users. So that's the first area that pushed us into progressive web apps The native apps So one of the major problems is we're a startup and we're changing our business model pretty pretty fast so in these environments, it's very difficult to produce a Native app and expect that to last the duration of our business model So essentially be changing features all the time and every time we make a change to these features or to these apps we have to release a new version and With this with this new version comes an upgrade cost and our users are They don't want to upgrade. Well, they don't want to spend 15 megabytes upgrading the app so what we've what we've ended up with the result is a long list of versions that we can't really support and users refuse to upgrade so and Then finally these these native apps are pretty much thin HTTP clients So they do work under sort of degraded networks, but it's not really built with offline first in mind so We could have gone an incremental route or should we go from scratch and it just coincided it just happened to coincide with Something else that's going on in our engineering department Which is a replatforming and so at this moment We're actually breaking down our monolithic e-commerce application into a bunch of smaller independently deployable independently scalable Microservices, so this is actually the focus of our engineering department at the moment so We started with a complete mobile web redesign So just a design optimization and a lot of these improvements have come from this Redesign phase not not only from progressive web app technology But also from the fact that we looked at our design and said, okay, let's stop serving 800 kilobyte images to our users So the focus was on clean and simple UI as well as a slick customer experience The user experience so we design features and applications as a whole With with an offline first approach So we looked at a bunch of different areas of the application and decided to to build this with an offline first in mind So we started with an app manifest So that's the first thing we did when we moved to progressive web app And it it gives us the ability to add the app to home screen and to launch it in standalone mode And then as you can see it here, we have a little coach mark and and and an action called a call to action And then the next thing we did was added added a service worker And we use this as a network proxy and it gives us control over the network layer And we utilize the service the service worker to cache all resources and requests that come through it before before it hits the network And we use the fastest cash strategy this ensures that our app Content renders quickly and even during intermittent network connectivity or a completely degraded network So those are the first two things we we added an app manifest and a service worker The next part we we decided to use the application shell architecture to load all app static content and data on initial Load so we cash them and then only after they've loaded we render them to the user So the app the app shell architecture consists of html CSS and and all the JavaScript we we require to bootstrap the site excluding all the user data So other than that the app manifest a splash screen We also added our own splash screen that we basically show that until all of that that content is loaded and then Release that and render it to the user So the other thing we've done with the app shell is we've vulcanized all of these Components into a single file. So when the site loads we we we load the entire file first before you render it This process contact concatenates all custom elements into a single file So all of our custom web components as well as the polymer components and third-party Components they're all compressed into one file and something that we get out of it is very simply We get some extra linting some optimization as well as the minification of our resources the next part of Our app journey was looking at the background sync API So this really suits us well for for analytics and tracking of offline actions And there's another element to this that we're very interested in using and that's the the the idea to provide some sort of Offline check out capability. So the problem with this is Imagine I'm offline and I'm looking at a product How can I guarantee that that price and that stock quantity is available at the time that that background sync event happens? And it sends an action to the server. We can't really guarantee that so that's something we're working on We're looking to to innovate in this area and hopefully use background sync to provide a solid offline offline checkout experience So with polymer we pretty much went with a bare bones approach We avoided third-party libraries in order to reduce the app size and focus on speed We chose to use plain JavaScript. I think it's quite quite common knowledge that plain JavaScript can outperform third-party libraries so we didn't include jQuery or Angular or the like so we also declared we ensured that we only declared properties that we used and Try to focus on reusing JavaScript functions where we could so it's a pretty bare bones approach to polymer So some of the practices that we followed We tended to use reusable web components so we built some of our own custom elements and the challenge that we had was When we we had to fully define each element before we use them and control its scope and we often found ourselves In situations where elements were being forced to to be reused but ended up performing different actions that they were initially tended for That's one of the one of the areas that we struggled with and then quite simply we used We managed packages using npm and dependencies with power and We decided to lock down all of these dependencies To avoid introducing errors into our staging and production environments and instead built those checks into our build process And sort of manually manage that that dependency upgrade piece Then another thing is that we did was we well and we're still working on it is a custom web component repository that we managed with power and some of the some of the pieces that we've Figured out here. We hope to roll out to other areas of our applications and our systems So hopefully we'll be able to use these web components across projects and manage that with power So some of the major obstacles I think we've all heard about some of the challenges supporting safari and I think we've made some really good progress I'm not going to explain all of that today, but we will continue and I think we'll we'll probably get that right pretty soon and So one of the largest things one of the obstacles I wouldn't really call it an obstacle It's more like a challenge is is the learning curve of moving moving from normal web development to progressive web app sort of technology But even more so We had a resourcing issue. So all of our web developers are building certain projects at work And the only team that was available at the time to look at this was our native engineering team So these are experienced engineers senior engineers We've been working on iOS and Android for for a long period of time and I asked them to build this progressive web app So you can imagine their initial Concerns, but I can say they led this engineering effort and I'm very proud of what they've done making a switch from compiled Sort of native app environment to to web development and I think we've had a fantastic result come out of them So well done to them so we had some problems with Modularity of web components So you normally need to just define a style for for for a specific component and whether to do it You know for specific ones or global or global rules So this is kind of something that we struggled with and we're still working through and I hope to Figure it out over the next couple of weeks and then finally here's a swear word in our office at the moment It is cross origin resource sharing I think some people would probably agree if you're sharing resources across domains and across systems and different services It becomes extremely problematic. So if I could make a suggestion to teams that have that shared domain Within their systems. I'd probably spend quite a bit of time preparing to mitigate against against this kind of thing We always end up deploying something to production and or not to production to staging and it just doesn't work and You know nine times out of ten. It'll be a cause issue and I'd like to explain more about obstacles that we face during this journey But the honest truth is the obstacles the real obstacles we face were internal ones not really major obstacles moving towards progressive web Yeah So as I said late night Friday Late Friday night deployments we deployed our beta version this this last Friday just before I flew here And this is a sneak peek. We decided not to release to all of our public. We're actually a very highly transactional website and we didn't want to destroy All of our revenue at once So what we did was we decided to we handpicked very specifically 50 users and we're currently going through I guess we can call it an AB test so we're just presenting this new web application to to 50 of our customers and we'll probably add more as we go and We'll be gathering metrics and making changes as we understand more about the app and more about the users on the app So it's live So here's some of the initial results, which I'm extremely proud to present and the reason why I'm so excited about it Is because you can actually see these This effect on our customers and I wish I could explain more I think you'd need to sit in in some of our usability tests and you'd understand So I think one of the excerpts I'm taking from one of the usability tests I'd seen was a user he'd searched for something on our website and He'd seen a big list of You know an infinite scroll of products and as he was scrolling through these products He was he exclaimed I can't scroll like this It's costing me too much money, which is you know a serious indication of how sensitive people are with regards to data So the first thing that we achieved out of this is for for the home page Well, it's not very difficult if you think about that original image I showed you with seven images in a slider each at 800 kilobytes per image So I get again this is a large optimization came from a redesign not not only on progressive web app But a big component of it Is so 92% less data on initial load and most importantly 82% less data to complete a first transaction So, you know the mindset is I'm shopping on your site It's costing me money to be able to check out on top of the actual order order value So I'm excited to be able to present this to our customers It's not shopping for free, but at 82% less cost So So that's what it looks like as you can see I'm just showing you the the previous design as opposed to our Konga easy Progressive web app very simple very clean It's like a before-and-after picture and you know, this is another before-and-after picture It's not that we were actively looking at these metrics I'm assuming that we will start to to seriously look at these pieces But I just happened to catch it before and afterwards that I don't know why the page speed score went down I'll have to go and investigate what happened there But the page load time and this is obviously sitting on a wired connection I don't know where GT metrics servers are but they're they're obviously wired to get a 5.5 second home page load time And we've gone down to 1.2 seconds and more importantly a 2 megabyte home page It's now being served at 140 kilobytes and as you can see the 151 network requests Have become nine so this is this is something I'm excited about and another area that that that we're preparing for We didn't really struggle with migrating to HTTPS because we'd we'd been preparing to go to HTTP to which is a prerequisite So at this point, you know This is something that we didn't struggle with but I'd urge people to take that that that dive Specifically for some of the gains that are coming in HTTP to So here I'm going to show you five major areas of the application that we focused on in terms of an offline first experience And the first one is is is the catalog experience. So as you've seen in other applications It's it's possible to just cash all of these requests and and responses with service worker cash or even in the IDB database and so what you can see me doing here is browsing and What happens when I switch off the network is a little pop-up comes up and it says hey you're offline Click here to be able to browse offline and it takes you to your account section And you can click on your recently viewed items and and see all the products that you'd seen so it's aggregating all of the Catalog data that's been cached and representing it to the user The second the second feature is our wish list. So we've we've depicted it as save for later and The idea is that you've saved these products on your device You surely should be able to view them at a later time and you can just see me here Switching off the network and being able to navigate to to my wish list to my saved items so that I can shop Even when the network is down or not shop, but at least continue to to view these products so Can I have a red? Can I have the audience raise their hands has anyone ever added any livestock to cart? Okay well, if you haven't added any livestock to cart you can now come to to conga and This is not an uncommon thing actually So I've personally done so and had had livestock delivered with with a bow a bow tie delivered right to my doorstep So I'm trying to show you for a three three features here cart profile and check out and You know what I'm trying to show you here is I'll wait for it to move forward But what I'm trying to show you is here is it I'm in an online state I'm searching for a live goat and I'm presented with a response. Obviously. This is a search results I'd need to be online for that. I find my product and let's imagine the network dies and You know initially I wouldn't be able to add to cart if it specifically if it was an API call but in this case we've moved all of our logic client side and we're controlling the user experience and and that that entire journey On the client side, so I'm able to add to cart on this case add a goat to cart and I'm able to continue viewing my cart viewing viewing all that the Price and the state of my cart in an offline mode and it and right now in the specific screen grab I'm just showing you our current offline checkout I have mentioned some changes that are coming to that that checkout process But instead of being able to check out it sees I'm off in an offline state And it allows me just to call to order and we have a team of customer experience Representatives waiting for for offline checkout So what's next for for Konga easy as I said, we're in a beta mode We're currently collecting data and UX metrics and hopefully depending on what we find will make a few more last-minute changes before Before releasing to the wider audience in Nigeria We're going to continue to solidify our offline capabilities. I've shown you some features and we're hoping to apply that approach to all of the components of the application and Then as Owen said yesterday, we have started on our push Implementation, but we're going to implement timely precise and relevant notifications quite shortly The final part is obviously to continue supporting all browsers And I'm very excited to see so many vendors here today, and I'm looking forward to being able to produce a consistent Progressive web application to all of our customers. Thank you. This one. Hey That was actually great So up next we're going to have Samsung, which is a really good thing So the thing I'm trying to get across today at least anymore I think we're trying to get across today is that there's a very broad ecosystem at the moment for support for progressive web apps And people are actually building it today. So I think it's kind of interesting how how I think about building web applications and How different developers and different users in different contexts so like in Nigeria, for instance How they're building web applications to solve different problems than I ever think about which I think is a quite a powerful thing We are going to have Samsung up now the great thing about this is that Obviously, I mean who's got a Samsung device skin raise hand Maybe I've actually preempted some of that question. So it's pretty cool So if you have a Samsung device, you'll probably know that they've got their own Browser bit on there and it's if you look at things like static counter You'll see there's a massive increase in usage And I think this is a very interesting and compelling thing because it shows that the web is not just about Chrome It's not just about kind of Safari either as well, especially on the mobile platforms So it's a really interesting space to be in at the moment We ready cool. It's a really interesting space to be at the moment I think this is kind of a quite a powerful thing from our side is because any user everywhere can access great experiences And we're starting to see these things come through and I'm going to preempt some of it But you'll see some of the things that Samsung have been doing especially on the improvements of the web platform Leading the way and pushing the specifications and standards And I think they're going to have a really kind of interesting talk to see that, you know how the web is evolving So without much further ado, I'm going to introduce Daniel Applequist from Samsung and the W3C tag And then also a junkie song as well from the Samsung team So do you want to come to the stage? Wonderful music. It's like Philip Glass without the irony Okay, so I'm here to talk about Samsung internet with my colleague junkie song So first of all, just by way of introduction I'm working for Samsung as an internet as an ambassador for the Samsung internet project And you may have also heard my name because I am co-chair of something in the W3C called the technical architecture group Or the tag It's a group that Alex Russell also sits on and it's kind of a steering Committee for web standardization particularly around W3C stuff I've also been working on the web since before there was a web So like Alex, I also remember when you had to yell don't pick up the phone And and I've also been working to bring the web to mobile for quite some time So I'm gonna talk about some of the work that I did originally on some something called the mobile web initiative Which is from a kind of earlier era of the mobile web But I think it's important to realize that like mobile devices have been around on the web for a while And and we're really now coming into a new phase. I think Junki here who's gonna talk For most of the presentation is a core member of the Samsung and internet engineering team and he is also Editor of the service worker specification. So he's been working Within the progressive web app sphere for quite a while as well. So anyway, if you've been paying attention To yesterday's presentations, you may have noticed something When when people listed out browsers along with other great browsers out there There was also something else something that you might not have recognized right, okay, so Yeah So right so yeah, I knew about these other things but Really I knew about these other things, but what about what is this? What is Samsung internet? What's this doing here? What's this new logo that I don't recognize right? so we're going to answer those questions today and I and so I want to Tell you about we're gonna tell you a little bit about What Samsung internet is and why it's there and you know how and the work that we're doing on it And why we're pretty excited about it. Although since I am applying for UK citizenship right now I am legally prohibited from using the word awesome So I can't I can't say that about it, but it is really great So we're going to talk about that and we're going to talk about progressive web apps and in particular service worker Then I'm going to have a brief break for some philosophy And and then I'm going to talk about something else At the very end that's that's quite interesting to us and is particular of particular interest of Samsung Which is web and VR and some work that we're doing to bring web and VR together That you might not have heard of and throughout this we're going to be reemphasizing something here, which is our commitment to standards and in particular our commitment to implementation of Web standards and and our work that we're that we've been doing in order to promote web standards and to develop those web standards And and to really make sure that we have a web that's based on standards So first of all I want to talk a little bit about Samsung internet. What is Samsung internet? So our articulation of it is that it's a it's the latest web tech in an easy to use package Right, so it's the default browser on Samsung phones on particular Samsung Galaxy smartphones and tablets It's based on a chromium project open source obviously but What you might not be aware of is that Samsung is also a major contributor in and and commit her into chromium so we're actually We've actually got a lot of engineers based in Seoul based in Boston That are not only working with the chromium project But also working very much as a part of the chromium project and as a separate project that we have which is a gear VR browser This is our VR specific browser. It's based on the same core and I'm going to talk about that in a little bit So why should you care about Samsung browser? Why should you care about any of this? I? wanted to display a Graph which I which I think articulates why you should care so in Europe according to stock counter data Samsung internet is actually the number three browser Only behind well chrome and safari. This is for all mobile browsing So this is actually a pretty significant number and the number in North America is pretty similar so What yeah one once stock counter actually started Breaking out Samsung internet from the relevant chrome version. It became quite clear that we actually had a pretty sizable market share in fact beating out the previous kind of Android browser which includes You know which which is the is the kind of legacy device browser and The other thing that I wanted to mention is this a white so why is that why is that because? When people get their new smart their new smartphone when regular people kind of get their news Samsung phone They turn it on and they see a button that says internet and they're like I want to use the internet Okay, they they hit that and they start using the web and we want to make sure that that experience is up to date and is a As good as it can be they can get the best possible web experience including support for progressive web apps We want to make sure that that's in place So some other features of Samsung internet that kind of differentiate it First of all, we've got password keeping which integrates with the fingerprint sensor. So that's kind of in line with Integrating into the device intimate integrating into the device capabilities. We're we've got a focus right now on protecting users privacy or privacy and and that's Partly why we've implemented a secret mode, which is like the Incognito mode or privacy mode, but also we have a content blocking extension API in Samsung internet, which is quite innovative I think and I'm going to talk about that in a second there's an enhanced multimedia Experience and mobile to VR continuous experience. I'm going to talk about that in a second and we've also got custom tab support And if you want to read more Developer resources about Samsung internet and what differentiates it. This is the URL to go to so So importantly Samsung internet also Supports not only the latest and greatest Samsung devices, but it's also back ported to a whole bunch of previous generation devices That's something new for Samsung Another thing that is new is that updates are not linked to firmware releases, right? So now we have automatic updates that are rolling out Through the Google Play Store and that's that is best practice and that's something that we that kind of Changed with the release of 4.0 browser earlier this year, which also included progressive web app support and push notifications Right, so I just want to cover content blocking API This is a third-party content. This is a third-party API that basically allows third parties to build Content blockers, so we have ad block fast and crystal which are already in the play store And you can download those and install them separately We Develop this because there's a strong user demand for content blocking Applications like this and it's quite controversial But again, I think part of the reasoning here is to help users to protect their privacy and help them Protect their personal data because really when when you're talking about content blockers You're talking about tracking blockers mostly these days So Samsung's approach to this is to build an API and but to allow the third-party developer community to build these Blockers And finally before I hand over to my colleague I want to mention that we are actually building a developer relations team based in London, which I'm going to be working with and What we hope to be doing there is to support developers to support developers in Europe and other places to be You're going to see a lot of us speaking at conferences You're going to see more people from Samsung Internet kind of talking about progressive web apps talking about push notifications talking about web and VR talking about all of these capabilities and you're going to hopefully see us in more places around Open source projects contributing to open source projects, etc. Stuff like that. Okay, so with that I'm going to hand over to my colleague John Key who's going to talk with some more detail about Service worker Thanks, then Hello everyone, I'm John Geesong on Samsung Internet team. I'm working on the web platforms and standards So we have talked a lot about service workers yesterday, so it's time to wrap up So basically service workers solve two essential problems First of all service worker solves this live fine Service worker brings the reliability bits to web application and the development and the second service worker solves This one Like back in the days when we didn't have service workers We actually did that with push API so the push API try to define this push event handler in A page like navigator that set message handler will set this push event handler and then The event is kind of dispatch it to this page But when the page is closed then the whole context is gone So it was really it wasn't possible Actually, and here's another example The spec itself has been deprecated, but the alarm API in System applications working group did try the same thing with that like they Defined this own alarm handler in page context So service worker just brings the background service context to web applications So Samsung has contributed to service workers pack Since around like November 2013 So it has been around more than two years So we just worked hard and it was really a great experience to discuss discuss about this great API With a group and also it's really great to be here while providing these API's to enable PWA and it's it has been one of the essential API to well bring this happen and Well, not only the specs out of it Samsung also committed to Korean project So we implemented and shipped quite a lot of features our contribution to Chromium is not really limited to service workers and the specs, but Here's the list of features that we shipped And also I Well made a pro request to this is service worker ready repository But really had to do this earlier because we were there since this March But just in time it has been merged and it's really happy to see our browser as a well browser supporting service worker in this list and Here is the service worker feature status release note for our 4.0 release So basically we provide The features based on Chromium 44 With some additions and changes So please check this out in developer the Samsung.com website And here's a demo we have seen a lot, but I just want to show you how it works in Samsung Internet on the Galaxy phone Yes, this is offline wiki. I Try to search Gangnam style there and The caching is just triggered on the page by user interaction. So this is one usage of service worker and then It has shown up in the list of articles cache it and Try to make sure this is working offline with the reliability little bits and opens up again and it is just working there and Yes, and this is a first-class citizen to the native OS. So it's shown up in the test manager Yes, so this has been possible Well due to number of technologies including service workers So now let me just get Down to more details about service workers some key concepts. So let's wrap up So basically service worker is an event-based worker. So whenever Functional events is triggered inside of browser internals then browser spins off service worker So supposing there is a resource request From the page then browser starts up spins up the service worker and then in this own fetch event handler You as a developer have a chance to just look up Local cache and if there's a match of the response then it can be respond to with the client right away and when The event handling is just done then browser automatically terminates The service worker So just let's compare the lifetime of a service worker to some other workers like dedicated worker for example Dedicated worker is just created by calling this constructor then browser Creates a new thread independent thread to run this script and The lifetime of this script is just bound to its parent client So unless it calls the terminal a terminate API then it is just Will leave up to when the page is closed But on the contrary the service workers lifetime is intentionally designed to be very short So as you have seen from the the figure and the previous page Service workers is just spinning off by some browser events So let's say fetch event has occurred then it Creates an independent thread for service worker and service worker is running and dispatching some functional event there and then when the event handling is done then service worker and the browser internal internals terminate the service worker and The same thing happens with like a push API actually Browsers do all the smart things like just keeping service worker alive until Sequence of events are being handled, but the basic concept of service worker lifetime is like this and Let me just talk a little bit about The spec itself So here's a snippet of some spec text and I wanted to talk about service worker Registration and service worker concept. So this is some internal internal concept internal slots of those objects and Service worker registration is a state that holds some multiple Different versions of service workers and it is kicked by scope URL so there's installing worker associated with it and rating worker and Active worker. So when a service worker is being a active worker After after the successful installation then it starts to control the clients and Dispatching a browser dispatch all those events to this active worker And at the same time a new service worker version can be installed in the background and When the installation is successfully done without an error then it's going to be on waiting work a Waiting worker, but it doesn't really take the place of active worker right away Rather than that it just waits until all the clients that that are controlled by the previous active worker the income One active worker are being closed Then the waiting worker will be the new active worker and Well, the service worker itself is Running on the registering clients origin basically So there are those concepts implemented by browser inside and This is the whole picture of all those implementations. So the upper part of this figure is a script surface that you as a web developer Access to like there are like service worker registration Java script object and all the getters to get the active worker installing worker those things but well There are underlying browser internal implementations there Which implemented those internal concepts that I described I mean explained in the previous slide. So it all matches to those states and Whenever some events is triggered within browser then the actual threads, I mean independent thread is working and then the event is being dispatched and those tests are kind of Those tests can be accessed by the script surface. So this is like a big picture of the whole stack and Also, let's wrap up how to use service worker In a sequence like in order to exploit this we surely have to register service worker The installation is triggered by this registration register API and then on install is Getting dispatched by browser during this installation and it is really a good place to well pre-cache all the static resource and when it Becomes active an active worker, then you can handle the functional events and Onactivate is also on a lifecycle event that is dispatched Well during the installation and this is a place where you can just delete whatever cache objects that will not be used in the next version and We also provide the update API so you can explicitly call this and also browser Well triggers automatic update by every navigation and some functional events like push event So here's the sequence of registration Operations like from number one number two and number three there are three register calls in a sequence. So with the first one we create Our service record register the registration in the map With a scope being like slash bar The second one has different scope. So it creates another new registration But third one has the same scope with the first one. So in this case this service worker 2.js will take it take over the first one and here's the installation process. I just wanted to Explain how the state of those service workers in the registration changes so when The in-store process or update process is triggered then the first thing browser does is fetch this service worker script from the network and Evaluate this script. So assuming there are three handlers like on install activate and fetch defined by developer but at this moment the fetch event is not really being dispatched because this Service worker is not really an active worker. Yeah, so it's in installing state and then browser fires install then you can do those pre-cache in this install handler and All these things when all these things are successfully done without without any error then it's becoming an Waiting worker, which is in install the state But still this service worker is not really controlling any clients until those clients controlled by the income on service worker are closed and when that happens then browser this batch this on activated event and from this moment this service worker as Being an active worker a new worker and then all the functional events are getting Fired and here's also an important important concept to Wrap up like there are some main resource Request and stop resource request main resource request is the client I mean the page navigation or worker client creation So service worker does the school match with this main resource request So if they there's example.com slash index request then we Try to do the school match here. So there's a service worker registration match it to this specific scope and The service worker spins off and We all do all do this stuff then this Resource that returned by service worker as being the main resource for this page and Once this service workers associated with this page then the page it just leaves with this service worker for its entire life so if there's a Sub resource request to fetch an image While residing in slash image slash flower the PNG and Even though there's a registration that has more specific scope With this resource it just spins off service worker with Whatever it is already associated. So it just uses SW that jazz not the image slashes that SW that jazz Okay, so here are some patterns of APIs that we can Look at like this is insta handler provides the place where you can pre cache all the static resource so wait until it's the an event to extend the lifetime of this event and then you open up the cache and add all the stuff and the cache object and this is another use case like Cache on user demand. So this is the case What you've what you have seen in the offline wiki demo So it just starts from the user interaction when the user clicks on some part of the element then We do some prevent prevent default the click event and then open up the cache and fetch the dynamic contents and then Well, just add those contents. I mean those resources to cash So it's just start from the page not even started from service worker and This one is more general offline first use case What we have seen quite a lot like on fetch event you can respond with some resource that is passed in this API and what we do is like Open cache object and then try to match the local cache first And then if there is a response, then we just respond with that with that result. Otherwise, we go to the network and Well update the cache and also respond to the client at the same time and this is Where you manage your cache versions like on activate also this is an extendable event so you you just extend The event and get all the cache objects there and the filter whatever you will not really Require for your next version of the service worker Then you will just explicitly delete all those objects And this is a push API example so with this one Also, this functional event is an extendable event. So Call wait until and then open up cache then fetch whatever data for this mailbox then this example just will do show notification with the first occurrence of this email list and When user collects on this notification, then you can do this like open window Operation So here's the obligatory Well, Jake Archibald picture and you can check out all those use cases in offline wiki. This is great site This is really obligatory material in different sense So What comes next to pwa so we are now here and then well we kind of hear quite contentious discussion around the user experience about how user perceive pwa in a browser So we are experimenting how to just enhance the user experience to to this Installation or keep better the keep is a verb that Alex mentioned like a year and a half ago And I really like this verb keep because user just starts from his tap his own her own tap and then keep this app and then it's just getting a more More capable applications So that will be kind of an interesting discussion to Just comment and also on the spec side. We are not stopping here So we are trying to just finish the version one of service workers Around the third quarter of this year and at the same time we are discussing about some new features For free to like foreign fetch and cache API enhancement those things so Well, I really want to want us to think about all this stuff and Really want to make the web dominating mobile as well as in desk desktop world so thank you for listening and I'll hand back to then I've got now something that Now that you've had this kind of like deep dive into service worker and how service worker works I thought it would be good to kind of like rise up for a second and And have a bit of philosophy right and the kind of philosophy that I'm talking about is web philosophy So I by the way if you haven't seen existential comics I really recommend them go to existential comics and and check it out very very good stuff So the part of web philosophy that I want to talk about is thematic consistency I was involved in 2005 In creating something called the mobile web initiative the mobile web initiative and the mobile web best practices that were produced From the working group that I chaired Which was the mobile web best practices group were really from a different era of the mobile web It was from an era where Most phones did not have and could not have very capable browsers on them. They had compact HTML browsers They had very very cut-down browsers and we needed some rules to give to content providers to Give them kind of best practices for how to build content in that environment, right? So many of those best practices actually don't hold true to true today And I would argue probably aren't needed. We don't need that kind of thing today However, there is one rule which was our number one rule that or number one best practice that I think holds True today as much as it did in 2008 and that is the idea of thematic consistency So to quote the best practice Is to ensure that content provided by accessing a your eye yields a thematically Coherent experience when accessed from a different from different devices And this is something that we called the one web principle so One web is a bit of a philosophical concept, right? It is not necessarily a technical concept, but it is something that arguably knits the web together And it's based on the idea of the URL Being the key Technological or architectural element within the web and I think this relates to something that I've been hearing about I've been hearing a lot of questions from web developers who have asked well now that you're talking about progressive Progressive web apps and moving everything towards progressive web apps and offline first and all that kind of stuff Do we throw everything that we knew already about responsive web design out the windows? This is totally a new thing and I would argue and I think that we have we have to make that this the case that progressive web apps must be built on Responsive web design principles So this is a this is something that's additive on top of something that we already know which is how to build great responsive Web applications, which is the current kind of best practice around how to satisfy the thematic consistency best practice and It's all about in my view respecting the URL So it's about when you go to a certain URL, you know that you're going to get the same content You're you know, you're gonna get something similar or something thematically consistent no matter what device you go from be it a phone be it a PC be it a Tablet be it a television Refrigerator whatever you've got in front of you. You're gonna get something that is consistent And philosophy okay I've only got one more thing to talk about and then I'm gonna write and then I'm you're not gonna see me again Well, you are gonna see me for the panel And that is web and VR and that's something that is that Samsung is particularly interested in because we have this thing called the gear VR headset Which is basically like you take your Samsung phone you plug it into the front It's a bit more complex than Google Google cardboard Sorry because it also involves their extra sensors. There's a bit of a touchpad But basically it's the same kind of same kind of concept and it's a partner. It's in partnership with Oculus so so What we've done or what is to produce a browser Which is actually a separate browser that sits within the Oculus environment within within the Gear VR and that is based on the same core. It's also service worker enabled and A lot of the focus here is on providing a viewing experience for immersive content for 360 degree content that kind of thing and so We've enabled by using specific video metadata for these for 3d content for immersive content to be able to just come right up into the Browser that's sitting within the within the VR environment And We're doing this because we want to enable this kind of experience where you could which I'm calling like a mixed browsing Experience or a continuous experience where you can be using your phone to do kind of regular browsing You're reading a news article for instance. You see that a news that at the bottom of this news article. There's a Oh, there's a 360 degree video associated with this or there's an immersive experience Associated with this so being able to go straight from there plugging the phone into the goggles and actually Experiencing that immersive experience. That's something that we want to enable and that's that's built using this this extra browser or this separate browser, but What we've enabled is this kind of a Experience where you can go straight from one to into the other and it and it goes straight to what you were looking at before so I Won't go into too much more detail on that because we're out of time but In fact, I'm going to blow through this as well The the only other thing that I wanted to talk about is that we are working on a web VR specification with Google with Mozilla and that is Enabling extra apis a sensor apis and the and the ability to to know whether or not your phone is hooked into such VR goggles And all of that is being worked on in a W3C community group which we helped to form and Hopefully we are going to be seeing a workshop coming up later this year W3C workshop on web and VR So watch the space for that. So anyway, thanks very much for listening And I'm going to hand back over to Paul Hey, hello everyone We just need to do some like live like small logistical changeovers. We have to change the The machines over for presentations, which means that you've got me for a minute. Maybe two minutes. Is that exciting? Thank you The three people it's brilliant. It's great I'll buy you drinks later. It's cool. Oh Thank you. Yeah, so That's only seven people that's good Yeah, so we're doing this small switch over and I like I kind of like the story that Samsung's presenting about being able to build these Like build sites that work in multiple browsers that solve users problems, which is good I do have a question though like who's who's interested in in VR VR at the moment a couple of people. That's good, isn't it? It's it's an interesting space. We were we've got like this weird Oculus Rift I was like, what's the the HT5 is it we've got one of them in the office It's it's pretty good and I just was walking around and I just didn't know what stop pulled the cable out and I broke the cable And apparently you can't replace the cable on the top. I got into a lot of trouble for that It's pretty good. One of the things I was going to say is I really like the fact that you know Conger they talked about their experience building, you know a progressive web application But it was like a brand-new web application, right? It does exist on their mobile part of site They did refactor their responsive design site and kind of saw some really good gains off the back of that I think that's incredibly a good incredibly powerful story But it like one of the things that I think Andrew said was Actually, we only enabled it for a relatively small percent of our users because we don't want to cannibalize our existing traffic And I think like this is a concern that a lot of people have is you know Building a full brand-new experience is a really hard experience thing to do It's a really hard thing to actually convince Stakeholders your business managers your directors everyone that you should go and do this thing And I I think from yesterday we were saying that we you know, it's it's good to build these incremental experiences You don't have to go with a full progressive web app to start off You can provide great user experiences pretty quickly and kind of good user wins pretty quickly And I think that's one of the things that booking.com is going to talk about today like so booking.com They deployed and they've deployed some things a service worker, but they're a huge site, right? Like they're like in the largest hotel commerce or travel commerce site in the world And you can't just deploy a whole brand-new progressive web application today And you run like for them at least and just turn it all on and you run into a number of different problems because Uses all over the world using different things different devices different contexts for how they're using their using the experience And I think that's what they're going to talk about today Like they they might have had some real issues like it's not plain sailing for everything at the moment And I think everyone needs to understand like that is potentially, you know, you it's you have to think about how you did Sorry. Wow. I speak really quickly and I tongue-twist myself And I think that's one of the interesting things is like you can deploy these experiences But if you're deploying at scale you got to really think about how you deploy them and how you manage them as well So I'd like to just quickly bring up Jesse Yang from the booking.com team and he's going to talk about how they've deployed and how they've interacted with service workers at scale Good morning everyone, thanks for being here. My name is Jesse Yang I work for the mobile web team of booking.com. I was in charge of developing all the sub-workers related six features for our mobile website and First of all, I want to ask how many of you have used the booking.com before Well, that's a lot Thanks guys and how many of you are from outside of Amsterdam for the Stevens Day? Oh, did you use booking.com for your recommendations? That's a small number, but so wise choice for you You can never go around to book a hotel for in Amsterdam via a company in Amsterdam, right? and booking.com was first founded in the Netherlands in 1996 and After 20 years, we now have over 1940,000 properties worldwide and We it's day there are over 1 million room lights reserved on our site and apps and In terms of the mobile websites It was first to build on 2010 and after six years as you can see the look has changed a lot And I bet you the code has changed a lot too But all these histories and numbers Contributes to the promises we need to take into consideration when we build our Saints for service workers and the progress of web app. First of all Our website is already highly optimized. It's converting. Well, it's Serve the business needs and there is just no way we're going to show it away and to build everything from ground and second we have a very large team that is still growing fast and We don't want to slow things down just by introducing a whole new way of work Second we search we have a very large code base that is serving the websites from since the beginning of time like from since 1996 of course and We have a very convenient a be testing infrastructure. We use everything. We use that for every features we put on mine and we just have to use that for Even new features like service workers. That's why it's very important to Be progressive and that's the whole idea of progress web app, right and Then the team sat down and Looked into the real possibilities the real potentials we have for some from service workers and progress a web app and also What we can really achieve with it and Ideally you should have a very extremely optimized performance with all this fancy new patterns and infrastructure and Technologies service worker can do you can do pre-cash in app show and even stream downloading and better A lot of people have talked about this from these two days and also you can have Fantastic user engagement experiments. You can have full screen That's opening your websites from the home screen of users. You can have also push notifications to Better we engage your users and for us for our business. It's about to check your reminders Review invitations. That is when you check our hotel We invite you to review to other reviews for the hotel and also it's Something else like abandoned baskets when you browse some hotel, but you didn't book when you want you to come back and finish your booking, but We have a very limited scope for what we can work on Service workers. We currently only have Secure.booking.counterman. That is what we use for booking process and post booking pages all this user security sensitive data pages and We don't have HTTPS for the main website. There are such results on hotel pages That means we can't really experiment experiment much in those pages Second is for those user engagement things, it's really hard to See what the real impact is. Our current experiment tool They don't have that much of metrics for our users offline behaviors How would you analyze those behaviors? How would you decide they are good for your business? It's challenging for us and also For those push notifications We are a little bit concerned what to push For those of you who have used the booking.counter. I bet you have All these experiments of receiving many emails from us, right? And those And and even push notifications if you used our apps So that's why we don't really want to annoying our users even more with a push notification from the web And then there is another idea versus reality check that is implementation wise Implementation wise you should have web components and for client-side rendering and all the fancy things that's making your websites a single page app and you show also Ideally have your users always logged in so you can put some more personalized stuff for them But we don't have We can't really go full Strengths for all this things We're still we are a traditional web page Which means it's simple robust and yes you friendly that is some that is just some traits you can't Easily give up for just for the for making your things more technically Exciting and second we use still use jacquery. We are not ashamed of it and We use this use jacquery and all the small pieces of libraries that we have to write a very fast a bit testing and experiment and that's making the whole or Ways of our work is quick and dirty is the norm But so we are trying still trying to improve the quality of our code, of course and Then for the users we have mostly last mini bookies and new users that is Who is who will do all in very no frequency purchases? You don't stay in the hotel every day, right? That's why we start to think about the real small list of viable steps for our Experiments with service workers what we can really achieve with it and what is the meaningful Features we can push to our users First experiment we tried is to make our booking confirmation page accessible offline But so without telling your users that they can access it offline The reason is that we wanted to play safe But we still want to have a meaningful feature online and just to see how user interact with it We you with this experiment we get the idea of What the traffic size is like how many percentage of our users actually have a service worker? Available and so we are also trying to clear the potential roadblocks That is how to integrate service worker codes with our existing current code space how to make the build process more smooth and also we are just Of delivering this to users to observe if there is any side effects like in any aspect and Actually, we did see a few side effects and We saw much more page views on the booking process Which is not to the page we install the service worker They are the pages under the same secure the booking.com domain, but People still visited those pages much more. We started wondering why is this and then explanation would be users opened the confirmation page More often because they can't reach cash now and then they've navigated to other pages But well still can't say for sure whether that's true or not and we did also see an increase in page No time Why is that when we service worker with all this performance? improve and Everybody else is talking about why we see an increase in the page no time their Explanation would be we didn't really Add any additional cash for things But because every assets is already cashed by the native caching mechanism of browser When explanation might be service worker could consume some CPU and somehow make the browser slower And we didn't see any inconclusive results on conversion impact That's why we didn't really put this experiment full on and the way it went through the next experiment Next experiment is more meaningful to the users. We're kind of telling users to Add they did their last to me last last latest booking to the home screen so they can access their bookings even more easily and this home screen icon will opens the last scene confirmation page from cash and It opens very fast. It works offline and It's will always be the latest booking users made say if you book another booking after you add this Home screen and you open you use that to link again. It was still open your latest booking And for this round most users just ignore this banner because it's pumped out after right after users made a booking Next to it's your next next iteration. We added to this explanation banner before we show the prompt This is down with the before install prompt event I think If you have played with app manifest there should be you should be aware of this event and It's quite straightforward to set up So we use a click on this banner. We show this a later prompt with this approach user gets a better understanding of what it is and Actually a very high percentage of people who clicked on the banner will accept the instrument of home screen icon and A lot of them who added this to the home screen will actually use it So they are not just accepting something. You you you promote to them. They are doing this with a conscious and This approach also Lead to more people added the home screen than previous round where we show the prompt right away With with regarding this, I want to talk a little bit about about this engagement check. That is something you need to pass when you Want to display this prompt This is a flag you can turn on in crown Which will allow you in Dave mode to always show this prompt But in real in real life real users will only see this prompt when They pass some kind of engagement check and that criteria is defined by Google It is said to be the user have has visited your site at least twice With not with at least a five minutes between visits At first we thought it's requires you to leave your site and come back again, but actually it doesn't users can still Get engaged Pass the engagement check in the first with it, but still that lumber is This kind of this kind of limitation makes us Really hard to control which type of users can see this feature We still see a very decent amount of people who Should have seen the prompt didn't really see it We don't know it's whether it's really because they didn't pass the engagement check They didn't meet met the five minutes requirement or whether because some virgin of crime doesn't support this feature at all Or whether it's because I'm Bender some custom ROMs of Android to disable it disable this feature for good and that's making it harder for us to really Examine the real impact Then I want to dive a little deep into the code we wrote for service workers and This will show you how powerful service worker can be just by intercepting the network requests the first story we tried is The first one I want to talk about is consolidating canonical URLs So the idea is different URLs for the same resource should fetch the same cast right or even ideally fetch the same request We have all these kind of different structures of URLs That is actually pointing to the same same We have language either in the estimate doc or either in the parameters of queries and That's why we used to this SW toolbox middleware to write our own middleware to handle this A star blue toolbox is a library way built by Google Chrome team. If you haven't Check it out. Do please check it out. It's it provides all this Cash patterns you have and it's very easy to use so we created this let's work first enhanced Middleware which will just which is add a additional use canonical option to the options and If there's two we will check whether the request the URL has a canonical URL and That is just a function. We wrote on the client side just do some Regis matching and try to figure out. So what's the canonical URL for that specific? URL and then if it's different to then the request you are we just find a new request with the canonical URL and Then another story we had is to Homescreen link a very decryption if you remember What we added to use as home screen is a link to the latest booking and the latest booking We'll have different URLs right if they made several different bookings And that's why we you need to and for the app manifest you can only add a Static URL as they start URL of the home screen icon. So that's why we do this kind of a redirection for the start URL and That's redirection will always redirect to use as latest bookings So this router intercepts all the requests for the confirmation page and we use a reach that open that confirmation page each time a 302 a director response was forged on the client side and stored in the cache and Then the last confirmation in Endpoints is used for the start URL and every time user with a set URL it will go through a service It will go through a cache only in service worker router and it will always Try to look at this 302 director from the cache This allows us to make the home screen icon work as a shortcut for users bookings But actually it is not recommended to do so now Simply because the Chrome team has decided that this is not the best experience for the users And it's will feel weird if you have a home screen icon. That's just opening something in the browser as a shortcut Starting from crown 51. I think if you set the display modes in the manifest to anything else other than standard non or full screen you will get this error and then the app banner will never show up and And Then we have another Solution for pre-caching Traditionally for pre-caching you will have to like miss to all the URLs In an array or something and you pass that Via a message to service worker and that service worker to Fetch all the content but what we did is to Fair fire and Ajax requests from the client side page and add some kind of additional requests header to it then the service worker get to read that header and Tries to figure out whether this is a request for the cache for pre-cache if this is a request for pre-cache the service worker tries to Matching those requests from the cache and if the cache exists then the request will never fire If the cache doesn't request then it fires a request with no see with CEO arm s mode set to no CIS This will enable this Ajax request to be able to work even You request something outside of the domain and That's some ideas we had for this Service worker thing then I like to talk about some final thoughts we have for service workers And and for us it's always about finding the best approach fits your business needs. We are a very large website We have a lot of people working on the same thing. We don't want to slow people down That's why we have to go into this small step Approach and Gradually adding things up and then you need to be creative on your solutions I guess some of the Redirection and the things are quite surprising to you guys if it is but if it's not so it's also okay and We kind of Because we can't try web compilates we can't try polymer then that's why we start to we think about so what else we can try for that and Our general experience with service worker is even if we are trying something so small we still see Sometimes the API is unstable. It's changing and it has some Added limitation for the next form version and that's you don't know you have then you have to research your experiments Which prolongs our experiment circles and that's kind of frustrated to us frustrating to us and But we still think the future looks bright for service worker itself and for us as well so many opportunities still awaits us to explore and We do want to try the app show architecture even that's we are not a single page web app We wanted to try to use this streaming API to to return users a app show screen when they load the page and from there The app show screen will be returned from the client side But we will stream the real request from a server That's the plan we want to try and also we want to try Predictive loading at this when for example when you select a room in the hotel page It often means you want to make a booking so that's when we decide that we can Reload assets for the book process and We also of course are very open to build a offline resilient app And Once we have a GPS deployed for all their Webpages we have then it will become possible and of course notifications although it's kind of annoying to some users We will still want to See the real value of it And so the message is clear just to experience and learn even if you are a large company who has a lot of restrictions Yeah, thanks a lot. I hope you enjoy your stay in Amsterdam Cool. Thank you. Um, I think there's I owe an apology first. Thank you for the talk, by the way I do own a little apology the schedule. There's a mistake in the schedule. We've made some last-minute changes We have one more talk before the break. So we'll be breaking out. Let me get the time 11 30 So we'll do that in a second. I do actually want to say there was there was I find that talk really interesting because One of the things that is is interesting for me is developer feedback, right? We want to make sure that we're building the best platform possible with other browser vendors and and with you developers as well Like there was the issue about the standalone mode manifest like like when you when people raise issues publicly Browser vendors listen, right? I mean if you find something is frustrating and you have a bug to link things to and you have frustrations with Kind of the platform or within individual implementations Like sometimes people think like develop like browser vendors don't listen to like public Outcry, I think it's probably I was gonna say the word outcry Just public comment and criticism and and everything as well One thing I would say is if you do have issues with say for instance chrome and implementations in in chrome Like CR book is where our engineers live, right? Like if you file issues in CR book, you know At the you know, they will get triage They will get looked at and if people kind of start starring and raising kind of more issues around it Then that helps us prioritize the work that we should be doing and I think one of the questions was like with the standalone mode It like the standalone mode and full screen and whether it gets added to the home screen That's an open discussion that we should be having in the public and I definitely encourage you as developers To actually talk about this in the public because it does make a difference to us on the platform So yes, anyway, I think that's an important message to say file issues tell us raise issues like publicly as well Make us and keep us and like keep us on our feet and our toes and the interesting thing actually with the last talk was we have Like a little back channel for the staff and the speakers is it's like oh my god We're not explaining things very well So I think we've just opted ourselves in my my develop relations team as well into a lot more work as well So that's good We want to make sure that you as developers have the tools and documentation and guidance that you need to be able To build these experiences One thing and the most important thing I want to get to you now before just get to the next talk is that you know We've seen like like multiple browser vendors starting to say you take chromium or blink and then wrap that wrap that up And then deploy that and put that into the browser That's a great thing because like if we implement service worker It's available to all browsers that implement blink But that's not necessarily as healthy as you might think for the open web Right, you want other browsers with different and different completely different implementations But compatible implement like but compatible implementations as well And I think that's why you know, it's important that we have Mozilla on coming up as well Is because we are two completely different browsers Implementing the same specs to try and make you know great user experiences for developers So with that I'm going to get off stage because you don't like speaking to me But I'd like to introduce Ben Kelly. He's a platform engineer at the Mozilla team. All right. Good morning Let me just full screen this Thank you for having me here and I just want to say before I start how great it is to see so many people here Interested in building for the web and on the on on mobile web on them on mobile It's really encouraging and I really appreciate Google organizing this event and inviting us here It's really great to see so my name is Ben Kelly. I work at Mozilla And I'm going to talk to you today about what we're doing to support progressive web apps and the mobile web in Firefox See if the clicker works it does I'm on the DOM team the document object model team, which Doesn't sound very exciting, but it it actually is there's always something new a new surprise It's really a bunch of C++ and maybe rust developers Trying to write APIs and tools To help web developers to help you guys provide a good experience for people on the web Being C++ developers we often get things wrong but in this case with progressive web apps and The set of technologies and API is we really get the sense that that the there's a lot going right here And we're very excited about it and Working hard on it, so I guess this is a way of background a little bit I joined the service worker effort and the DOM team a little over two years ago I'd never implemented a web API before And my my new boss Andrew was like you know once you join service workers, you know It's been going for a little while, but we want to ramp it up So a lot a lot of work there, but it's not too hard. So we should be done in September maybe and that didn't happen and It's right. Well, maybe six more months. Yeah, that's a long time a long long time that didn't happen either and Eventually we just said please wrong button, please stop asking us and We don't know when we're going to be done. There's it's a very complicated API and I give credit to the people I work for that they gave us cover to do this because there was a lot of pressure coming from all sides so Finally we were able to enable it to ride the trains as we say to go to our release channel December of last year and it shipped in firefox 44 in January of this year. So a Year and nine months or thereabouts. So it's been a long road. I Think it was worth the wait To get to do it right Some things we spent time on was security as I'm sure you're aware The web is built around the same origin policy We use URLs to tell if the resources save for a site if it's if they're coming from the same domain the same origin One way to look at service workers is a great tool for lying about URLs You know you ask for a URL from site x and you give it a URL the content from site y and this is If your security is based around URL checking you need to build a secondary system for this To maintain the same origin policy That being said we have since changed the spec so that the URLs actually get flowed back from the service worker to the outer bits of the browser and so no one has implemented this quite yet Chrome or fire fire firefox, but I Think it'll it should help make the security story a little bit easier for browsers coming along Later implementing it next that they don't have to completely build a separate tainting system in their browsers So hopefully that'll speed things up for the next Set of browsers Also, we found that You know there was some room for improvement in the specifications Junki Jake and Alex have done a great job But it's one of these things just the way stuff happens where you write an explainer you get an initial implementation you translate into some spec text which is Almost precise, but not quite you can't execute it and they're invariably bugs in the spec text And when we came to implement it from the spec we found for example had to race conditions and various unexpected behavior that I Would pester Jake and Junki about and that's all been fixed now In the spec and again, we hope that this this took a while But we hope it will speed implementation in later browsers and helps maintain compatibility between Chrome and firefox today We also took a lot of time Working on tests the blink team Let me back up a lot of browsers historically we obviously have a lot of automated tests that run most browsers Typically have had their own test suite and Gecko, it's mokey tests. I don't quite know what the other browsers have but the blink team did a great job writing for this new Test framework called web platform tests. It's a standard place in the w3c That lets us share tests between browsers Wasn't quite easy to import because they still had we're using some of their own infrastructure, but we imported that upgraded it to the standard web platform tests and wrote a lot of new tests and it's now been uplifted back to Back to the the main repo and I can I'll just hop out of here for it So you can you can go and see like there. There's just a ton of Tests and there this isn't even adequate. We need to keep adding more but This Getting these tests is the best way to make sure that these features work across browsers And it's great now that we have a place where we can share tests like that We also did a lot of documentation whenever we implement a new API our We have a team of people who go and document it on Mozilla developer network So if you have questions about the API you can find it there We really want this to be a resource for the web not just firefox. So if you see Anything that needs to be fixed you it's a wiki you can fix it or let us know and we will get it fixed We also had a group of engineers Salva de la Puente and some other engineers Salva's here today if you want to talk with him Some other engineers built a great resource Called the service worker cookbook. It's just at this site. I'll blow this up so people can see Service work E rs. I'm not quite sure how you say that so we call the service worker cookbook But has a large number of examples again not using any frameworks You if you want to learn just how the service workers work directly you can work through some of these examples And it's a varying levels of detail the bee means beginner. I means Intermediate and the a means advanced so you can see there's a number of different use cases here. So we're trying to Help with the developer outreach as well So all that took time but shipped and The great news is we're seeing people use it This data is pulled from Our beta developer edition and nightly users by default we don't collect The sort of telemetry data on our release population unless they navigate through the advanced menu and click please collect more information on me Not many people do that. So this is largely beta developer edition and nightly so the absolute numbers are not as significant as the trend here And there's a clear up into the right trend and it's accelerating Which is great When I work nights and weekends I tell my wife that what I'm working on is important and it's great when people actually use what we're working on because Means I told her the truth We've also been working on push Which shipped in Firefox 44. This is the web push push notifications. We also have a should be to push, but I'm not talking about it here But it only shipped on desktop just for now We are working on Android support, but there's a lot more operating system level integration that needs to happen here We're really hoping it would make 48, but just before This meeting at Last week I got some news that we found some additional bugs. It'll probably ship in 49 It's more likely And you may be saying Push on desktop is that even useful most people think of it as a mobile feature? Well, I use it every day. I probably spend too much time on Twitter But when I'm supposed to be working I have Twitter close and I can get push notifications For messages and mentions it's a feature that they have relatively buried in their settings currently I think it's a little bit of a soft launch, but it's Works every day, and I don't think I'm the only person using it because again the trend here the absolute numbers Are not as important, but the trend is definitely up into the right and increasing So that is also good. We're seeing adoption, which is I think Sign of a good API Or a useful API Some other work we've been doing on push Martin Thompson and engineers from the other browsers have spent a lot of time standardizing the back end when you know right I Believe Chrome just shipped support for the standard web push API previous that I believe they're using GCM Google Cloud Messaging, but now that we have a standard. It's it's something that makes it easier for the back end and the way Browse sites can integrate with those servers because it does require this extra Server integration on the back We also built an input a reference implementation of the of the server which if you're interested in this sort of thing the back-end servers Describes all of our architecture if you want to know how a push message actually flows completely From when you post it all the way back to the browsers to the two users You can read through this documentation. These slides will be available after so you can see the links You probably wouldn't run this server yourself unless you're building your own browser, but That that's possible too Again we have documentation at MDN and the service worker cookbook I showed earlier has a lot of examples for push as well Let's see So next I want to talk about dev tools we I'm gonna break out here and do a little bit of a live demo and In the beginning we ship something that was fairly bare bones because we wanted to get service workers out and That's interesting. Oh, I don't have any service workers registered at the moment interesting So this is the hazard of live demos, right? There we go Very similar to I think it was chrome internals service worker I can't remember the exact name of the equivalent in chrome, but you know fairly bare bones HTML page for managing these things We now have support for worker debugging. So originally we did not have this But it Currently it's really only usable for like debugging fetch and push events We were still working on support for in debugging the install process, which is obviously a big use case but Let me show so instead of about service workers You can now go to your dev tools menu Click on service workers and I'll bring up this new about debugging page. It will show all your service workers I'll just open a new window here for my slides, which have a service worker registered you can see now that my I Have the service worker for my local host is now running because it has this push and debug Buttons if I push debug It will Open a full-screen debugger Because I'm in full-screen mode and you can see the service worker that I'm running And let me sorry. This is probably small for you guys And I will blow this up. I'll set a break point in the fetch event handler Pull out a full screen for a second and I Can now Reload this and it will break Sorry And you can do the things you would expect to do you can inspect the request you can see that well, I did a Reload so it's requesting the other Resources with no cash to revalidate everything you can see that it's a navigation You can see what the refer policy is all the stuff you expect to do So I will close that go back to my slides here And these are screen shots of what I just showed network panel I will Actually, I think I'm just gonna use the the screenshot here but network panel you can go and Excuse me Network panel now shows if a resource comes from service workers you can you can see here That in the transfer type if it came from a service worker it will show you Again, we ship something bare bones You would get lines in network panel, but wouldn't really show you where it came from or what happened You just see nothing for the the the timing we are still working on adding Timing traces so you can see how much time it took to start the service worker But again, we're making progress and we can iterate now We also have a storage inspector which This one I will show Again, you may you may go to dev tools and be like where is my storage panel? Well, you have to go into the tools here to enable it This checkbox here. It's not on by default currently, but if you come to Cash storage you can now see all the resources you have again a night a nice feature You can access this stuff through console using the API, but this is just a little bit nicer Let me move on to the sort of a next big feature features that we're working on Sort of what we had been doing Use the clicker again Manifest and installed a home screen. This is something people care about a lot Particularly the prompt I think Nolan Lawson He said at one point that I think it was him He really like people like this because it's almost like the browser advertising for your site. So it's an important feature We've been working on it a lot Marcos Kassaris Sorry if I'm mispronouncing his last name has been working on the manifest spec He's one of the editors and he's been working on the platform support and that is largely implemented and ready to go However, we're not shipping yet because we still need to integrate it with our product Firefox for Android and Firefox desktop the product side is a separate team. So we're working to make that product integration happen now It's taking a little bit longer than we'd like, but it is coming. You may have seen some screen shots on Twitter and I believe this was shown at Google I. Oh, this was an experiment we ran in Firefox for Android To show what a prompt might look like just to see how people would react I just want to so this is something we could do and I Just want to highlight because I think there was some miscommunication around this. This is this is just an experiment It's not shipping yet. We're still working on it And we really need to get some designers to sit down and figure out how we want to do this Do we want to do a problem like this or do we really want to do Something more like Alex suggested in blog posts like ambient badging We need to figure out what what the right answer is for the users And the other interesting thing about this is this demo or experiment did not use manifest at all It's installing the home screen as a bookmark using the The link and meta tags in the document. So this is actually a nice example of Progressive behavior here where the feature isn't there and yet it's still providing a good experience for users So just to make clear we don't have a release date yet for add to home screen. I just wanted to clear up any confusion there But we are working on it Background sync is another feature. It's Well into development actually just as I was sitting over there Fernando Jimenez Moreno again, I'm probably pronouncing his name wrong. I apologize Landed not landed, but he submitted all his patches for review and he has patches that are working and so Excellent I was actually expecting that to happen later because he's getting married. I have Visions of him sitting at the church like uploading patches before the ceremony But so I'm very I'm very optimistic to the soul this feature will land in the Firefox 51 timeframe Assuming code review goes well Which it will and he this is a demo he He made I was going to try to live demo this, but I thought that Using non standard patches and a custom build in a presentation was tempting the presentation gods too much. So here It's showing that when when it's online and you register for a background sync you get the note You can get it immediately If you're offline and you get a register for background sync You don't get the event immediately until it comes online and then it fires. So it's pretty simple demo It's not terribly flashy, but it works and again. This is something will probably ship Mainly on desktop first Supporting Android will be there, but it's not going to be tightly integrated at first with the operate with like I believe Android has a background sync task or process that Native apps can integrate with we will we will eventually integrate with that for features like this, but the initial Feature launch probably will not Let's see and Then finally there there are a lot more apis that we're working on that are related Forgot I had the clicker here And I'll just go through these quickly I just We're doing a lot of work We've shipped the full cache api Including things like ignore search. So if you're doing a cache busting parameter search parameter You can use ignore search in your cash dot match to easily Ignore that cash busting parameter We've shipped request that refer and support for the refer policy In Firefox 47, which is our current release In our next release in about four weeks request that cash will will Reach release channel and this will let you you won't even have to do a cash busting parameter. You can just do fetch URL cache no cache to To avoid even the need for cash busting parameters We're working on SRI integrity support for fetch So you can set integrity value on fetches and then in your service worker, you'll be able to inspect that integrity value Those patches are are mostly reviewed should land soon Stream support streams api Has has begun. It's probably gonna land in stages with Here java scripts streams the ability to say new readable stream First so we can get it in the tree in spider monkey and Run the tests on it and then we will land our binding support afterwards. So we're probably Hoping to get the js streams into 50 and then 51 52 will have binding support and fetch body stream And I'm really looking forward to this getting stream specced into more api so that we can use this in more places than just fetch And we've also begun work on storage api, which is the api which lets sites request persistent storage offline so if it's your Hotel reservation or your airline, you know boarding pass the site can say don't delete this without asking the user because The user is going to be upset if it's gone because they're going to need it So this is just started. It has a lot of user experience elements to it to in order to manage storage. So We don't have a release date yet for this I think I just want to leave you with the Mozilla cares about the web and we care about the mobile web and we're We're spending a lot of time and effort investing in that and Trying to provide you with the tools that you need to provide good experiences for your customers. So We're really looking forward to see what you guys build and if you have feedback or Concerns or feature requests Reach out to us I'm here that today solve us here. We also have brian clark as a product manager for our dev tools team is here also Come and find us. Let us know what you think where you'd like to see the platform go and i'm really looking forward to Seeing what you guys build with this stuff. It's going to be great and These slides are online It's about five megabyte download. So I wouldn't do this on your mobile necessarily but It does offline with a service worker once you download them first So if you want to follow any of the links or check it out. They're available there And it's on github too. So thank you very much. I appreciate time today Hey, it does work. Hey, thank you for that. Uh, yeah, so now it's a break I'm gonna get on stages to tell you it's break. It's a break half an hour. We'll come back I do encourage you. We've got a lot of questions. I've come through for the moderator panel already Make sure you definitely keep submitting questions if you have more questions, especially thinking about the browser compatibility and issues around that as well Submit the questions and then we'll hopefully get them answered. So back here half an hour. It's good Cool So welcome to totally doing tips. This is an episode on dev tools We're going to talk about our newer progressive web app tooling Yeah, so the reason we have to do this is we record an entire video episode and then everything changed It's Tuesday. So dev tools has changed Right. So the resources panel has now been replaced by the shiny new application panel So I'm currently on a progressive web app. This is smaller pictures and some of the newer stuff that we We let you preview include like your web app manifest Yeah, so basically web app manifest is kind of if you've ever built web apps So you've had to do icons for Different devices and browsers and you had to put in lots of link tags Manifests is jason file where you can put all of that stuff in one separate resource And the browser will only go and grab it when it needs it Yep, so we summarize everything from like your name your short name through the different theme colors and background colors that you're using We show you your orientation chosen in your manifest file and then just like preview all the different icon sizes You might have set up. So I've got like all of them because I'm crazy You are crazy. I'm crazy. It also lets you emulate as a home screen if you click on this little link here That's just like the experience where it'll show you. Okay. Well, what do you want to name this thing? So the reason this is important is because whenever you click on add to home screen What it will do is it will go through all of the criteria that chrome looks for Um to basically decide whether it's going to show the user the banner or not So it'll be things like does the web app have a service worker? Does it have a short name? Does it have theme color? And if any of those criteria aren't met it will print out an error to the console just saying Yeah, you need to have this and because it's not there. I can't do at home screen Cool. So the next thing we're going to take a look at is the service worker panel So debugging service worker has been like historically really really painful Um, and I think dev tools has nicely evolved over time to make that experience a little bit sweeter Yeah, this is definitely like the best version of it It's it's just really hard when you're starting out to understand what is going on when you're doing this stuff for the first time But I think it's definitely like the nicest version so far Yeah, so we're going to quickly walk through all the options here So the first one is an offline checkbox and basically if we go and we refresh you'll see that the app is working offline This just emulates offline in the same way that the network throttling drop down will let you do noise Fairly useful when you're testing offline support with service worker The next option is update on reload which forces your service worker script to update on refresh So the reason this is a super handy is Before this existed what you'd have to do is you'd make an edit to your service worker You'd save it you'd go back into your browser you'd refresh And once you've refreshed the page it will still be using the old service worker because your new service worker Will be grabbed by the browser it will go through an install stair And the new service worker can't take over the page until the old one's gone So when you check update on reload what it's doing is it will unregister the old service worker register The new one and once the new one's ready to go it will refresh the page so then the page is using the new service worker So it's one checkbox with there's kind of a lot of stuff going on behind the scenes and it's super useful Next up we've got bypass from network which will bypass your service worker script and load resources from the network The reason this is handy is when you're not working on a service worker and you're working on other files You don't want anything to be poured from the cache. You just want to be using the files that you've just changed Then we've got show all and show all will basically show you every single service worker that's registered Um because we've got like an increasing number of sites and apps using this you might find this a little bit noisy I just say you're very unlikely to ever want this until something like foreign service workers come in but Yeah, we're just we're just letting you know that it exists Today unless they change it tomorrow, but it's it's here today at least What else does this let you do? Okay, so you can update your service worker. Um, there's a push Option as well. What does that do? Let's let's head over to your demo. I'm going to guess it's going to do something with push messages Yes, you're so bright path you Right, so this is a push demo matt wrote a while back We're going to go and we're going to enable push notifications and your demo worked this time Yes, right. So what we're going to do is if we click, um push it's going to emulate a push event You'll see that we get a push notification. This is kind of interesting because this is the first time I've actually Seen or like tested this myself in canary and they basically added a new feature where it's it's populating a little bit of data in there Um, which is kind of super interesting Slightly weird with the fact that you can't determine what the data is But it's awesome that it's there because it does mean that if you wanted to check what data would look like when it comes in Your service worker mean it's now something's there. It's awesome. Sweet. Um, what happens if we click send a push via xhr Does anything happen? It should do it should do Did I actually oh, I didn't there we go I don't know you did a gcm just took a while to kick in okay, so there because there's no data It's just like a super generic. Hey, thanks for sending this message. It's sweet uh, you can also go and click on the Little name. Oh, you've got a minified service worker. Yeah, man. What would eat? Okay, let's let's go to someone who hasn't done that And if we click on source you can go and you can check out the uh source to your service He just doesn't care about users data Um, so the reason this is actually super cool Is the fact that you can now add breakpoints to your service worker like you would any normal javascript files So when that Code gets executed in the service worker It will actually stop the service worker from running and you can start debugging stuff like you normally would with dev tools Just noise sweet. You can also so you can see that we've got like these activity indicators for the status So green means that something is active and it's running Um, you can stop your service workers. We can go and do that. They'll say activate and stopped You can focus your clients. So we're currently focused You can also hit details and it'll show you in line any of the exceptions or error masters you've been getting So the one thing that used to exist here that's been removed is you should be able to have like an inspect Button that you would click and it would open up an entirely different dev tools just for service worker I still kind of like having the two dev tools one for the page one for service worker But I think the dev tools team are trying to Get everyone to work just out of the one dev tools and change different contexts So in this case all the service worker logs would show up in the one console and you select different Um frames within that so it's kind of interesting. That's the only thing that i'm Anxious about I guess But this is quite a nice way of at least servicing just the errors because I'm add I'm just going to click clear and now all of our problems have gone If only life was that simple only life is that simple Clear storage is basically the best thing ever If you're developing any non-trivial progressive web app and you know, you're trying to support offline with service workers You're maybe using um, you know storage mechanism like index db your local storage or session storage You've probably run into the situation where you know You need to manually go in and clear all of your different storage mechanisms out And then head to different panels to unregister service workers. And it's just it's this whole super tedious thing Yeah, I've ended up writing helper scripts that I just drop it to the console to delete everything. It's Yeah, it's annoying when you get to that point. So in an effort to make matt gaunt's redundance There's now like a clear site. Well that escalated quickly There's now a clear site data button. Um, I think the label for this might might be changing The button is still there. Um, basically what this does is it almost resets the world for you Which is kind of really nice. Um, it does all the things it says above Like it will unregister your service workers new storage and clear out your cache api storage And yeah, this does seem like an obvious feature But at the same time it hasn't existed for the longest time And when you start working with service workers, you realize how quickly you just get into a mess and you just want to Reset everything and the old solution for that was to just develop an incognito windows. So this is super welcome This is this is so nice We were talking about cache storage, uh because this is this is was resources panel You can still go in and debug all of your different storage mechanisms that includes the cache api So in the case of my app, I'm using um swp cache. So I have all these entries for someone like, uh, Paul loose his voice memos app we go in here and you'll just see that there's like there's an entry that's got all the different Files listed that he's got cached in the cache api. I wonder why the response is empty It's all it's all perfect. It's all perfectly perfect And you've also got other options in here like frames. Um, don't just say that like it is no one knows what frames is I I I don't know what this does anymore. It's it's basically a breakdown of different things This is a list of assets that are different assets. Let's let's assume that it does that Maybe maybe this gives us something to do another episode on next week on Totally falling mini tips. What is frames under applications tab? All right. So, uh, I feel I feel enlightened Uh, that is that is the application tab. Is there anything we're forgetting you've got device art on the screenshot That is also new device art. So, uh, canary dev tools now lets you like preview device art for um for a few different devices So we've got the nexus 5x in there. I think the six might also have device art It does not it does in the very very latest version I think so it's coming. I think it's coming But basically device art is awesome. Just lets you like see what it would maybe look like on an actual device And it adds in like the navigation bar at the top and yeah, so you can you can go in you can go in here and like Get your little navigation bar in Um, I have asked for us to like take the theme color into account. Oh, yeah Because you could you could do that. Yeah, that'd be really nice. And then it'll yeah Assume that by the time you've seen this, maybe we've convinced them and this is already out to date And if not raise issues, maybe we can get it Um, all right. So that that is the application tab Hopefully you'll find that a lot of this stuff makes it a lot easier to Develop and debug your progressive web apps. That's it from us. Thanks for listening. Bye Welcome to this supercharged tldw I'm paul if you didn't catch the live stream with me and serma last week Well, basically we built a side nav. Let me show you what we built So you've got your standard app bar here and click on this Sidebar and click on the background or you can dismiss it with a sort of drag gesture like that awesome stuff So let me show you how we built it But before we do that as usual we're going to head over to yep, you guessed it theory corner join me Hello, welcome back to theory corner. So this is what we've got. We've got our page and we've got a container element The container element is going to be the home for the side nav and the background What we're going to do first of all is we're going to put overflow hidden on this We're going to make it take up a hundred percent width and height So it's got overflow hidden because this is going to transform out to the side and we don't want any scroll bars So we put that in place The background we're just going to transition its opacity from zero up to one and we'll set it to have a transparent black color Or semi-transparent black color in the background The other thing is this side nav We want this to slide in from the side So we need to have will change transform on it so that it gets its own layer very much like we do with the swipeable cards And then we can transform it in and out. We're also going to need some Buttons for bringing it in and out. We're going to have to have some touch events so that we can do the dragging stuff All cool. Let's go back to reality Welcome back to reality. Oh, yes Yes, reality. That's where you'll find us today Pragmatic to the end code Okay, so the markup and the css is pretty much what we discussed in theory corner. We've gotten a side We've got a few js classes here so that we can pick it up in the javascript But mostly it's pretty much what you'd expect. There's a button for closing. There's a button for opening We've got the title here for the side nav and then we've got the list of the side nav content In terms of the css Here's what we've got for the background You see it's actually done with a before sudo element and you can see that it's got a background of black with an opacity of 0.4 We switched on will change opacity because we know we're going to be changing the opacity. So we're going to say will change opacity Didn't say we'll change pasty That would be a different thing entirely We'll change opacity and then we can set a transition of opacity with that curve That looks quite nice 0.3 seconds nice and quick Then the other thing is when we set the side nav to visible which we're going to do with some javascript And we can say to that before that we want you to fade up from a no pastive zero to an opacity of one The same is pretty much true of the side nav itself Here it is and you see it's got a box shadow So we're going to nice a little bit of shadow on the side The interesting thing is we have to transform it by in my case 102 which sounds really odd But the reason is there's that shadow and if you just transform it 100 to the left You still see a little bit of shadow on the left hand side. So we just take it a little bit further solves that problem The interesting thing about the side nav itself the one that comes in from the side Is that it has a separate animatable class? The reason is I want to switch that off when they're doing the drag motion and have it on when they're doing the Automated transition from the side in and out So we use this class to basically say this is kind of it's doing the automatic transition Or when it's off it's going to be used for the dragging Cool the JavaScript is over here And it's the same trick as last time a bunch of event handlers that we bind on with this If you haven't seen why I do that go back and watch the swipeable cars tldw explain pretty much why I do this approach to My event handlers you don't have to take this approach, but it works pretty well for what I'm doing So we bind all those on and you can see here. We've got the show and the hide Now here's an interesting one I actually say that if you click on the side nav the containing element the container from theory corp I want you to hide the side nav Well, that will work Kinda But then if you click on something inside the side nav Well, that's kind of weird because you clicked on something in the side nav and it's going to dismiss The way we get around that is we basically say the side of itself That's going to hide it but any clicks inside we're going to Call this block clicks function, which you can find down here And block clicks all that does it stops the propagation So it's almost like cancelling the event now you don't want to do this all the time You only want to do it when it makes sense for your app and it makes sense in my case. I think so That's all good So I think all that's really left is to just have a quick look at that drag motion Now if you remember the drag motion looks like this we can click and we can drag And if we just come away from the side a little bit and let go it dismisses the side nav So let's see how we code that in Well, we have our on touch start here and basically because this is bound to the document I basically say if the side nav isn't open Bail don't hang around so we we're going to call this anytime somebody hits touch start But we only want to deal with this if the side nav happens to be open And what we do very much the same kind of deal as the swipeable cards We capture the start position and we copy that across to a current position And then in the touch move we basically figure out how far we've moved and then we can apply a transform in A kind of game loop and update function, which you can see here There's the translate current mind the start and then we apply it as a transform If you've seen swipeable cards, this is all sounding very familiar. I'm sure but it works and it works really well The last thing is on touch end. We basically say if you've translated just a little bit to the left Hide the side nav that works out really well for us. One other little thing to note is this In terms of the on touch move by default you'll get that throttled back in chrome So you won't get them every frame unless the very first touch move event has an event dot prevent default on it So what we do is we calculate the translate And we say if it's less than zero as in you've started to move it We prevent the default and that means it will get all the updates from then on So there you have it. That's the side nav pretty straightforward in terms of these things But this works really well. It works at 60 frames a second even on a mobile device If you haven't caught the live stream against about an hour long It's in the description below. So have a look through there and have a watch of that if you've got a spare out Again, it's usual kind of stuff. You see all the bugs. You see all the chat You see all the discoveries and the kind of discussion that serma and I had don't forget to subscribe Done And I'll catch you next time if you like me like clicking on things you can Hit the subscribe And there's the live stream Hey folks, welcome to totally tooling tips season three come check us out We're going to be talking about progressive web apps some of the tooling around them on first visit We've got a relatively fast time to first meaningful paints module bundling accessibility Do you know what the top four things to look out when it comes to web accessibility are? Uh No, I can only think of two like only think of audio and then visual So there's visual hearing mobility and cognition the first episode will be out on april the 27th So subscribe to youtube channel check out season one and two before season three starts Which will be happening soon. We promise that season three is going to be equally as mediocre at seasons one and two Chrome 51 makes it easy to know when an element enters or exits the viewport with intersection observers You can make the sign-in process way easier with the new credential management api And you can reduce jank with passive event listeners. I'm petal page Let's dive in and see what's new for developers in chrome 51 Intersection observers let you know when an observed element enters or exits the browser's viewport No more jank inducing calls to get bounding client rekt or listening for scroll events To use simply create a new intersection observer Provide a callback and an options object Then tell the observer which elements to watch Boom when the element enters or exits the viewport the callback is fired Check the description below for a link to a demo browser support and more Creating remembering and typing passwords is a pain in the neck, especially on mobile Chrome 51 supports the credential management api a new w3c spec that allows your site to interact with the browser's credential manager and federated account services like google and facebook improving the login experience The api has three key methods navigator credentials get to get the user's credentials and initiate a sign-in flow Store to save the user's credentials in the credential manager And require user mediation to disable automatic sign-in There's more info about the credential management api including a demo and links to the docs below Did you know that simply adding an empty touch event handler to a page can make scrolling janky? Less than 20 percent of touch events call prevent default canceling the scroll But because the browser doesn't know if it'll be called or not it has to wait for the javascript to finish Chrome 51 adds support for passive event listeners Allowing you to declare that an event listener won't prevent a scroll making it easier to eliminate jank These are just a few of the changes in chrome 51 for developers Check the description for more details And be sure to like and subscribe so that as soon as chrome 52 is released. You'll know what's new in chrome So here we are next to a rainy river our natural environment for working on codes Yeah, and this one's going to be on dev tools. So it's dev tools rain and boats nothing synthetic about this in the slightest Right. So today we're talking about responsive toolbar now for a while in dev tools We've had device mode which has been useful for like building responsive sites This is sort of an evolution of that tooling So um, some of the new things we've added our support for this little toolbar that lets you toggle between like different Mobile sizes like medium large tablet desktop But we've also improved at device emulation So if we switch over to nexus 5x for example, you now get a little bit of device artwork From android showing on the top and the bottom Yeah, and then they've added an extra little drop down where you can then say you want portrait with the navigation bar Which is like chrome's URL bar But you can also do portrait and landscape with keyboard as well Which is kind of nice, especially if you're doing like form input just to see how it renders Nice little step up as well. That's kind of cool You also have a drop down for being able to say, you know, how much of the viewport you want to occupy for your actual device preview And we've got this little menu with a few extra options in here So one of the things that you might have tried out before is the show media queries Option super useful It basically like parses out the media queries in your page and you can just see what your page looks like at different different media query breakpoints I already have some beef with this because if you try and use it as is After you've selected a device it does nothing But if you go to the responsive mode and drop down and then click on it, then it starts working What are you talking about matt? It's all perfect. It's all perfect. No, it needs an issue Okay, you file a bug on that. Um, other things that we include in here include Show device pixel ratio so you can switch up your device pixel ratio settings Uh, another thing that I usually have on is network throttling So if you're building um to be resilient against like really flaky network conditions or li-fi or anything like that Network throttling can be useful to toggle on Um, usually you can have on like a good like 3g or 2g setting and that just means that when you're loading up your page We're going to throttle that connection and and it'll show up It'll load up a little bit more slowly than I normally would It's kind of nice just having that there because otherwise you bury it in the network thing It's way too easy to leave it on some random setting start looking at the elements fixing other problems It's nice just having it constantly there in the responsive mode You can also like let's say you're building an app like a progressive web application And you've got service worker support. You can also switch on offline To try out your service worker and just make sure it's working well offline It would be great that there's just like one button like disable internet. Yeah, just it's just the airplane icon That's all you need done Folks, uh, we're asking about ruler support. So we've got a show rulers option there wasn't there before it's now back You can check that out for you like rulers Some of the newer stuff that we've been playing with Are the ability to trigger add to home screen So let's say you wanted to emulate your application manifest experience You can click trigger add to home screen It'll bring up this message at the very top that says, you know add this site to your shelf to use at any time You can click add and it'll bring up a little prompt that says, okay Well, what do you want to customize the name of this thing too? And the idea behind this is that it's supposed to like just emulate that add to home screen experience You get on android Yeah, and it was kind of annoying because before you'd have to do on your phone You need something to download the manifest file And normally the reason you'd want to do that is because if there's a problem in your manifest file and chrome wasn't happy It wouldn't pass it and it it's just tricky to debug so having this like Hard way of just saying going download it and pass it is Insanely helpful when you just do it As a reminder, we also have another little panel called sensors which lets you go and emulate different sensors So like you can emulate geolocation coordinates device orientation And you can decide whether or not you want to emulate touch based on your device or whether you want to do force touch force enabled Yeah, that's about it for The responsive toolbar and the new device mode. Yeah And welcome to supercharged now. This is a kind of tldw last week I did a live stream with surma where we made some swappable cards Now you probably recognize swappable cards from things like google now where you just kind of take a card And you just miss it and you actually see what i've got on screen. This is what we ended up making There you go. You see just miss it and all that kind of good stuff Now the idea is if you've not got an hour to watch that live stream back Although if you can I would recommend it and you can find the link to that below If you can't that's exactly what this is for I want to step through the things that we learned the things that we did Um, and just so you can get an insight into what actually went into it So before we actually get started what I want to do is I want to step over to the theory corner Oh, yeah theory love theory and what we can do in theory corner is discuss what we need to do Join me Welcome to theory corner. You can tell it's theory corner because there's some theory in a corner Now this is what we have. We've got the cards. You can tell it's a card because it says card The cards have will change transform on it. The idea I have here is that we want each card To be transformed around the screen and so we want to give each card its own layer The compositor then can move those around with the help of the gpu So long as we stick to transform opacity and we set will change we 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 can't serve a crap experience to 25 percent of my people And so I did something that you were kind of told to never to do I used apcache and now Don't yell at me yet. It is a douche bag. 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 want people to be able to hack URLs I'm not ashamed of my 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. It feels really rude inviting you to get off the stage only to come back in a minute, but Get off Cool. 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? Yeah, go i'm i'm i'm going to be the fool who tries Don't do it. 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? There was somebody else had a question right behind you think okay just throw throw the microphone back there won't hurt and and I think it might have to be the last question because Yeah, uh, hello Um, I have a question. 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. So whether you're a web developer or your c++ developer you have options Okay, tell me a picture five years out for the next billion. 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. Who knows what form factor it will realistically be You know, maybe it's gonna be like, I don't know some crazy thing you wear on your toe Who knows? 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. Uh, I mean you you guys can all come off if you want to stay on if you want to stay on if you Want that's good. 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