 Welcome to the Chrome Enterprise Technical Community Hour. Today, we'll be talking about progressive web apps, otherwise known as PWAs. My name is Rich, and I'll be your host for today's presentation. Joining me today, I have our speaker, Adriana Hada, who's a developer relations engineer for Chrome OS. For today's agenda, I'll start with a quick introduction of the Chrome Enterprise Recommended Program and the Technical Community Hour. Then, I'll hand it over to Adriana and she'll cover today's topic and the call to action for our Chrome partners. Today's Chrome Technical Community Hour is brought to you by the Chrome Enterprise Recommended Program, which is Google's partner program for third-party solutions that are optimized for Chrome OS or integrated with Chrome Browser. This webinar brings you the opportunity to engage with our team about new features and updates, enterprise development best practices, and our enterprise strategy. Now, without further ado, I'll pass it over to Adriana and she'll kick us off. Adriana? Hi, I'm Adriana Hada. I'm a developer relations engineer for Chrome and the web. Give me just one second to switch to the presentation so that I have the power. OK, hopefully, you are now seeing my speed. Yay. So what are we going to do today? First of all, we are going to walk you through what PWAs are. We're going to talk about some features in a specific. And at the end, we have a form for you to feel with your feedback on the capabilities and maybe you are missing a capability that we should bring to the web for making your web app happen. First of all, I know that the term PWA is not the easiest thing to define. If you search in Google what a PWA is, you get hundreds of definitions. So I encourage you to see for the purpose of this presentation and also for life, see PWA as the toolbox to create these app-like experiences. It is the capabilities that enable businesses to create polished experience, deployed, and build on the web that comply with the mental model that users have on what an app is. I will walk you through the reasons that it is important that we have the ability to create these web apps. And I want to start by talking why it is important that we have web apps. I don't know you, but I want to know why I'm investing my time in checking out these capabilities and adding them to my site. What are the benefits that it brings that we have web apps? And it is important to talk about why, because in terms of the web, they tend to have a little bit of not-so-glamorous reputation. And we hear a lot of why not. Why not have app experience on the web? For example, some of the things that we hear, apps are capable, the web is not. And yes, sometimes it is definitely easier to launch on a single platform when all we have to care is that platform so we have new features there than the web that serves all users, across browsers, across platforms. But yet, even though if it is sometimes slower to come to the web, even before the capabilities that I'm talking about, powerful apps that people access directly on the web have existed. People have built entire businesses around these apps. We have Google Docs. We have banking systems. We have education hubs. We have customer support hubs that people know how to access and how to use just on the web. And even though we tend to say, oh, the web is not as powerful, we also use web features embedded in our platform apps. We, as the web platform, have to give developers the tools so that they can reuse the features that they build in the web because there is interest of using these features that you build on the web once and you can use across platforms. So instead of seeing the web as not as powerful, I say it as powerful because of the usage that it has. Another why not that we often hear is users like apps. Yes, this is true. I've heard them like I like the access on my home screen. I like to have it running on login. But there's also the cost of maintaining multiple apps. It is very costly in terms of resource, knowledge. There is also the issue that I think more than apps, users like a consistent experience. They like to know how to use this technology that they are using. And the web is actually the platform that allows you with a single polished UI, especially with the latest CSS features like scroll driven animations and view transitions to give the users this consistency, this knowing of using your product across multiple devices, which is important because it is a fact that users use apps across multiple devices. We have some tasks that we do on a small screen. Maybe it's a really fast check or maybe it's not all the features, but we use our phone and we like to continue doing the same apps that we use on desktop. So it is important to have availability for users in these platforms and the web seems to be the platform that actually give us less maintenance cost. The last counter argument that I'm gonna talk about today is we often hear users don't understand web apps. Maybe, but even if this is true, users do understand products. We don't hear users saying, look, I use the YouTube app or I use the YouTube website. They say, I use YouTube. So what is important is that relationship with the user that understands their product, your product, and how to access it and also users adapt. The truth is like, if you would have told me a couple of years ago that a simple game for guessing words would have taken the entire world and everybody was gonna be using it and it wasn't even installable. I would not have believed it and I work on the web. But the thing is like people adopt the word without worrying if people were gonna understand how to use a URL or not. People still understand these concepts. So instead of, once I have talked about the why not, we also don't talk often about the superpowers that are unique to web apps, the why, yes, that already exist. And a really big one is the web. It's where users already are. The web is where we go for search. The web is where business show their advertisement because that's how users access them is when we go for entertainment and like you might notice the first thing that you do when you have an idea, when you're launching a product is you reserve the domain name and it's because you know that's where things go viral. That's how you access your users. So why not give your users that app experience just one click away right from the web where they find you. There's also the superpower of the web that the experience that we build on the web are meant to be shared by everyone. And when we talk about a successful product, we talk about a product that is used by a lot of people that is shared by a lot of people. So the web gives us that, gives us that virality by making it easy to share. It is the place to collaborate face to face. We all like having one link at the Google Doc. Everybody jumps in and can see the changes like without worrying if someone hasn't downloaded the app or someone doesn't have the right platform. Accessing meetings. We all like just one click away and we're all talking. Playing games at the same time. These are things that platform apps still have not catch up with the web. So again, why not take advantage of that? So hopefully now that I have given you some incentives of paying attention to how can you serve your users better on the web, I can give you a little bit of the toolbox. The first hurdle that usually developers have to jump for accessing these capabilities is enabling installation for their website. And it is important to consider adding installation for your web app because it unlocks other features that otherwise we don't have like displaying as a standalone app, accessing to home screen, docs, being able to share with other platform apps. And so it's not about just telling the user that you are installable but also about the advantages that it gives you to re-engage your user. And on the screen there is a link that gives you instructions on how to make your web app installable. But it is very likely that you don't want to stay with just making your app installable and figure that users will get to install your app just on their own without any help. Because even though users adapt to the truth is the knowledge about how to install a web app is not as common. So for now we want to help them get there. They know that the install that they are seeing in the browser is not the install that they know because the install that they know is the one on app stores. So how can we help them get to that install and to keep your app? That's the goal. One of the things that we can do is create a custom install flow and I will show you instructions on how to do that or where to get the instructions. The important bit here is that you can show your own controls for installation and at the time that you show those controls you can tell the user what advantages are there for them to keep your app. I have this example through the entire presentation and it's just a little demo app for counting stitches for people that need. So it tells people like if you install me you can have me everywhere and whether you have connection or not you can use it and these kind of things that for every business is going to be specific but it really helps your user understand your product. With a custom install flow some of the benefits that you will see is that you can add the instructions so you're going to increase the chance that a user is going to install your app because maybe they are not familiar with the browser UI but they are familiar with your product and they're going to see those custom controls easier than the generic ones from the browser. You can choose the best time to prompt and again this is based on your business maybe if you are an e-commerce site the best time to prompt is after they created an order and they can track the shipment maybe it's after they added a product to the cart and then you can tell them like we can send you promo codes via notifications things like that and you can also collect metrics to improve the experience and make more accurate these work to prompt and which controls the users prefer to get to keep your app to capture your users to come back to your app and now here are the instructions for creating this custom installed and if you need access to the QR code you can pause and then we'll continue so I'll keep going. Another capability that we have available for creating this more familiar InstaUI it's called the Richard InstaUI and it consists of a larger dialogue that allows developers to add a description and screenshots of their apps as it runs in a standalone mode it helps users because they are more familiar with the install from the app stores that looks a little bit more like this and it gives the developers an opportunity to highlight and tell once again the user why they should keep the app as a standalone app to implement this feature it's a relatively simple change from your web app manifest you add the array of screenshots those are the screenshots that are going to show of the app and the description telling the user what the app does and why they should install it just a note for if your web app runs on different form factors you can indicate which form factor is for which screenshot using the field form factor in the case of desktops is form factor white another feature that we don't talk or we don't talk in so many terms about the web is look it can work without internet and we have talked in the past about websites working without internet to give users maybe a better experience but just letting the user know like hey you cannot do anything because you have no internet or even it used to be a requirement to have some sort of offline experience for being installable that is no longer the case but moreover we don't talk often enough what a differentiator working without internet can be and it's probably impossible that you can offer all of the functionality of your app without internet because it is meant to be shared it is meant to be used with other people but there might be some features some characteristics that your user still can use and it's worth investing for adding that audience for your product so you don't have to implement your entire app but the idea is like you can be the app that users reach when they are in airplane mode or they don't have the right connectivity it depends on how often this is needed depending on the infrastructure where you are used but definitely hands down if I have, I don't know, a to-do task app and I have one version that just tells me you have no internet, you cannot do anything and I have another one that lets me add my tasks and they will be synced afterwards I'm going to go with the second one so this is what you want to bring to your users and look, I know that the demo app is just a small app with limited features but with a couple of lines of code a couple of using caches some local storage these apps functionality it's completely available even when users are offline but don't get the perception that being available for offline is only for small products or small businesses we have the case of YouTube that enable the capabilities of downloading videos and still being able to review the videos when you don't have connection they increase their piece of their audience to those users that go in the subway and want to see you watch YouTube and you can read all about the technical details of what they had to do on the link moreover, as I mentioned before if you want to implement some of this offline capability you will have to use things like background sync to detect when the user come back online and sync the data and you probably will have to save the data locally in the meantime and you need caching so that the resources are available when the person doesn't have a connection and you can reach your servers the good thing is like as you invest in building these features the same technologies that you're going to be using will help you when the users are online because when we use caching for example we are avoiding or delaying a trip to the network and those resources tend to be served faster and makes your app more performant more resilient and gives the user a better user experience overall not only the ones that access it when they are offline but also your regular users that do it when they are online moving on to another characteristic of web apps that it's very popular but it's also very unpopular and I know that it's a hard journey to implement notifications it's hard for users, it's hard for the browser it's hard for developers but the thing is like it's so important for developers to engage their users with notifications and we users do one timely well-designed notifications for example some of the things that come to mind that we do use notifications when there is somewhere that I need to be my calendar notifications are on it's important for me when there is an action I need to take let's say a subscription is expired and I need to renew or cancel I'm going to have those notifications on when there is something fun that I want to do I don't want to have notifications for all the stores in the world but maybe the ones that I buy on frequently I want them to send me these counts I have this app that is for playing board games across the world and it sends notifications when it's my turn I'm going to have them on so we have to have that chance to connect with our users maybe you need chat notifications because it's part of your work we have to offer it but it is definitely good to have certain design patterns to increase the chances that the users are going to keep them on and respect the user also as when and how they want to use our notifications one thing that helps is to guide the users before the browser pop-up we will still have to ask for permissions that is not changing Chrome is working on making it better and more user friendly but they will have to accept the permission but you can tell the users before the pop-ups surprise them you are going to see this pop-up click yes on the notification because I'm going to send you these counts if you do use dialogues and tooltips as required for guiding the user on your own UI you are closer to the user it's better that it comes from you than the generic one from the browser that the user might not be sure why it is showing, where it is coming from use those UI elements that you have available and let them know why your notifications will be useful they might need a little bit convincing if they are going to click yes they need to know what is it that they are getting from this and as I was saying let them know that they have the power to check the configuration whether they want to receive notifications or not that they can turn them on and off whenever they want for example, Google chat on desktop has a page for your notifications you can choose your sound and you can turn them on and off so it also has other features for turning them off and snoozing and all that but it's important that users understand they have the power to interact with your notifications in terms of implementation you usually create your UI elements you schedule your notifications and you receive them via a service worker and you show the notification the user interacts with it awesome if you want the very technical details on how to do it step by step you can follow the link on the description on the screen now I'm going to go a little bit on a rapid fire of some other features that you can explore in PWA it's not an extensive list but it's some of the exciting ones that I and other developers like to start one that goes well with notifications that I was just talking about it's the Badgen API it lets you add a visual indication a little dot or the number of notifications that people have on the app let them know that there is something that is happening in the app and they should check it out we also have shortcuts that help you save users time by adding this little quick actions menu and lets you add help the user go from the screen wherever they are seeing your app icon to directly the action that they want to create making it easier to come back to your app and do their work we also have this opportunity to get creative with Windows Controls Overlay and like make your app really belong in the operating system and Windows Controls Overlay what it allows you is to take charge of the title bar in the window and here you can see I modified the demo app so that it has its own controls in that little toolbar and I've seen it again in media players and you have the controls there you can display information about your notifications any timely thing that a user can take advantage of writing there another feature is that your app can handle files it used to be a pain to do files on the web you had to upload the file modify the file download the file and hope that it was okay otherwise you had to go do the same thing over and over right now you can even configure your app so that it handles files on a double click like any other app it opens in your app you make your notifications you click save goes directly to the file system next we have run and login it is possible to tell your users like look I am a chat app you want to have me when you run and login and they go and configure a click away and the reason that I did the rapid fire it's because in the past couple of years it is a lot of features that have been launched and frankly I don't think you want me talking for days about each of them but I encourage you to go check out which feature will make your users life better you know your users better you know what is it that is going to make them happy and more engaged so you know because of this you know better what is it that your app needs to go to that next level and serve your users across devices across platforms you will have the ideas we do have the documentation if you want to learn more you can go to web.dev slash learn slash pwa or web.dev slash pwa the first one is a curse step by step how to create one of these installable apps and some of these features and the second one is an overview lastly if you want to get your word in with the team that is building these features if you have an idea of how to make any of these features better my team is all ears we're very very interested if you have a blocker that is preventing you from launching your product on the web we would also like to hear from you so please use the link in the screen to communicate with us and let us know what are your thoughts about these capabilities thank you so much it's been a pleasure I am looking forward for your feedback thank you Adriana gonna go ahead and switch really quick so we can wrap up alright please join us in our next webinar on August 23rd that's going to be about storage for progressive web apps registration is now open so please visit the technical community our website to register in closing please visit the chrome enterprise developer website for additional information to supplement your learning that concludes today's presentation we look forward to seeing you at the next webinar thanks for joining and have a great day