GFM2019-Web-In which we make loading disappear with portal and friends-Kenji Baheux
So. My name is Kenji I'm a prog manager on Chrome I work on making Singh loads fast and so, this talk is sitting, between. Like. To lunch it, was supposed to be a talk that fits in 30 minutes but I did it once whereas Yusuke at yes and we run over time so we. Moved a couple of things and then I was told that I actually have 40 minutes so. Against. Like anyone's good advice I put a few more things in it and so I no longer know how long this is going to take but. Hopefully, you choose this track and you're going to be unlearned before the other track we, say that goes so. This talks about new, api's that are coming, they might be behind the flag they might be an origin travel or it, might be an urgent one soon, so, look, at this and theme of like what is coming next, and those. APRs, are designed to create experience, that are seamless, vailable. An instant. All. Right on the web we spend a lot of time waiting for things to load, and. Especially, true, if you compare to the kind of user experience you have on native apps when you browse content on native apps it tend to be more kind of like instant, seamless you can't see that things are loading but, on the web it's it's, like very different right you can feel that oh this is different like something is wrong and there, are many reasons for that. And. The fact is a ninja it's actually, worse on. Average like, there, is 70% of the time being spent watching, at the blank page that you saw in Jack's talk and so. That's not very useful right and so. The main reason why this is happening I think is the way we tend to load websites, so. Let's take a look on the web if you click on the link this, is going to D be the typical, user experience that you will get to see the. Browser, is going to fetch the resource. For this like the successive, navigation, and while, it's doing that it's going to show this blank page right then, you wait and you are left wondering is this going to work is this going to fail like, today you've seen how bad the Wi-Fi can be right like, I was trying to make a final like changed my slides and didn't work and, and. So this, is very frustrating, and. Then eventually it's going to start to render.
But Most of them this is not the end of it because, they are elements, that are coming, on the page late and they are going to push to things that are already rendered and so if you were to trying to use a page typically, you, will hit the wrong thing right and so. That makes for a very frustrating user experience. So. Can't we do better what, if for instance we had the ability to do experience like what's on the screen an, experience, where there is no wait time an, experience, where there is no transitional. State you, can see that everything, is proceeding smoothly you, really feel like this, is an app right it's not a bunch of pages. Okay. So let's take a look at the implementation options you have today at your disposal, you. Could start by saying okay I'm done. With the web I just want to go like native apps right and sure, you could do that in deliver a top-notch user experience, but, the problem with that approach is that it's. Kind of like building an experience that only a subset, of users need. Or won't, I mean. Installing, an app is a, lot to ask for most of your users right, whether. It's about like, the. Time it takes to get to the store and wait for their like 30 megabyte of native, app to load that's. Why not going to work for everyone and also, it's. More commitment, because in term of storage, it's, more than just like a website and you, also have to agree to my, permissions, out of the gate and so, that's not going to work for everyone. So. One you could still like, consider building a native app for your mostly your own users if you, really want to reach new users you. Have to get a you. Need a presence on the web right and so, on the web you have essentially two options the, first one is a multiple, page up or NPA, and the, other one is a single page up s.p.a let's. Take a look at SPF, first. I'm. Not getting my speaker, notes so this is all like, by heard of Riya is going to work so with, an SPI essentially, it, kind of looks like building, a high-rise and reason. I say that is because you have to rebuild a ton of features that are provided, by the browser, things. Like history right. You have to management to manage your own State or scroll. Restoration. If the user goes back you. Have to restore the credit scoring position, yourself all of that is provided, roser except.
If You do NS PA all of that is gone right. The. Other thing that this does is, that it. Is. Creating, a lot of dependencies, between all different pieces of the app because everything, is monolithic, right and so in the user. Developer. Productivity it's. Not a great story. Like. For instance if I want to change something I'm trying, to impact other teams because everyone, is using the same codebase. Right. And. Then the other thing is when. This app grows, and, as PA just like falls apart like the code begins, to become like too complex you have to learn too much stuff and so, your solution in that case is to split it into, different, into. Different SPS, and so you're back to square one because as, soon as you navigate between different SPS. You, have the per user expand that you saw just at the beginning of the talk. Okay. Let's look at what MTA has to offer, so. Personally. I think going in PA is kind of like building a Tom because. Everything, gets its own house which. Maximize, their productivity because they don't have to reinvent what. The browser provide, right, and they, can also more, freely tweak their product, they, can make change to their product without having to worry about what's, going to happen for all the pages. Okay. But, in peers are not without downsides, right. Overall. An MPA does result, in higher, friction user experience, because. Everything. Is a navigation, right if you want to call from, that house to that other house you have to take the cow maybe. If you don't have a care you have to you to call herbal it's, like a navigation, right it's not going to be great user experience. And. Personally. I feel like the best kind of experience, that we should aim for is one that is looked like this like a seamless experience where if, you tap on something it reacts right out of the way you, have the sense that the, app is there to to. Help you get things down right. This is an example that exists on Android it's, using, an API called share element, transition and here, idea is that you reuse an element, like. In this case this particular contact, to. Transition, to your user to, the next variation like providing more details and all of that and so this is how you make seamless experience, and so. Would. It be nice if we were able to achieve the same kind of experience, on the web especially, with an MPI, the. Good news is that. It's. Still early days but, with. With. The app of the broader community we, think we've found a way to deliver this kind of user experience all the way it's. An early API that we call poor loans and we. Gave a teaser during, last year's CES and we also showed off our vision, for how, we want to take this further at. I/o this year. And. So. We've, heard a lot of feedback from partners, and they are super excited about this API and, the good news is that the team made a lot of progress and so, we are very close to announce, an origin trial for the same origin use case and so, I'm going to watch you through the. Whole portal API. Okay. Before I explain the API lets me briefly, explain the key concept behind porns so, Pollard is all about enabling better navigation, on the web and. The early days all the navigation, we're down three simple, links right the, prime with simple links is that they are not generally appealing. And. The. Friction of navigating, to a page is always going to get in the way right it's not a great user experience. Then. Snippets. Came around right like, you see, that a lot of like search page and all of that it's, still a link it's like more appealing because it does have like a nice visually, provides more details, but, overall this is not a much better user experience, like. First of all the information could be out of date and it's. Still going to be a high friction of like a navigation, right. Then. After that what we hung and so, the friction of navigation, is still there right it doesn't really change the, user expenses itself.
You. Can call the portal activate method. So. That you transition, user to this new page and. So. This is how like an instant navigation, can be done with polo, despite. Being an MVA. Ok. This looks much better right but. What if I don't want to force my users to navigate away. Ok, you might be wondering like what's the point of that right I swear. This is going to be useful so bear with me. So. Beside activate, portal, has, another, powerful API call. Add up predecessor, as. You can tell from the name after being activated, you. Can use this API to, retain, the page that activated. You right this, is the predecessor page it's the page you would go back to if you, were to press the back navigation, button right, let's. See how you can use this in our demo, so. First of all you can listen to polar activate event and. So. This is where you would check whether bar, dot HTML, got activated, and the. Interesting, things here is that it. Come this, this event come with of other predecessor, function right and so you can use that to, retain the page that activated, you and you. Can also append. It into, the document itself and so, what I've done here, is I build. Something that looks like this right there is BA. Adopting. Through activating. Frou-frou, adept in teeny bow bow. Activating. And then it's on and so on so on right so you can create this like interesting, loop of things right. Make. Sure it's kind of like pointless like, it's kind of like funny like this cat right but, there are more interesting, ways to put that in practice, so let's look at an example that partner. Office bill force so. This example is, an operation from Yahoo in US they. Are using a depressor to smooth out to user experience of reading, breaking, news so. Like. As the name imply when, a breaking news happen. You're, probably doing something, else and so if there was a link at the top you. Might be wondering what to do like with, my email or something right and so you might want you might not want to click on that link because today you're going to be navigated, away and you will lose your context that's not great user experience but, with Polo's you can design an experience that retain. The context. The user worst just like behind it and. Let user quickly, go back to whatever they were doing after, they don't waiting the news so, this is like a more practical, use of this API. All. Right and, then that need. Okay. I can sense that fever like trying to like starting, to getting it right and so. I really, wish that after, this talk you go play with it it's available behind, the flag you can already build interesting demos with it but, before you do, I. Want. To make sure that you you are aware that there, are things to you care about when you use it right. So. First of all as I mentioned polo does not come with any animation, and so, it means that it's up to you to, do great, animation, it's.
UX, And. If, you want to check more details you can click, on it and then it would call the activate method for the poll on and so you navigate to the page that has all the details of that product. One. More this. One is done by Yahoo Japan News and they. Actually build a whole new experience over on ponens, so that's also something you can do you can have your legacy product with the current navigation and you can, build a whole new experience with polo so, in this case this is like a stack of highly, visual, cards. That user can swipe through and if. You swipe to the left, you. Can deep dive into the article right and all. Of those things are pages, it's, an MPA and yet, there is no absolutely no loading, to be seen on the screen so a very fancy user experience, and. The best part is that you can actually go to this link here turn. On a flag on Chrome Canary and see. It for yourself now. And if you go view source you can probably like find out how they actually did it so. That's pretty neat. All. Right there is a lot more example, I could show but we'd, be probably running over time even if I have 40 minutes so, I would like to you to thank all our partners, for their feedback we got so far all amazing demo that they built so, thanks, to them. All. Right so have you seen Paul or Willie like allows you to be a little very compelling, user experience, but. Is it really, enough like, should I just end my talk right there. The. Answer is that what. It's true that like. Paul. Yeah. Polar, can help, you build, like wedge user experience, there is no guarantee that users are going to find it right especially, if most. Of the users already have like built preference, in terms of how they when you use their device it, takes a lot of efforts to discover new things and try new things so. What. Do what can you do in that case essentially, two things the, first one is that you should try to lower the amount of effort it takes for someone to try something new and the. Second one is is lower. The amount of effort it actually takes for trying to something new but, ideally, to zero right you shouldn't make it very like low friction for, people to trying something new and so. I'm going to show you a bunch of like product that we have going on to help on that front. First. Let's start with a way to make the first allegation instant. Like, for instance what, if by the time you, got on the bus or the train for your commute you already had like readily, available content. On your device will. Not be amazing especially, here like the network can be flaky, sometime it's slow, that's. Pretty interesting right I see some smile, in the audience or maybe I probably, hit a common pain point and, so. There is an API that we call predict Bhagwan Singh that is designed, to enable that sort of use case. So. With. That not only the experience would be instant, but it will also be available because. It's on the device right if you don't even have a connection it's already on the device so you can just enjoy your content without having to worry about it and. Some. Of you men won't have okay well why. Loading, things and events is important. And a couple of reasons for that the first one is that the, fastball, by connection is not always guaranteed, even markets, like friends, or the, US or Japan you. Can see that 4G is not always 4G, right.
There Are still a lot of people on squeegee, or maybe they actually have 4G, but it's slow so. This. Is not like something, that is. By, going to happen anytime soon and in. India you can see that less than half of the, 4G, connection. Is actually 4G, it's small candles Fiji. And. There are a few reasons for that I, think, it's pretty interesting to, you to see how like the price, of data coming, down drove. Usage, and you. Can see that if you're like me and you wake up at 4 a.m. then. You are you're going to have a great time right the speed is amazing but, after that it just goes down and down and down, so like, 12 the day the speed you will get is going, to get worse and so. This is showing 4G, for a, ninja, in a couple of like big cities right. The. Other thing is like, beside reaching things in advance because the network is not always available you. Can think of it as an, opportunity to engage the, users either. It's, like to provide fallback, content if the fallback they want doesn't load and, there. Are a few more things I want to talk about later. All. Right so parity, balancing, let's see how this can be used so, this example is, an exploration done by gonna buy, times internet I'm. Sure you all know what Ghana is and. This. Is very fascinating, right because PBS. Is a clear, like, API that. Makes sense for product, like Ghana because, you don't want to buffer while. You are listening to music if the connection goes, down right so, you, can prefetch, ahead of time new content, or like the content that you know the user is going to listen to do in the day and provide. A great. User experience, this way. Another. Example, from Japan, this. Time also by, Athena. For, them they want to use product but one thing to proactively, prefetch, the new magazine or the new edition of a magazine or manga, because. Those can be very large like it's 100 Meg's at time and. The. Thing to know about Japan is that less. Oh well sorry. More. Than 50%, of the user only has free gigabyte, of data per month after. That they get total, - 2 G speed right. Think about it I don't, know about you but on my phone. If I check the whole data usage including, Wi-Fi I have. 70, gigabyte, of data per, month right. So, just relying on mobile, data is not going to cut it and so, you can use PBS to shift like, fetching, all of that heavy data when, user is at home on Wi-Fi. So, that when they get on their commute the, experience is going to be amazing right and too. Until the end of the month. All. Right let's take a look at the API so, with. PBS you will be able to register a sync event for your. Serviceworker, you can specify your own tag name just like background, sync and in. This case I'm registering, an event called sync amazing, cuts you can put whatever name you want so you can have multiple of them there. Is also a mini interval, option so this will be the mean interval, between the different sync right if you don't want to update more than every day this, is how you would do it and. Once. The event is registered, the browser will really fire a project, sign sync even to the serviceworker and this. Is where you could run your own logic to fetch the content and put it in the cache storage. Or. Maybe it's updating. Application, settings appreciate, application, code as well so, you can you can do whatever you want there it doesn't have to be about content it can be anything. All. Right and this. The way it works is that chrome is not going to fire the product sync event for everything, because that would not scale it's, going to look at how engage your users or, with. Your app right and it will decide. The frequency, at which this event is going to fire up airs on that the. Other thing that we do today and it's, open to feedback this. API, is only, available for install. PWA at this moment. All. Right. Okay. So when, website can proactively like. Make new content will give you available, ahead of time it results. In instant, available, and great user experience, what's, not to like about this. Well, we promise that if you do all of that work but no one notice it's, kind of pointless and actually wasteful right but. To me it feels like a discovery, opportunity, so.
We Understand, that creating, all of those great user experience, is hard and so. We've been thinking of ways to try to reward, that my fault, in, particular we think we can help you find, your users or we engage with your existing users, in. This particular case what. You are looking at right there our. Exploration. Of UX. That we have in chrome so this is the new tab page and. You can see that we. Are going to tell. You that you have content available even if you are offline so, we are going to start with offline but you can imagine that as. More content is available on the device we want to make that available for any, situation doesn't matter if it's offline or not and so, if you go there you would see there is a new UX that is going to coming soon explore. Offline, with content, as available, on the device and so. The way it works is that you, will need to tell us what's available right we can't just guess and so, there is an API called, content, indexing, API that. Is designed to help to, make that a thing. So. Again, to. Use this API you need to have a serviceworker and, at, least a subset, of your pages, need to work offline and so. What you can do here. Yeah. So you can add URL by. Using, this registration, dot index dot add you. Can add URL. Element. That are available on the device, so. First of all you will need a unique, ID so that you you can design you, can specify, which, part of the content is available then. You have to specify what is the URL to launch this piece of content so that when the user tap on the tile it gets directed, to the right page. This. Also has to work offline obviously. Then. You can put some additional data like what is the title where is the description. Icons. Images, and. Also, some category, is that like a music, video, is, it like a page, and. So on and so on. Alright. And. Obviously in addition to adding you can also like, list, what's available and, delete. Everything, or like specific entries so, you can manage what's available on the device so that what we show the user is current and up-to-date. Ok. So having, collection, of content ready to go is quite convenient right especially in markets like here where the condition is not always great but.
Please Play with it. Predict. Background sync so this one is to make content. Readily available on, the device it's. Already, available as. An origin trial. We've. Seen as you've seen like we we have a couple of demos already we've seen you transform we're developers, and. Again, like we need your feedback to help us engage with also prevent both of vendors to make the case for it. Content. Indexing, this is to make it clear that there is interesting, things available on the device to our users, this. Is going to be available soon in a Rajendra know hopefully chrome 80 this. Is very like brand new so. We want to hear from you did we get the API right you have any concerns about it and so, on and so on and, then finally, weapon, Don so this is very bleeding, eh this is not yet available as, an origin travel but. This is a convenient, distribution, format for, content and apps opening. New ways this virtual like up and content it could be sharing, between friends, maybe you can incentivize that. It. Could be discovering, your app at like an, off-site event you. Scan a QR code and boom you get it so. We, are looking for love use case a lot of feedback because this is a lot of work this. Is not an easy API, so, please play with it tell us how you feel about the use case what, sort of like things, we should add to it. So. We've seen a lot of interest from developers. Around specific use case but I think there is a lot more we could do with it, the. Sun news is that there is some concerns, but not for the use case I talked about today it's, a different set of use case if you only learn more come talk to me but, for the set of use cases and talked about today it's it's not that bad. Edge, on the other hand is like totally on board I understand, what this is what why this is great for the web do you have and so, hopefully we can convince your browser vendors that this, should be a thing as well. Alright, and with that I'm done I, actually fit the whole talk in 40 minutes so. If you want to learn more go to this link there is like links to all explainers. And zone article, more, details, and. Also come talk to me after, the break at. The office hours and so on thank. You.