What's Next for the Web (GDD India '17)
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.
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.