In which we make loading disappear with 'portal' and friends (Chrome Dev Summit 2019)
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.
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.
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.