Thank. You very much for joining up really. Late, or showing up really late and. The last talk and the. Title of my talk is what's next for the web or an alternative, title could be exploring. About, flags my. Name is Thomas tanner I work, as a mobile solutions consultant they started to Google Hamburg office I'm. Tommy hawk on the Internet. So. Before, they get started here's. A quick warning there's, a lot of content coming and I'm, going to speak fast probably even too fast so, hold on to your seat and watch. Out for all the links so on all slides, there's links so take a photo, right. On the links whatever and so, you can catch up afterward if you find something that is interesting. With. That let's. Get started on the first, topic, which is progressive. Web apps pwace. And. Something. That is really, and truly immersive. Are obviously fullscreen pwace because. You're PWA deserves. A lot of screen real estate, so. Some of you may remember an. App, called paperplane store world it, should still be up so if you want to join on your phones you can try that it's. A full screen PWA and, the. Cool thing about it is if. You pay, close attention there's. Something missing. Which, is the, top bar with, the. Wi-Fi, signal with the clock and so on it's, a true game so you get a true fully, immersive. Fullscreen experience. How. Do you get that in, your web app manifest you, can now set the display property to full screen and your app will be rendered, in a full-screen view this, is not always useful, but. If you write a game if, you create a game it's, definitely something that you can try out. Something. Else in the area of progressive. Web app is they. Have to come real applications, on people's phones, with. A new improved add to homescreen flow users, will now be able to add, your application, directly, to, their. Home screens and find it in the app drawer so when they search for the app and it will just show up between all the other native, applications. And if. You update the web app manifest you, can also change the icon and change the name and it will just be reflected, directly on. People's phones and. With. The improved flow based. On the manifest scope and Android, intent filters being created and this. Filter defines, when, the app should be opened so when, you see this little animation. Here I'm receiving a chat message I'm clicking, on the chat message and then, the. Application, opens. The. Web share API is. Sharing. Caring definitely, sharing, is caring so we. Should make sharing easy in. 2017. If you look at publisher sites they.
Commonly, Look like this so you. Have a lot of screen. Real estate wasted, for all, the sharing buttons and. Obviously. If you want to share it always, the, one, social. Network that you would actually want to share this article is, missing so. That's. A problem really and also if you've seen before sometimes. If you have full screen pwace, there's, not even a URL bar where they could they could just quickly copy the, URL from so. What. Can we do about that the, answer is the, web share API the. Voucher api opens, the native sharing dialog directly, in the android phone. And it. Has a very simple API that, is promise based you, call navigator dot share then, you give it a title a text. And the URL and then. People can just share it so you can see here, the. Menu share dialog opens, you. Can select whatever, networks. You want to have there it's, all customizable, by the user and it will always be the same for all web pages it's not dependent, on the web site it's dependent on you as a user. Next. Topic is web push notifications, and luckily. Now finally, on iOS. 9 iOS Mac OS they're no longer an. Alien before, they were kind of artificially, created, and I had this not, really native looking, feel and. Now finally they're just integrated, directly in the control, and know that Notification, Center which. Also means their respect that do not disturb settings so something that we really, found was a pain and people set up, do not disturb and then receiving all these notifications. Now they, just respect, the, operating. Systems doing, a disturb settings. Navigation. Preload this is one of the more interesting, and more complex things, actually. This. Is about, waiting. For the service worker to boot what. Does this mean so if you have a PW a at at some point needs to boot, and start. The service worker and I'm, it turns out this can take some, time and. Actually if you are a big site with a lot of users, and a lot of views, and if, you are a side that is active on many tabs. Like. For example Facebook where you have facebook.com. Obviously but then also a ton of articles with like buttons that also tend, to connect. To the service worker this is something that can, really harm performance, so, with. A service. Worker navigation, preload. Origin. Trial we. Are trying to find an answer to that and I'm, essentially, the idea is to. Paralyze. A, before, cereal talk at, the task so, instead of having the service worker boot and only, then, intercepting. Navigation, requests the core idea here is to already, start, listening. For requests, while the service workers to booting. And loading so. Speaking. Of code how could this look like and in, the service worker during, the activate, event um you. Have wait until. The navigation, preload is enabled, so you essentially, start. The pre-loading, already and. Then. In the fetch event when. You go through your is the response. Summer available you can check if you maybe have, a pre-loaded response, already so, as, I said it's kind of complex really but there's things on the slide so you can follow up after. The talk very, exciting feature. Something. That is always, a pain is signing, into pages and signing up for pages and. We. Have a solution, for that which. Is called the one tab signup API. So. What. Problem does this API solve essentially. Before you, always had this like mmm, to a use federated. Login do, I use the Google button do you Facebook button if I use that will it actually posted, I'm using this app on Facebook or is it so. You never quite know or. If you use username, and password it's like, mistyped. Go, back correct, of. Course you have forgotten the password and you. Have to click a link the, forgot, password link so, this can be really painful. There's. A one tab sign up API this. Has, gone away and the best thing is this works on all browsers this works on iOS this, works on desktop, Firefox. This, works everywhere essentially, so, it's. A new API. That, allows you to create account, on, the mobile web with one tab using, a Google address and it's, based on an standard. Called open Yolo you only live in bonds open euro. It. Also supports the automatic, return.
User Sign and so if you have been on the page before and you come back you will automatically, be signed in if, you're a marketer that's something that is very valuable because like this we can stitch sessions together if people are on. Mobile and on desktop and they use different devices but. The same login you can then finally stitch the sessions together so, very very, useful information, here it's. Launched life you can see the URL down, here. On. The code, side how does it work well first you need to do some setup so there's, an contest, with. The options, we, said the supported, auth, methods, and the supported ID token providers, you, can see the values here, then. You need to set, up a handle result function that will deal. With the result when you get it back and. Essentially. There's two cases and there's their auto sign in and. There's the auto sign up let's, start with the auto sign in so if you have. To use it and it's the users coming back um you can use the, go google yellow dot retrieve function, with the options that you've configured, a little, bit, further. Up and then. You handle the result so essentially you. Very easily can, sign. In people who have been on your page before if, you need to sign up users if they are on a page for the first time and, you have to Google yellow dot hint function again it takes the options object, from from, before and will then be able to handle the result as well so the. Result is of course, but it's, a user, a valid user or not. Ppwe. Always has this problem of if you have an application and, you want to store content. Offline, is. There enough memory, left so it's enough storage left this. Can be finally answered, because, now, we have the storage estimation, API, this. Allows you to with just one call to, the note 2 the function navigator, dot storage that estimate find. Out after, the promise fulfilled how, much memory you have left and, essentially. You can get usage, information and, you get quota information, so we can calculate the Delta how much memory, can you still use this, can be useful if you want to decide should a really offline. Store whatever big, asset, yes or no so I can Dannette dynamically, decide, now if you want to do that. Next, big topic area is media-related api's. The. First one is the image capture api because. It allows you to zoom in on what, really, matters so, you can see me playing around with this api in the office I'm. Zooming, in on my big nose and yeah. So how, do we work well, essentially.
It Allows you get low level access to the, phone's. Hardware, so, if, your camera has, zoom. You, can now access the, camera zoom directly, from within JavaScript, let's. Have a look at the how this works so the code here is connected. To this simple. Animation as you can see so, first from, a media stream we get the video track and from, this video track we, get the capabilities so what is this video track capable, of doing and, once. We have, the track they can get its settings then, we have the settings and, then. We get a reference to the query, selector hit to the to the input and, with a query selector and then. We come to kind. Of initialize, the input so we need to know how far and how. Yeah. Minimum is the zooming, level so we look at the capabilities at, the zoom the min and the max and set the min and the max of the input accordingly and, then. We can set the, value of the slider, to the setting off to, the zoom, property. Of the settings object and. Then essentially all we do is. When the. Slider is being moved so when the input changes, we. Apply the constraint, to, the zoom. So. Really exciting. The, shape detection API allows you to in real time detect faces read, barcodes and even run OCR, optical character recognition. From. Camera, input you. Can see on, this demo here I'm, holding my phone and, I'm scanning the, website, of the. Previous DDD in Krakov, and, you can see I'm on this page there's a barcode but, there's also text, obviously and a face and the. Camera detects, is life on. The the API detectors life and you. Can see the bounding boxes that I've drawn here directly, on the page. Again, how does it work I'm very, quick the, code you, have three different detectors, that you need to initialize a face detector a text detector in a barcode detector, and, because. Everything is promise based you can just use promise that all call, other detection methods of all the different. Detectors. And then. You, get the, with. The, resulting, faces, text, and barcodes back and you can then I don't know draw bounding boxes or whatnot and so here you can see I'm simply logging them to the console very. Powerful API directly built, into the browser um. The. Meaning session API so we stay in the area of media for. Us to, make your media sessions a lot more meaningful. So. Something. You encounter, and when you use. The mini session idea is when you swipe down on an Android device you can now see and, track information you can see album information you can see album artwork and like, this you have to yeah, more meaningful way of controlling your, media directly, from the, widget that you can see when you swipe down so. You can see you can pause you can fast-forward, and so on and then, there's, a lot of information so if we zoom in on what. If what kind of information you can see you, have the title you have two artists you have two album if the artwork, and then, you can connect to all the different, action. Buttons, that you have so you can seek. Backward previous track seek forward and next track and of course play and pause so. Code. Wise how does it work you pass. A new. Medium. In today's a object, with. All, the different yeah. Things filled out it looks a bit intimidating. But if you look it's just very straightforward, title. Artist album, artwork, and different, sizes. And different resolutions, and then, you can connect all the different, action. Handlers to the particular events so play pause, seek, backward and so on so I can really make a media player that is super powerful and directly integrated with the Android version. The, media capabilities, API is a very interesting, new API that, allows you to determine not only if a certain, device can, play, a given, media file but, also if, it can do so in a smooth way and in a power, efficient, way so, this, is very important recently because. You. Know battery. On battery. Life and on mobile devices is always a problem, so with this API you, can directly.
Find Out well is. A, particular. File smoothly. Playable, and power efficiently, playable like. This you can dynamically, decide, well maybe the person is on, 20, percent battery only and, in this case you, may want to ship a, lower, res version of. A media file. Rather, than shipping the super, high res file, and also you can dynamically decide is, this, phone, even by. Able, to play this. File, smoothly so. Have a look at the code, you. Have the Navigator media, capability, stored query um method. Here and you pass in an object where, you essentially, describe, what is your media, file like so you have a file it's. A video it's. Using the video web em codec. And as heightened, with framerate, bitrate. Blah blah blah so. You can see you simply list the properties, of the video file and then you get a result back and then as result you can see not, only is this supported, at all which is yes or no but, you can also see is, the playback going to be smooth so, if you have a device that was really low power. Maybe. You, won't be able to playback smoothly, a high-res. Video, and. Also the most important, question in some cases is, a power efficient so well the CPU is maxed out when playing or, has to CPU some you, know bandwidth. Upwards, for, doing. Other things on, top, quite. Exciting, API. Going. Over to web we are, because. Sometimes the real reality is not real enough. What. We are allows you to create compelling VR experiences, in the browser you, can see a demo here created by Martin, split, where. You, can just use your device, and get, a like, really realistic VR, view of how, for example here for an interior designer, a certain, piece of furniture would look like in your room or. In a simulated room here, web, PR is an open standard that makes it possible to experience we are directly. In the browser so, you don't need to download any plugins, you don't need any additional. Software you. Just point, people to a URL then, they can take out the viewer, which can be Google, cardboard or whatever and then you can see directly from their browser in, their phones, how something, would look like so, very. Exciting. Very yeah. Amazing and really, I think for some professions, even life-changing if you are an interior designer, definitely. Have a look at this and. Topic. That is very, dear to my heart is performance, and performance. Related api's. So. The. First topic in there is the network information API this. API allows it to know how fast you can go. It. Actually does already get meaningful real-time, network information today. I think we all have experienced, we've been on Wi-Fi, so, in theory super, fast but in practice well you. All know how the Wi-Fi was here sometimes it wasn't like really the best so. With, the, network, information API we, now get not only static, information like the type and the. Downlink back but, we also get the effective, type so, today sometimes, the, Wi-Fi connection would be would, have been a Wi-Fi, connection of type but, effective, type would maybe have been only 2 G, so. This, is something that is of course very helpful if you want to make real-time decisions what. To do with a certain. File, for example or image, F, one example where, you, can actually combine media, queries, with, the. Network information API so, here I'm using. Javascript. To find out if a given device has, a so-called Retina, display so I'm looking at the, min. Device pixel, pixel ratio, so, I'm looking if the min device pixel ratio is, two and if the min resolution, is at least, 192. Dpi, so. If this, media query matches I know that the device supports. Retinas or is a Retina display but then I dynamically. Take the, network information into. Account and only, if, the. Device supports retina, and only if the, navigator dot connection, that effective, type is 4G, meaning. A fast connection only. Then I use, retina graphics else even, if the media queries say that's a great device it. Could support media, query it's a good, support high. Res graphics, I'm, not using them because the, network right now doesn't, commit so. That's, just a quick idea, what, this kind of things would allow. The. Next thing is performance, IDs because you, should care what, is happening on your page and when your. Content loads and. Here we have the navigation timing, API that. Allows you to get general performance. Data, you, can see here it's. All available, in the window that performance, the timing object and this. Variable, we call it perf data then. Has sub. Properties. Like perf. Dated or load event and if, you use, the, perfect either or load event and, you. Subtract. The perf data dot navigation, start you get something, which, is called page load time you, can see there's connect time there's render time so again a lot of useful, information, that you can then just collect in a table and maybe report.
Back To your. Analytics system and like this you get real-time, user data of actual. Users out there and you can see well, in the lab we're simulating this and that but actually users, in the wild are experiencing, something, completely different maybe so, you can get very easily real-time. Performance data from your users and. Sometimes. You also want to see how fast your page is rendered and for. This you, can get from. The performance, API sorry. From the pain time timing. API, different, events like for example paint, event, if. You, initialize. A performance, of server you, can then check, for a certain paint, events and see when, did they happen so you can in. A server then observe, an observer observe empty. Types of type paint and like, this have, a look at when what, paint event is happening on the page. You, can see how I'm doing that even, after the fact on, this plate here. I'm, just looking at performance that get entries by type, paint. And. Then you can see what, information again I got first paint and. I get first content, full paint first, paint is when is something at first, at the first moment that something is been painted on the screen, which, could be something as simple as the, background color changes from white to whatever blue and the, first meaningful. And first content full paint is when, can the user actually start reading, the page for example so when is an, image loaded Venice the. Text loaded so something meaningful is on the screen so that the, person can actually start consuming the page and. Something. Else that is quite new our clients, hints like. This we can find out how, capable a user's device is. Client. Ins are, especially useful on low, memory, devices so, in the chrome team they've done. Yeah. Chrome telemetry, so they have essentially, figured out by. Using crush reports, what, kind of things happened and what kind of things led to crush reports and it, turns out that out of memory crashes, happen. On a lot of low-end devices, that have very, limited, ram so only five or than twelve megabytes, of ram or even, sorry. Or one gigabyte of ram and i'm, if you know that you have a low powered device that has a little you, know less ram then I know mid tier devices or high tier devices and then, I can decide, dynamically, to, serve only a light version of your page, so. Service, can advertise, support. For client ins by, using the accept -, CHCH. For client hints header. And, I can list, all the different device, so, the different client, hints that they support like for example device, memory and. On the client then, the client can then report, back to the servants a my, device memory is 0.5. For example so 0.5. Gigabytes, and, like this dynamically. You can decide on the server but it's a light device maybe I should be only, serving a light version of my page you. Can also access this information from JavaScript, so you here navigated.
Our Device memory which prints 0.5, and, you can also get an information about the number of cores. That the CPU of the device has navigator, dot hardware. Concurrency. You, can see I'm having here, low. Powered device with only 0.5, gigabytes and only, 2 cores, instead. Of maybe 4 or 8. New. JavaScript, features because, in the end everything we do is powered by JavaScript. Something. That is really. Amazing is dynamic. Module. Imports they. Allow you to really, truly lazy load JavaScript. Code so here for example in the code um you, have a button and it has an event listener that unclick, dynamically. Loads the, code for this dialog. Box that the button triggers, so, once the import, is finished and we can, then open. The. Dialog box for example or. If we can catch an error if in case of something goes wrong so import, allows you for dynamically, importing. And. Loading JavaScript. Very, exciting. We. Have a synchronous, generator functions, because. We all know dealing with asynchronous, data it can be really, painful and. They. Can be used for example in for off loops and you can, also create custom asynchronous. Iterators, through, asynchronous, iterative, factories, so, you can see one example here and we have a. Generator. Function so you can see the little star, you. Have a response that is evaded from a, promise, so from the fetch and. Then we, have B which is the body of the response, and we, have this. Asynchronous. For. A weight Const. Chunk of a nano magic function, that, just gives, us a chunk, back of, the. File and we can then yield the, chunks. Length dynamically. So. Really, exciting new functionality. That this provides. And then finally well, no pun intended we, have to finally method in promises, because. Oftentimes you need to do something in a promise nevertheless. If, the promise has fulfilled or if the promise has been, rejected. So you, can see here I'm. Fetching. And display and my function here I'm showing a loading spinner then. I'm trying to fetch a euro then. I get the response then I get the responses text and, I catch in case of something happens and then, finally, so, in all cases no matter what happened if the Democrat then, case. Happened or the catch case happened I'm getting. The text which can be the error message or the actual response. Text and then, I'm just displaying it and I'm, hiding my loading, spinner so, pretty, elegant way of dealing with code, without repeating, yourself. And. Then over, to hardware, related ideas, so, a lot of new hardware related api's are available for example the Bluetooth API web Bluetooth API that, allows you to communicate with nearby, Bluetooth devices.
What, You can see here is a demo from a, colleague of mine Francois. Botha. Who. Is using his phone, to, control Bluetooth. Candles, so just from a website, and he's. Sending, messages, over to the Bluetooth candles. Like. This the, web Bluetooth API allows, you to discover and communicate, with devices that, are nearby it's, using the Bluetooth for a wireless standard. Buy, at the generic, attribute profile yet, this. Is already, implemented, in a number of browsers and you. Can definitely play around with it on Chrome, Android, Linux, Mac OS and Chrome OS. Relatively. Similar web USB. Where you expose, USP devices and make them, accessible. From, the web in, this demo by, Kenneth, Road Kristensen. You can see how he, is playing. With web USB and sending. A message to a dot matrix display from, a website so he's typing in on the website some, message web USP rocks, he's. Sending it to the to the device via Web USB and then it's been displayed on the dot matrix display, this. Allows you to well deal. With specifically. Designed for web. USB, devices. And obviously. This is a very powerful API so it, has to be mm has to be HTTP, only and again. It's implemented, in a number of roses Chrome, Android, Linux Mac OS and in Chrome OS as well. But. Definitely this is not the end this is just the beginning so if, you want to stay up to date definitely. Subscribe. To, developers.google.com, slash. Web, slash, updates.
2017-12-05