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.  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.  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.  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 w