Giving your PWA superpowers
You. Hi, i'm andre today, we're going to answer some frequently. Features. And capabilities for. Installed pwas that were reserved. Previously, only, to native apps and to. Tell us more about what. Is new and help us with some hard questions we have a guest hi, PJ tell. Us a tell us about your role at Google, thanks so much Andrzej I'm, PJ, I'm a product manager on the chrome web platform team I work. On progressive Web Apps usually. Called pwace, and. Basically progressive, web apps or modern. Applications, built, using web technologies, that. Are making users happier. PWA. Is have, a lot of capabilities, of which, one. Is that they can be installed into a user's computer just. The same as any other application, oh cool. So that means we have exactly, the right person in the room. For. People in the audience who are not yet familiar with installable, petaboys can, you tell us a bit more about, what they are and where they are available. Being. A savile is really, a standout feature for PW AAS because. It's giving web developers, the ability to make applications. That, can be started from the, Start menu on Windows from the application, folder on Mac the. Homescreen on Android and iOS and, these. Can really look and feel like, any other application on the device so for. Applications, that users are using repeatedly, being, installed means that, that, app is a little bit more top-of-mind for the user because that, launching surface is is immediately, accessible to the user they don't have to navigate anywhere, in the browser to get to get back to the, application it also means that the application is showing up in the, activity, switcher as, a separate, app and that makes install quite, attractive, to developers, but. I want to be clear that a pw8 doesn't, have to be installed to be a PW a being. Installable, is just, one property of a PW a us. This question about distribution, so, let's talk from what about where, PW A's are available, so, first.
PW Eyes can be installed directly from the web browser on both. Desktop and Android. And on. Desktop. Pwace. Can also be listed in the Windows Store on Android. You, can find PW a powered Android apps in the Play Store these. Is a technology called, a trusted web activity, you, also see pwace, in the Samsung store you. Might have heard that pwace are showing up in the chroma West Play Store and that's an early access feature I'm really excited about so let's, save, a little time at the end of the session to talk more about that oh. I'm. Really, looking forward to learning more about Chrome, OS Play Store but. Before that can, you tell us about the recent features that you think are the most exciting, for developers I really. Wish that we had time to go into everything that shipping because there's. A lot happening right now but. I'm gonna have to just pick a few favorites, for today so, the features that I'm most excited about are some. Of the things that web developers could previously only do using. A hybrid technology, like. An electron app or a Cordova, app and. To. Begin here let me just mention that the ability to install pwace, on desktop is still really new so for those of you the audience who have been paying, close attention I might've seen the announcement at i/o last year this might seem like old news but I think for a lot of the web development community this. Is still a very new feature and people. Are still getting used to the. Super power that, install, can happen everywhere you, can now, write one app and have, it be installable, on, desktop. On tablet, on smartphones. And users, can discover that app on your website in search results, in, play in the Windows Store in a Samsung store and, this is giving web developers, a really, unprecedented. Reach. For. Distribution, of their applications, so. I'm just super excited that this is now possible for they have install. Across. All of these different screens and through all of these different channels the, other, features that I'm most excited about are all, the capabilities, that were previously only possible. With. Cordova. Or electron. So for example, registering. A file type handler for an app offering. An immersive mode so creating, better web games, through. An immersive mode and adding, context, menus for shortcuts, and more so. The, file. Type handler would allow a user to start a web-based, image, editor, by double clicking. On an image in their OS, File. Explorer, that's, that's exciting exactly. That and so like with file type handling, you can register a file extension or mime type so let's say that you've written, a new type of image editor and you can edit jpg, and pink, files you. Could register a file type extension, for. Those file types and then, those files Heights will automatically, open and your editor if the user double clicks on those a word, of warning file type handling isn't quite here yet we expect it to go into Oranje trial in chrome 85 in August and to, be available. Generally sometime. In the fall or winter, looking. Forward for this one to go stable tell. Me more about the immersive mode what does that mean. Immersive. Mode is a term that's just, a board from native it's a full-screen, mode and basically. It, removes all of the operating system decorations, so no status bar no navigation, bar and this is great for games. Or other media, basically. When you want to be able to address every single pixel on the screen. So. I could start a video player a full screen from. Daikon. And a home screen nice. And. What about up short codes, sure. Absolute. Cuts are a way to provide quick access to. Important, functions in the app directly. From the app icon so. For. Example on Android, you might be familiar with a long press on the, app icon on the launch screen so or on the home screen so if you were to long. Press on a home screen icon for say a mail application, you, might see compose, functionality. Directly. In. The menu that appears when you long press on the, mail client app, shortcuts, also, work on desktop, operating systems, and that.
Support, Will be arriving in chrome. 85. Interesting. So that's like deep linking into parts off might be the Blooey directly. From the icon that's on the home screen. Exactly. Switching. Gears a little bit we launched, tracer to web activity at last year's i/o and since. Then we have many, feature requests, and questions from, developers, and, I wanted to go through some of those with you today first. Developers, have pointed out that the wait permissions, work in the browser any native, is different. And that, may stir, users a little bit confused, as an. Example native. Apps gets in the notification, permission by default while web apps need, to need the users to accept the permission first. How. Are how are we planning to solve, those inconsistencies. So. Let's, just start by just, sharing my. Perspective. On the philosophy here of I. Don't, think that users should need to think about what, technology, was used to, build the application, that, they're using. Users. Should really just have. A job you know users just have a job to get done and, we want to, help developers, help. Users as easily as possible so, wherever. It makes sense I think. An installed web application, should, use the operating systems typical, UI. For. Things, like managing permissions, launching. And switching between applications. Just. To match the, users expectations, for, how things should, behave on the device that they're using so. We've, introduced, this concept of, notification. Delegation, into. Installed, pwace, and that means that when a PW is installed it will delegate the, notification, permission into, the, native setting, area on Android, so. Another. Difference between an app installed, from Play and a web for, example is that an app install from play automatically. Receives, notification. Permission, so, we, want that experience to be the same for, Android applications, that were built using a PWA and. That's why we've delegated the. Web notification, permission to. The notification, settings panel in Android and these. Apps can be configured to auto enroll users and notifications, so, that they just. Look and feel and behave exactly like any other Android app and the user doesn't. Even need to know that. This application was built using web technology, in the, future we're going to be adding location. To the Settings panel to of. Course there won't be any auto enrolment for, location because, users, are not Auto enrolled in. Location. Before, location permission on in, Android, native apps either so, we're just gonna match what the behavior is between. You. Know for a native application for, apps that are installed for, say the Play Store or from any, other you. Know distribution, channel where, the, user you, know may or may not be aware that this, application is a web application we're. Going to continue as well to delegate more permissions, and match, OS preferences, over the, next few releases got. It so this will make the experience more seamless, to users regardless. Of the technology that, developer used to build app another. Frequent, request, developers. Sometimes feel that when they make and. Write an Android app using pdaboy and treszura web activity, they, should have a communication. Channel between the native application and the web app this. Would allow them to use native platform, capabilities where. An equivalent, on the web doesn't. Exist already is. This something that is being considered. I'm. Really glad you asked this question because this is exactly, the kind of product, question that I really love and I'd. Like to hear from our audience on this one so, today, you, can pass parameters into. A trusted with activity, when you launch it and you. Can use intents, to, leave. The trust of activity, and pass, some information, into another activity, inside. Of your app and we're, considering adding support for a message bus for, example we, could extend post message, to. Enable a bus, with this functionality, however I don't, have use cases from developers, on exactly. What they need here most. Capabilities, are already in the web platform or, are planned in. You. Know it herb plant as part of the fugu effort to, add web capabilities to, the.
Web Platform so. If, the web platform has, missing, capabilities. I'd. Really rather add that capability to the web then, create, a message bus to native because, if, a capability is part of the web platform then, it's gonna work everywhere, and developers. Only need to have one code base which is simpler and that. Code base will work in multiple. Browsers, whether. The app is installed or, not installed etc. So, I'd, like to turn this just to do a question for our audience what. Do you need to do in native code that you can't do today in the web platform and. Other. Things we could do to improve the web platform so. You wouldn't need to do that in native. Perhaps it's something that could only be done in native and you, really need that message bus I'd, really like to hear from you about this, cool. I'm also looking forward to hear from folks on Twitter or if, you're watching. This live on, the live chat many. Developers, have a native application and, prompting. Users who install a PDA in the in the browser when they already have the native app installed, can. Lead some confusion, is, there a way to prevent the prompts from showing when. The native app is already installed so. That's. A great question it's also probably one, of the the top concerns, that I hear from teams that are implementing, a progressive, web app it's it's called channel conflict and it arises where you're, not sure which, experience. Is going to be best for, the user so, I think the most important, thing for developers to know is that, you do have full control over the, promotion, a PW install so you, know you don't need to worry about. The, browser promoting, your PW a if you don't want it to there are ways you can prevent the. Browser, from promoting the, installation, of your PW a if. For example you have a native app so let's let's talk about how that works first. In the web app manifest. There's. A couple of fields you should know about one is called the related applications, field and this is where you can list native apps for Android, and iOS and, then. There's another boolean, field called prefer related apps and if this is set to true the. Browser's not going to promote the, install of your PW a. Secondly. There's an event that fires when, a PW a passes the install ability check in the browser and when. This happens, developers. Can call a prevent, default method and that's. Gonna block any promotion, of the PW a install. In. Browser UI. Finally. There's. A new JavaScript API just landed earlier this year called, get installed related apps and this. Is gonna let developers, inspect. If the, user has native. Apps installed on the device that are associated with the origin that the user is currently on and just, to be clear this, isn't gonna let you see any app that the user happens to have installed in the device the, app has to be associated with the origin that the user is on this.
API Does. Allow for a lot of programmatic. Flexibility. For developers so it means you you have full control which. Experience, do you want to promote to the user you. Could use for example. User. Behavior, you, could provide the user with preferences. In your, HTML it's. Really up to you how you, want to use this control but it does give you as the developer a lot of control over what, you promote to the user and. When it happens. So. This means I can use this API to check my notifications installed. And make, decisions like showing that sounds crane prompt or not what. If my native. App is using trusted web activity, willed is a pee I use to return. So. Yes, absolutely this does mean that you can use the API to check your native app is installed, at. Russell web activity is, really just an Android app so. It will show up just. Like any other Android app and to. Say this, API will, return it it, will also return if the if. The app is a it, has been installed from the web browser so a PWA installed from the web browser will also get returned by, kit installed related apps. Cool. On the, developer. Experiences, side we've, been working on tools like bubble wrap to help developers, view their project, to use interest of web activity, but, many developers is you wonder if it wouldn't be easier if you could just copy paste in, your own to the Play Store that's, a great question, so the reason why we've been focusing, our, efforts on making this easier for developers on, bubble. Wrap is that, we, could create a much, more powerful much. More flexible. System, for. Developers. For building. Android apps using. A command-line utility. Like, bubble wrap then what we could do in a web interface so. App. Stores are really, a different ecosystem, and they. Have different requirements, and policies and. We. Believe that developers, should have powerful, tools that they need to rethink, the, experience, of their applications, for this environment, and we. Also want to avoid giving developers the. Perception, that they could just drop a website into the store without thinking about that experience, so, there are all kinds of design decisions that should go into building, an Android app whether. Or not it's a PWA powering, that up for, example you know what's the splash screen it'll look like when, you're gonna hide it when to show content, didi notifications. There. Wouldn't be that's this kind of flexibility, for, configuring these options, with, a web interface, that. Being said we wanted to be as easy as possible so we've worked to streamline. It to, the maximum extent that we can with. Bubble wrap and. Make. It a powerful but, flexible and easy-to-use, developer. Tool what, about police, or policies, do, Android, apps that use PW inside the tricity web activity, Stu needs to comply to those policies I think you said the magic word there which is Android, app it doesn't matter how your Android app is built whether it's built using PWA. S and web technology, or whether it's built using Java or : play, policies, apply to all, Android apps distributed.
In The Play Store and therefore, they, also apply to Android, apps built using progressive. Web apps gotcha. So same same store policies, apply, what. About applications. Designed for children can, developers, use web technology those apps if, the. Target audience for your application, is children, you, need to comply with. The Play family policy requirements, and these. Requirements, are intended, to help keep minors safe from inappropriate content unfortunately. That's really. Difficult for, the review teams to, evaluate, with web apps where the, content, can change and not only can the first party content change but it's, really easy to include third party content inside of a web, application which, can be, unintentionally. Inappropriate, let's imagine that you were using you know an advertising. Network or something, else where you're loading content in from a third party site you might not be able to verify yourself, for, sure whether or not that content, is always going to be appropriate. So, for the time being it's, not possible, to build Android, apps using trusted web activity that, comply with Play family policy we, are working on ways to make this possible in the future got. It so it seems PWAs are crossing, over ecosystems, and developers need to adjust some of their expectations, from that. Developers. Using trusted web tivities are also. Expected, to fulfill your quality, criteria is that wide that criteria, exists. Yeah. Nobody, wants, an app store that's, gonna be cluttered with low-quality apps and. We also want developers to, succeed, with their apps in the Play Store keep in mind something that's really different about distributing, through the Play Store, than. It is to you know just sort of build a PWA on your own site is that. These apps have user ratings, and reviews and we. Want to make sure that developers are set up for success to. Get good, ratings and reviews on an, aunt for their app so at a minimum users. Expect apps that, they install from the Play Store to, look and feel app like to be fast to work offline and that's. Why we have quality criteria for pwe than in the App Store and this is exactly what progressive. Web app criteria. Has. Been intended, to do from the very beginning so, first, I want to share that, there are certain types of events that can happen to a web application that are effectively a crash and these are things like, you. Know a 404 happening. These. Are things like failing, an offline, check when the user goes offline. And. Returning to chromed I know this is effectively a crash. Failing. The digital asset links verification, which is something you need to do with a trusted web activity, to verify that you are the owner of the. Content and the owner of the application, in the app store so if any of these things happen. Starting. In chrome 86, in October, we, are going to be mapping those crashes into, Android vitals, crash events and you. Will see, Android. Apps begin to crash if you if users are running into 404s in your application, etc so, that's just something that developers should be aware of and we're, we're. Making another announcement with more details about this the, second thing is on, the performance, side, right. Now don't. Have a date to announce with respect to, enforcement of enforce of performance, but, developers, should be aware that the.
Criteria, Is a, full batch PWA, and a. Light has performance score of 80 or better and you can use webpagetest.org, slash easy or, PageSpeed insights against. Your start URL as the fastest, way to check whether, or not you're meeting this criteria, because having, the app launched quickly is an. Essential part of having a great application experience, for your users, we. Will be providing a lot of notice as to, when enforcement, will begin it will be in 2021, it won't be in 2020 for the performance, and full, batch PWA scores so, Xbox hear more about this later in the year so. Less one tutor. Has recently launched. Their pdaboy, on the chrome s Playstore which was quite exciting, can. You tell us more about how, they did how they did it and when. It is this is becoming january available i'm, really excited about this right, now this is an early access program and it requires manual, intervention from our team members so it's not something that we can extend to everyone, in the community but. We're working on getting it to general availability and, when. That rolls out it'll be possible for everyone to just do this themselves I'll. Give you a hint it uses, trusted web activity so if you're building a great trusted web activity, it'll, be really easy to, make. Your. Progressive web app available in the Chrome West Play Store in, the future and I, hope we could share more about this in the second half of the year so. What are soda web activities, are coming to Chrome OS nice. Well. I think we covers a lot I wish. We had more time to discuss our YouTube, and, though so for those of you who are watching, please. Do reach out to us or Twitter if you want to give feedback and if, you're joining watching this live please. Join us on the live chat we'll see, you there and thanks so much for watching, yes, thanks for watching. You.
2020-07-24 14:32
