Hi. I'm Ken G I'm a protein manager in Chrome I work on making things load fast, everyone. I'm me escape from G tech velocity, in Google helping our partners everything, web this. Talk is about reading edge API designed, to help you create user experience that are seamless, instant. And available, there, is a lot to cover today so let's, jump right into it. Maybe. It's. Coming I we. Have a great audience via first obviously. So. We spend a lot of a lot of time waiting for things to load or disappear, like on the screen right especially. On mobile browsing. The web doesn't feel particularly delightful compared, to the kind of user experience you have on native apps, and. There are a few reasons for that but I think the main one is the way we load websites generally speaking it. It, kind of like is sluggish, typically. Like dukey's or expense that we have on the web let's, see why that's just that's. The case sorry um. So, this is a typical user expense that you have on today's web you click on link and then, essentially. You see, this blank page because, the processor is going to fetch the HTML for them in for, the main resource for the new navigation and, it can take a while so you still wait for something to happen anything, you. Don't even know it's coming is it going to work or not right it could just fail and then, eventually you, start, to see like things rendering and you want to use it but what. Happened usually, is that there are elements on the page that comes late and shift, things on the screen which. Make it very my, car to use because. You tap on something and then you tap on the wrong thing. Kenji. I think you're absolutely right on this I wonder if you could delivers experiences, like the one that we have in the slide right now experience. It without wait times experience. It without jumping layouts, rendering, States experience. That feels snappy because they seamlessly transition, you to your destination. Kenji. Do you think it's a good idea to first walk through the range of options we have when building new user experience today I really. Want to hear a couple of your good good metaphors, I really love it I'm not sure about good but we can try it right here all. Right so you, could choose to focus, all your resources into building a native app and deliver, a top-notch is rx, but, a problem with that approaches that on average this. Is the equivalent of building experience, that only a small subset of your users like can, afford or need installing. A native app is a non-trivial request, because it, is first of all time, consuming, but, it also requires, a high level of trust and commitment whether it's about storage, or enabling, a bunch of permissions. So. When you could skip on native you absolutely, need a presence, on the web especially. If you want to reach more users and, on the web you have essentially two options and here. Or multiple, page application, and single. Page application. S.p.a let's, have a quick look at SPF, first. So. To. Me going SPS kind of like building a high-rise it is complex because you end up rebuilding, key features that the browser provides for free such. As like history, or restoring, strong position, and sure, experience, can be nice when you are in the app but, getting there can take a lot of time because of all the code that you need to load up front and as, priority, because because, first impression, matters a lot when you're trying to reach in users and, as. You build this thing it, it kind of like fall apart because if it, as, the side of the SPN trees it is just, like too complex and so the only solution you have is to, pleat this big thing into multiple s.p.a and so, you back to square one where you have to navigate between different, user experience, and, as we've seen it's not a good user, experience on the web.
The Last thing is that when we talk to partners, it was clear that for them an SP, a result, in a loss of creativity because. Of the inherent dependencies, of a monolithic app. So. For instance you can't just feel we're saying without impacting, other teams and let's. Look at what M here has to offer on your end. To. Me going ampere is kind of like building a small town each team, gets its own house which, means that it can focus, on the thing that matters right they don't need to reinvent things that the browser provide for instance and then can also more freely, tweak. Their product to their needs without worrying of having to impact other teams. But. I'm here not without downside, right it's not perfect overall. It is true that NP a 10th result in user experience that are higher, friction because everything, is a navigation. And as, we've seen it's rather frustrating, user experience. Can. You talk about our desire of enabling, seamless experiences. On the web Simmons, sound very neat but it might be hard to understand what we actually mean by this here's. An example from the Android platform, it's called shared element, transition, essentially. The idea is to use an element throughout a state transition 3 assure the user that their action has been acknowledged, and being, acted on great. Example, too bad this is only an Android native app API, right I'm sure that a lot of you would like to build something like that especially if you have an MPA it's kind of like unachievable, today can. You son Kenji son I think I have something for you it's only early days but, with the help from the broader community we, think we have found a way to create such experiences. It's called portals, we, give a teaser during last year's c.d.s and showed, off for seamless vision, in i/o this year the, feedback from the community has been amazing, and the team has made significant, progress for, enabling same-origin. Use, cases which will be our focus for this talk so attendee, could you please give us a high-level pitch on what portals are yeah, sure. So. Let's briefly explain, the key concept behind Paul Paul, Allah is all about enabling Parana variation, on the web and in, the early days every, navigation, was done true like, simple link like this one right but. The downside is with. Do simple links it's not super appealing like it's just like a bunch of like text in words and also. The friction of navigating, gets in the way. Then. Snippets, came around right, it's some. Some, sort of like way to make the links more appealing by providing, more details and having like a nice visual. But. That said it's not much better for one the information that, is available there could be out of date and also. It's still going to trigger this high, friction navigation. Navigation user. Experience. Eventually. Iframe, came around so because. The content is now served by the website you are liking linking, to the fresh net concern, is not there anymore, but, it's still going to trigger a high friction user, navigation.
And So, it's not that different from what we've seen so far, and. This, is where. Paulo. Come. In as you. Will see it's sort of like an iframe except. That you can navigate into, it so. I think this is a better explanation of it right it's like a frame that you can open and cross over all. Right I think that's enough metaphor for now hands-on time, awesome. Stuff Kenji I like how you frame those things see what you did there exactly, so, exciting, the thing is portals for same-origin use, case it's coming soon as an origin trial just, like any other HTML element, you can use it directly with the HTML tag or from JavaScript, let's, walk through step by step what borders could do. Let's. Say if a page say. Foo dot HTML, all blue, super nice with his food blue background, and having food HTML, in the center this. Looks amazing like just his shirt like it's yeah, maybe. And, you also have another page part, of a smell which is pretty similar to food out it smell but having a different color and a different URL I should have a way of some kind of like you know saying right exactly. I know these are like looking pretty beautiful we'll use these two pages to see what portals could do. You. Would first want to check if your browser supports, portals as you all know progressive, enhancement is, very important, because we don't want to break any experience, in non supported browsers you, can check if the HTML, portal element is in the global window object to keep this. Next. Let's create a portal element by document, doctory element. Setting. A source attribute as bard of HTML, and. Adding. Some styles of your own. And. Lastly adding, the element to the document, and boom, you'll see bar to the HTML embedded, in a page fantastic. This is like never seen before it looks amazing right. You. Can actually check in dev tools that another document, is rendered inside the portal element in. This. Case I added with 100% hundred. Percent transform, scale and a fixed position so, it looks just like the full document, is embedded in the page but, you can file your portal, element as you like. Isn't it exciting you, can know embed, all the documents, in the document that's a little bit like familiar, yes, but, what really gets exciting, with portals is that it has this powerful activate, function built-in this. Function will let you navigate into, the already rendered, page inside, the portal element. Let's. See it in action I'll then now add an onclick listener to the portal and see if I could activate the portal when the user taps on the element, and what. You get is. This. The, top-level window navigation, happens and you magically, navigate, into the portal it's, an instant navigation, experience. Like. I mentioned this is a top-level window navigation, so the URL correctly. Switches to the activated, page I mean, keeping the URL right is always good when you work with the web. So. As you can see portals, really makes, the loading Spears disappear, you don't need to wait for the page to render anymore because it's already rendered inside the portal. Thanks. You see I'm really impressed because you did make loading disappear like round of applause. However. Like on a second, sound like this is super confusing because it goes too fast I mean, it's kind of like one of those movies where they quickly like shift to a different scene and you lose the plot like, look at the target experience that this is so much easier to understand. I'm. Totally agree with that the good news is portal does enable the creation of those, intuitive, and delightful user experiences, but you have to put some efforts to it I think. This is preferable, because a platform, should be in the business of defining Ridgid user experiences, it should empower you to design what works best for your product, and your users cool. I really like this concept of like bring your own animation, makes a lot of sense. So. What we can do better is first, and bet the portal element and. When. The user taps on the element don't activate just yet and start animating the portal in this case let's try to bring back the scale to 100%. Once. The portal element covers the full screen and by the way you can see that the URL is still that food that i smell at this point. And. Lastly activate, the portal the ends Poplarville navigation, happens and the user has now landed to bard up HTML. Like. I mentioned portals has nothing to do with animation, but you can always animate, the portal to make the transition smooth it. Could be using keyframes or, JavaScript, to move around an element but in this case let's say we animated the element, with CSS, transitions. The. Fancy animation, function we have here could be something like changing.
The Transform scale translate, X, just like Y and also setting the transition, to raishin to 400, milliseconds, the, animation, could look something like this. A. Very. Smooth. When. The CSS transition completes there, will be a transition and event being fired listen, to that event and then activate, and. One of them you know have a smooth transition despite, being a named PA that's. Pretty cool but. I mean, yeah it does look much better but. What if I don't want my users to have here the way don't. What to force the user to navigate away candy, I don't know I think your ask me too much sorry, I can't, help it but I swear this is going to be useful so can we can we do something about that okay, um. Yeah. So the good news is you can do that easily with portals yes another. Powerful API the element provides is add a predecessor, as you, can tell from the name after. Activating portal you will be able to reuse the predecessor, which would be the previous age instance, let's, see how this works. First. Of all you can listen to the portal activate, event inside the portal embedded document to check if the page was activated. This. Event is very useful, if you have something you want to do right after the activation like changing, the UI and such and. The. Most exciting piece is that the event comes with this dot predecessor, function which, you can use to retreat a previous, page as a portal element with all the UI and, the JavaScript States available. And. From. Here on you can add it to the document and use it like any other portal. What, I built is something like this. Bar. Adopting, foo as a predecessor, and then, activate foo. Adapting, bar as a predecessor and then, activate. It's. Kind, of like this cat like spitting it back and forth LS, loop. Very cute but there are more practical ways to use this thing so let's have a look, like. This example from Yahoo they, are using a resistor, to smooth out the experience of checking breaking, news when, a news story is break it's very likely that you were doing something else and so, having, you navigate away from whatever you were doing would be a pretty bad user experience but, in that case by using portal, and other, person, you, can keep the context, around so that user knows that whatever they were doing is still there and so they can quickly go back to it you see I told you it would be useful very same stuff while. Portals, is a powerful API I would, also want to point out some of the tips when using portals. First. Of all as we mentioned portal does not come with any animation. Features by default which, would also mean that it's your responsibility to, maintain the 60fps animation. As Uncle. Paul has been saying many times changing. Transition, opacity, use will change to give a browser hint and if, you're directly animating, using JavaScript, use requestanimationframe. Next. Accessibility. In time. For the origin trial we want to make sure that accessibility works, fine and the, semantics, works fine for portals, also. From some people prefer we use motion settings so please consider using the prefers reduced motion media query to customize the animation. In. This. Case when the user prefers reduce motion the transform, transition, that moves elements around would be nearly instant. Last. But not least and I cannot emphasize this more but again while, portals, is a powerful element avoid, overloading, the page with portals what. You can do here is try loading a new portal based on user interaction. And interest something. Like using the intersection, observer, to lazily load a portal or dynamically. Creating a portal on user interaction, initially, immediately, showing the skeleton UI while the loading completes.
All. Right if there is any descent to take from this off of your polls is that, polo is by design a very simple API because. We don't want to get in the way of your, creativity and so to give you some ideas of what you could do with portals, we got some of you experience and a bunch of demos from partners to show off. Let's. Start with this pattern that we talked about last year are tedious but it's still a good one this, works really well when you know where do you where, do user is going to go next and so, this is something that we built in collaboration with Athena as you, can see it's a comic viewer reader. And the. Next chapter is pre-render, right there on the, last page and so you can seamlessly transition. User to the next chapter and this is an MP right it's not an SP a this. Is another exploration, done by far, fetch an, online luxury, fashion, retail, platform based in the UK right got that right yeah their. Goal was to use polo to smooth out the navigation on, their inspirational. Content page they, are also using other processor. To the end of the whole. Sequence to, end the swiping navigation, back to where you started. Right. Second you expand on that we have this, is designed, to help users find more, quickly the item that they want among many. What. Goes on here at high level is that there is a portal, that is off screen and, it. Renders a skillet on UI and when, user decide, to check one item the, main page is sending, the information that the polo need to, complete the view and animation. Is started and offered. By the end of which everything, is in place it's, pretty fun a good user experience. Right. And, so, this was just use experiment, that we see actually build but, we have partners, that use that to create something interesting so this one don't, ya buy Yahoo Japan pay pay mall team you, can see it's a different zoom in zoom out animation, that's very fancy once. Your user taps on an item it, is, they, are dynamically, creating a portal off screen while, the portal Loews immediately, animating, existing, image and showing the skeleton UI of the product detail page after, after. The portal loading completes activate. They, are actually, providing. Same types of experience in their native apps but it's really nice to see this smooth transition on the web as well so, awesome um kenji do we have room for one more it's, better it's, going to be tight but maybe we can give it a shot. This. One is about providing, and more intuitive faster, way of consuming content and I'd call it speed. Browsing, Wow you have a trademark already is it got that right like, the one that we are slides, as your user reaches to the end of the page you can use portals to pre-render the next page have it peaked from the bottom so that the user can drag it over to complete the navigation. In. This. Exploration eBay. Is exploring, experimenting. Portals to help their customers quickly browse, through different products, the, current user experience, without portals involves a lot of back-and-forth between, the product detail page in the search result page in, other words without portal 2 you end up loading and rendering, a lot more things which results in frustrating, experience. Yahoo. Japan news spill and whole new experience from scratch this is a stack of highly, visual cards, that the user can swipe through also. Combined with the ability to seamlessly deep dive into the article itself and all. These screens are separate pages and yet there's absolutely, no reloading, to be seen very, smooth great, experience in something very neat to the web. The. Exciting part is yahoo japan news has published the prototype as their lab experiment, and you can experience their portal to implementation from the link shown on the screen of, course, it's still in the early stage but we think this new experience has a strong value proposition regarding. Overall UX. All, right we also received, a quote from the city of you have Japan which, I'm super excited about because. It does show that there is a need, for an API like this even.
Companies We spent your resources, and skill still. Prefer using NPA despite all the downsize we talked about and so, having Paulo as part of the web platform to, smooth out the user experience is super useful. So. Yeah so : we'll always to improve the user experience thanks, to the smooth transition between web, pages even. On our NPA, architecture, and the, last part is the one I'm super excited but in addition, not only engineers, but also designers. Could use polos effectively, so I really feel that portals is a tool that helped democratize, seamless, transition, to everyone and we'll love to see what you can come up with and your feedback on this API. There. Is a lot more example we could show off but, we will be definitely running out of time, so, thanks to all our early, partners for the amazing, feedback we got so far and building inspiring experience, thank, you. I. Mean. This is great can we wrap up recession now I wish, but. Not quite as you've seen it's true that you can use polo to build very compelling, user experience, but is it really enough what do you mean by that the. Prime. With merely building, wedges our experience is that there is no guarantee that your users are going to find them, it. Takes a lot of efforts, to try something new especially when, you already have your own preference, about how you want to use your, time for instance and. So. What do you do in that case, well. Essentially, you can do two things number one, lower, the amount of effort it takes for people to try something new and number. Two lower. The amount of effort it takes or something I want to try something you ideally. To zero right, let's. Now look at a few more proposal. And ongoing efforts that we have that are meant to help on this front. All. Right so first let's, talk with a way to make an initial navigation. Instant, Yusuke, what, if by the time you went on your Japanese, commute you already have like a whole bunch of content available, on your device I think people talked about it just before that's. Actually it solves almost my problems, yeah. Okay so good news is there is this new API called periodic background, sync which, is meant to design which is meant to solve that issue and.
So, Not only would the experience be instant, but it will also be will more like like, connection, like it doesn't really matter anymore because it's already on the device so. Let's see what this convenient practice. So. This is an exploration done, by Ghana by times Internet Ghana. Is the largest wieszczyk streaming service in India what's. Interesting here is that India, is a challenging, market in, particular because data has become lot more affordable the, infrastructure, has trouble to keep up with the demand and so depending on the time of the day you can end up on a very slow connection, and so, Ghana wants to use PBS, to, smooth out the, experience they can fetch content ahead of time so that they don't have to worry about heating like a bad connection through, the day. This. Is another example from Modena they, want to use very, deep advancing, to proactively, prefetch, the latest, addition of a users favorite manga on magazines, and news. Can be very loud like 100, Meg's at a time, the. Other thing that's important to know and maybe, that's a surprise for other people is that in Japan more, than half of the subscriber, only has free gigabyte of storage sorry. Of data per, month after. That they get like photo 2g, which is a very bad user experience I've been there you've, been there too right. Yeah. And. So, the, idea is that you can use PBS when you are at home on Wi-Fi to download, this like heavy content so that when, you're on the commute everything, is there is that it amazing yeah this is exactly a feature I wanted I mean I love manga and it'll be great times like to kill my commute time all right can, you run us through the API you skater definitely. With. PBS you'll be able to register a sync event for your serviceworker you can satisfy your, own tag, name just like the background sync in this case the sample code is registering, sync amazing, cats event which, is very nice, and, here's. Also there's, also an a min interval option where we can define the minimum duration between each of the sync. And. Once. An event, is registered the browser will regularly fire periodic. Sync events it's a serviceworker. You. Could then run your own logic to sync it as the. Oh something. Went wrong such. As the web resources and cache stories or application, settings in your, index DB. Taking. A min interval into account the frequency, of the sync event depends on how frequently the user engages, with your website in Chrome, we are reserving PBS for installed, apps aka, installed, pwace, when. The event triggers please, be mindful of the user environment, for example storage. And data saving options some. Api's that might help you understand, if it's a good time to run the sync logic is navigator, connection save data to see if it's in this data saver mode and storage. API to estimate, the available storage cool. So, we, now have a way to download Pampas ahead of time and also. Make the transition smooth with portals Kenji, I think we're good for today you know me right I always, want Paul so. We're, not quite done right I think it's great that we can have this, website like proactively, fetch content ahead of time and deliver like an instant bailable like, great user experience but, there is something missing. The. Problem is that if all of that work is done and no one noticed but what's the point right it's actually wasteful, but, to me this feel like a discovery, opportunity, and, so. We do understand, that building like great user experience takes a lot of efforts and so, we've been thinking of ways we were that effort in particular we, think we can help you we engage with your users or find, your new users, and. So more concretely this is like early exploration, but, you're what you are looking at right now are. Ways. For ways to surface, content that's available on, the device in, the chrome download page and also in the chrome new tab page so, we are seeing with that but that's one of the way to which we want to help, user like and that you find that there is something interesting on their device but. To make this work we'll need your help right only you know, what's available on the device and how to best present it and so, the good news is there is an early proposal, called content, indexing, and so, Yusuke is going to helping to explain how that works sure. So. The prerequisite, for using a content indexing API is, to ensure that you're you at web app uses a serviceworker and that, at least a subset over URLs can, be navigated to while offline and please, don't get confused content. Indexing API is not a new storage mechanism, you can keep, on using cached source for that it's. A simple way for indexing content that is available on the device. Let's. Look into the detail of basics you, can add URLs and associate the metadata to the index with the newly exposed index, that add function, in the serviceworker registration.
Interface. For. Details you need, to add a unique ID and. The. Launch URL which, has to work offline. And. Some. Other metadata which the browser can use to show a list of a readily, available content. To the user you, might want to provide a save, for later button, to save an index a piece of content or you. Might want to add the, contents automatically, you win a periodic, background sync event fires. In. Addition, the API provides, ways to listen to lead the entries in the index so, they can keep the index up-to-date the. API will be available as an origin trial soon from chrome 80 and we, are waiting for your feedback. All. Right having a collection of content ready what ready to go is quite convenient but I think we can take it not further, hopefully. In the three minutes that we have left so what if we could have for instance a self contained piece of content or apps, that we could share and this bit like instead of just having links this. Will allow your user to find liked or, discover obtain or enjoy like your content in like so many interesting, ways. So. For self content piece of content up to exists there needs to be a way to package all the resources that Singh needs in a convenient and disputable, format. With. The help from the community we've, been working on specifying, in implementing, such a format for a long time we, have been using the term bundled. HTTP, exchanges. That's quite a mouthful honestly, if you keep speaking yes. So. We decided to name it what bundle that's, very nice like I like it. As. A new name implies it's designed for the web and allows you to bundle, any resources, into one convenient, file which, you can serve over the wire or even share with any peer-to-peer protocol. That's. Sounds like some set of like zip archive for the web that's actually one way to see it let's see what we have for so far. We. Have we now have a CLI, to easily build a bundle since it's a bundle is since it's built with Golia you would want to use go get the first install the command-line tools the, command gem. Bundle gives you many ways to bundle up web resources but I personally feel the horror option is really convenient because, it just takes a har file as an input to produce a web bundle it's super easy. We. Are also exploring with JavaScript, implementation, for web bundles as well we, just released a very first draft as an NPM module called wvm. We. Are still in the middle of brushing up the library we, hope that you will be able to integrate this module into your build pipeline so that you could easily, bundle, up your content. All. Right as I said a deficient, format enables interesting, use case in this, example you. Can see that I can share with a friend this amazing, game. Called trucks which I have in a web bundle format and the thing is I can do that without internet I just need to use a file transfer app and it just works I can like share with my friend without any internet I can be on a plane alone. On some way or even like Jake's Archibald famous, life I tolerate if you know what I mean it just works. One. More use case on is cuddle but faster, loading okay gee you're so much obsessed with Presley I know I know, so. The, trick is because, everything is on the device a weapon, will, offer a much faster user experience, let's do a match on the left you have weapon, doll and on the right you have web web ready, fight. Let's. See. Dumb. I, mean. There, is no picture right it's like weapon. The winds amazing. Just. Like Kenji I'm very excited about this feature but you really have to try it yourself the good news is that we added this USB type des, typed I know in your strap bag and it contains sample web bundles and instructions, you can play around with the full feature of procs web dev and Skoosh wherever, you are no, matter your network condition or even on your flight back to your hometown after cts. Alright. Because we've talked about for api's today the. First one polo which is designed to enable instant, and seamless navigation, this, is going to be available soon in an Origin trial for, the same origin use case and we, are seeing tremendous support, from the web developers, your, interest in feedback is going to help us engage with other browser vendors so. Far we've we've, got no signals from them so it's, going to be useful all. Right next one parody. By prancing this is designed to help get. Content, ahead of time on the device so that you don't have to go your bad connection, this, is already available in an origin trial we, have great interest from where the repairs and it was some work to do with other browser vendors.
Content. Indexing, this one is about so facing the content available, on the device and it's. Going to be available in erosion trial soon this, is brand new we want to hear from you so please try, it out let, us know if it works for you or not and. Last. But not least, weapon, dose so this is a convenient, format to enable discovery and distribution this, is billing edge it's only available behind, an experimental flag, there. Is some early interest from weather lovers and some, of the other Bravo browser vendors are bit concerned but that tend to be four set of use case that we didn't talked about today if you want to learn more like come to talk to me later. Cool. Finally, we've made it to the end thank, you so much for listening and I hope you're excited about these new api's. Kenji. Thank you all please check this link for more details in, pointer.
2019-11-16