Going Big: PWAs Come to Desktop and Chrome OS

[Music] good morning and welcome also to our live streaming audience it may not be very early where you are so thank you my name is Paul I'm a product manager on Chrome and I'm Dominic a software engineer on Chrome we're here from Sydney Australia today are there any Australians in the room ah terrible why aren't we all all here in in person well but before we get started let's do a bit of a show of hands how many of you here have heard of progressive web apps Oh almost everyone fantastic and how many of you have actually built a progressive web app well fantastic getting to half I think great so for those of you familiar with progressive web apps already we're gonna show you some of the things we're really excited about both what's happening now but also what's coming down the pipe in the roadmap if you're new and you're thinking what's all this fuss we'll try to explain we talk a lot about how the web is universal and that could mean a lot of things but what we mean today is that anyone can publish and anyone can access content on the web you don't need to be well-known or wealthy and it doesn't matter what device is your end-users are using and this was true in the beginning when websites were basic static and images and text but what's really interesting is that it's remained true today even as we have expanded the capabilities of the web to do things like rich media streaming interactive graphics and really full web apps you can still more or less create at once and your users can consume it anywhere on any device they happen to have this is really important as devices have really proliferated and exploded so as a developer today you don't really have to think about the number of people ESA's and devices and all the different details that happen when your website goes out and people consume it anybody can really access it you've got hundreds of vendors hundreds of form factors all sorts of different geographies and industry niche it just works but there's one area where this really isn't true today and that's applications if you're building an application you still have to think about which platform it's going to be used on and you have to develop it once for every major platform so one of our big questions here was why should this universality only work for websites why can't we bring this functionality to applications so that as a developer you can make your application once and have it run on all these different devices so what all the fuss is about is we'll talk today about how that's really starting to happen and we're really excited about that but before we can really talk about applications we need to we need to look at what that word means and we get this question a lot people come up to us like great progressive web apps so what's an app and everybody has their own angle on it so just to sort of put a stake in the ground will tell you what we look at as an application so we take a step back and look at the web the web does a lot of application like things Gmail and maps brought rich web apps more than ten years ago and fifteen years ago and ever since then the valley and unicorns around the world have really leveraged this to build build their businesses rich web applications amazon.com Facebook all these things so today it's a huge part of the tech industry but they still don't feel like an application they don't feel like a Photoshop or a word so why is that if we put apps up next to what we sat on the web they stand apart in a number of ways you can launch them from an icon on your desktop you can launch them when you double-click the right kind of file when you launch them they open in their own window and that window has a consistent UI that really makes it feel like one person designed it it can start up offline sometimes they don't do much after they start up but they can always start up and they can take advantage of all of the cool tech in the latest devices fingerprint readers and new accelerometers and all that stuff so when we look at applications these are the kinds of characteristics that we think matter and our goal is to bring those capabilities to the web directly using pwace we want to break the web out of the browser so that it can deliver this app-like behavior we're not really alone in trying to crack this problem if you look at technology architectures like electron like Cordova like react native this is a common kind of desire how can I use this web technology to build native apps PW always take this idea just one step further and actually build this directly on the web we want to bring users the best of both worlds and we want to make it so that you spend less of your time but sing with different platforms and more of your time and effort on making your users happy so how's that working out so far DOM is gonna bring us up to speed thanks Paul let me take you back a few years to the start of our journey with PW A's on Android in 2015 in a mobile first world the mobile web was in a particularly bad way and users had clearly shown that apps were their preferred medium on an increasingly preferred device three key properties really stood out about apps on mobile firstly they often had a faster peer oh you I that was built with the device and touch interaction model in mind next on devices where typing was difficult having a homescreen launcher icon for instant easy access was a paramount importance and finally deep system integration having the app show up in places like share sheets app lists and settings was necessary to make an app feel well like an app those last two in particular are two of those superpowers that we just highlighted so we leant on progressive web apps as a vehicle to level the playing field for the mobile web we focused on encouraging developers like yourselves to build touchable mobile first responsive experiences to address the UI gap we went to work fixing the system integration ensuring that installed pwace interacted seamlessly with Android and other apps we worked on lots of the little details making sure that the app launched properly from push notifications or from web links from other apps since then our core goal has been to use PWS to allow you to build an experience that's indistinguishable from native we've definitely got a lot of areas to improve on but our work has really paid off in adoption user engagement and developer success fast forward to today all major mobile browsers support PWA installation even iOS now will focus mostly on desktop for the rest of this talk but if you want to hear more about the latest on pwace on Android you should check out the talk at 12:30 on stage eight taking chrome fullscreen with trusted web activities back to the history while Mobile is now a dominant of consumption platform desktop remains the dominant creative platform we knew that transforming that success on mobile to success on desktop would require significant additional investment well we made that investment and we're excited to announce that as of March this year we now support installing progressive web apps and running them as standalone app experiences on all Chrome platforms Chrome OS was the first desktop platform to get support in early 2018 we took the time to reimagine the UX for desktop settling on a themed title bar a 3.9 you to access useful browser functionality and the title bar serves as a security surface for us where we can disclose things like permission usage and anchor prompts for features like autofill and translate we followed Chrome OS with Windows and Linux support in late 2018 for both of those we retained the title bar design with the window controls matching the style of the host OS with Linux showing the app icon in the title bar and Mac support was shipped in March this year with the familiar left-aligned traffic light window controls and centered app title now it's possible to do things like this here you see Sketchup web a 3d modeling tool running as an installed PWA and looking native on all three desktop platforms one code base we're really excited about the possibilities that this opens up for all of you the web is no longer confined to the browser but open as an app platform where you can make native experiences available right once run anywhere let's make this a bit more real I'm gonna walk through an introduction to the key ingredients of progressive web apps for many of you who've built them before this is going to be familiar and for those of you who are new to pwace it'll hopefully give you a great starting place to build on but if you take nothing else away from this talk just take this PWA s are just websites with a few additional pieces being websites they should work perfectly well in the browser any browser and being the web these additional pieces also work in the browser users should never have to install a pedo in order to use its capabilities but taken together these additional pieces are the progressive in progressive web apps the ability to be installed to function while offline and to access the api's and operating system integrations that create a compelling app experience even better these pieces all the code that I'm about to show you works on mobile and desktop the look and feel is tailored to the platform but it's the exact same code cross platform and cross browser and that's really the power of the web why we do what we do we might take a little longer on the web platform to deliver capabilities and integrations but when we do it it's done universally so let's start with the first puzzle piece the web app manifest this is a JSON file linked from your pages header element it provides application metadata that's used for a variety of purposes note that we usually expect the manifest to be retrievable without needing to attach credentials to the request if that's not the case for you you'll want to add the cross origin attribute to your manifest declaration and that will cause the browser to make a credential request for the manifest that attaches things like cookies here's an example manifest that our team built for squooshed app it's an image compression PWA that lets you access all of the advanced options offered by native image compressors but right in the browser meaning that you can use it anywhere by the way if you drop by the web sandbox you can see screw in action and hear about how it was built or just visit squish dot app if you're following along on the live stream let me highlight a couple of the key fields in here the name start URL and icons members I used to create the launcher shortcut for the app and the display member tells the browser how the app should be open when it's run by specifying standalone this requests an app window that's independent of the browser there are a few other display modes available but standalone is the one you'll likely want for your PWA to make it a bit more real here's the launcher icon in the Applications folder and in the dock on a Mac after I've installed a screw shop and then when I use one of those to launch it it's gonna open that start URL in its own app window this theme color member provides the color for the app title bar when it's launched on both mobile and desktop that's this orange bar at the top of the window here and that's going to give your app a distinctive on-brand experience but don't worry if you omit the theme color the browser is going to choose a neutral color that fits into the OS theme for you and finally the scope determines the extent of the app this is important for accurate link capturing behavior where the browser can intercept navigations that fall within the scope of your app and then redirect those links to open in your app window I'll talk a little bit more about link capturing on what we're doing there later in the presentation now we're continually adding new members into the web app manifest to help define new functionality but what's really exciting is that as of 2018 last year all major mobile browsers now respect the web app manifest for their add to homescreen functionality and we're seeing an increasing number of desktop browsers doing the same as well here I've got a screen shot of duo hour video calling PWA running in a standalone app window on Chrome OS you can see they've used a neutral theme color and the app icon appears as the running app in the Chrome OS shelf now let's move on to Service Worker this is the secret source for offline a lightweight network proxy that intercepts Network requests and provides cash resources should those network requests fail this is the technology that truly allows website to break out of that online sandbox and work seamlessly offline technology that lets your website's always be apps and not turn back into a web browser tab when the network is down the advent of serviceworker represents a fundamental shift in how you should think about architecting your web sites and your web apps offline first rather than online first we've seen time and time again that building your app from the ground up with offline in mind works way better than trying to retrofit offline functionality after the fact and just like the web app manifest all major browsers now ship full support for the serviceworker api there is no reason for modern web apps to not be built offline first just like native apps using service workers let's dive into what that looks like I'm going to walk through how you can use serviceworker to provide a simple offline fallback page in place of Chrome's offline page this is an easy way to keep showing users your themed app UI when the network isn't available first we wait for the page load event to register a serviceworker and that's to make sure we don't block the page load once registration is complete the commands in the serviceworker dot JS file are going to be run you can specify an optional scope for the serviceworker that denotes the extent over which the serviceworker has control the navigations that it's going to be intercepted this should definitely match the scope in the corresponding web app manifest file to ensure that the serviceworker controls all of the URLs in your app so let's move on to the serviceworker j/s file in here we wait for the install event to fire and note that this doesn't have anything to do with installing your PWA we're going to get to that in a moment this just means that the serviceworker is ready to go at this point we can create an offline cache using the cache API you'll notice that I've versioned the cash name so we can easily invalidate it should the content become out-of-date so once we have a cache open we just pass it a list of the URLs we want cached and then we'll the cache will go and fetch those and store them ready for use later the cache itself Maps keys of requests to values of responses in this example I only need to cache the one page because the entirety of that page assets Styles contents and scripts they're all contained in that one HTML file in Lyon and no other network requests will be made whilst loading so now we've got that page cached we need to ensure that we retrieve and serve that page when the network is down and we do that with a fetch event listener which will be fired for every Network request made by your site this allows the service worker to intercept all those Network requests and substitute them if necessary now I've emitted a couple of details in this example that you'll want to look at like patient validation and navigation preload to ensure good performance so when that fetch event fires we're going to use a network first strategy in this example we're going to respond to the fetch event by calling the fetch method and that sends the request to the network should that network request fail we'll catch the error open up our cache and serve the offline page that we stashed earlier ensuring that the user is presented with app themed UI at all times now this is an incredibly simple example of offline support it is the bare minimum that you can do we're not even bothering to cache specific resources just a single page to display when the network is not available you can and you should do a lot more and many of our partners have done so creating cache first loading strategies where important content is always available and important user journeys are always accessible no matter the network status buffering new navigations for syncing with the server later on now serviceworker is an extremely low-level api you probably want to avoid writing all of this caching yourself if you can avoid it and of course being the web there are plenty of libraries to help you out one that we really like is work box which wraps the serviceworker api and protects you from some of the dark corners and sharp edges and it also means you can avoid having to write your caching far by file and instead use capsule routing paths here's an example of how powerful and flexible work box can be I'm using the routing library to specify that CSS files should be cached with a stale while revalidate strategy that means that when we load a CSS file we race the network and the cache and whichever one gets back first we send that response straight on through the first time the network is going to win because the cache is empty but then that requests will be transparently and immediately saved in the case and from that point on it'll be available offline you can find out more about work box at work box jeaious org it really makes developing powerful offline capable web apps easy and paul is going to show us one in action so we've actually started to use these pwace to ship some of our core apps in Chrome OS and we use some of the goodies that Tom mentioned this application uses work box and web assembly so I recorded a video of canvas this is our drawing app to show you how it can work completely offline so this drawing was done by a colleague of mine using this app when I was planning the talk I asked around to see if we had any cool illustrations that we could use I was expecting something living up to my high standard it's like a box or a circle but this is what I got so this is what we're gonna go with so in this video first I turn off the Wi-Fi and you can see you know that once I turn that off there will be no more network connectivity and then the artist uses the stylus Chrome OS tablet to sign his name and the key thing here is he didn't know anything about the offline status he doesn't care whether it's connected or not he just uses the app the same way regardless and the serviceworker syncs it up next time the device connects thanks Paul so once you've got a web app manifest and an offline enabled experience powered by service workers you can add your own UI to prompt users to install your PW a turning it from a website into and install that we strongly recommend taking advantage of this on desktop app discovery still overwhelmingly runs through search and download links replacing those download links with a PWA installation prompt allows for a smooth seamless installation experience and transition into an app window for your users it means you're not relying on users finding the browser's own installation prompts installation is a powerful operation since it gives your site a permanent presence in the users launcher so when your site loads in the browser Chrome run some checks to determine if you're eligible to prompt for installation now your site needs to be a PWA so have a manifest have a serviceworker with offline functionality and you'll also need to have seen some user engagement since installation prompting shouldn't just happen the first time a user visits your site when your site passes those checks which could be run dynamically through the lifecycle of the current page load the before install probe devan will be fired into your top-level frame you'll need to add a listener for this event on your window object first up that event handler needs to stash the event away somewhere that's accessible later since you'll need to call the prompt method on the event to actually trigger installation putting the method on the event ensures that the user can't get an installation prompt unless the browser has verified that the site is eligible before install prompt firing is your cue that you can enable UI in your app to ask the user to install for this simple example I'm just activating a disable installation button when the event fires but more broadly an installation prompt usually works best if you have some UI to tell the user what's going to happen if they choose to install and we've got a demo of what a good example of that looks like coming up in just a moment finally we wire up a click listener on that now activated install button that calls the prompt method on the stashed event this is what triggers the browser to show the installation prompt without that click which signifies user intent the prompt method is going to reject and not show an installation prompt the event also has a user choice promise member that will resolve with the users response to the prompt whether they accepted installation or not another useful event to listen to is the app installed event which will be fired if the app installation is triggered and successful from any source now that includes before install prompt but also mechanisms that the browser might offer such as with a three dot menu prompt so you can see this come together in a few mainstream apps I music Spotify on my Chromebook here and you can see that there's an install app link on the left hand navigation when I click it you see the familiar confirmation dialog and then boom it's installed in my launcher and in its own window so this is this is you can see thank you Spotify you can see this is this is how you can actually integrate these before install prompts events that Dom is talking about to encourage your users to install at the right time now one thing that that was really is visible in that earlier video but you'd have to really be looking for it to see is this little plus in the omnibox this is a feature coming in early August with chrome 76 that we're super excited about this means chrome will actually promote your PWA in its most prominent UI space in the omnibox this uses the same trigger as the before install prompt event but you don't need to do any coding to get it it's just intended to be subtle and clear this website is also an app that you can install so let's see how that works in this video I'm installing the PWA up duo which you saw earlier you can see how it works with just a couple of clicks and really no download time I have an app in its own window and I can use it to make a call so now that you've seen the technology in action let's look at how it can impact your users and your business Hulu is a popular streaming platform here in the US you can watch TV and movies at home on your big screen or on-the-go on your phone or laptop if you were a Hulu user with a Windows machine you could use their native app but their native app had four user reviews and poor usage and Hulu started thinking about how to fix it they already had a world-class web experience what did they decide to do you guessed it they built the PWA so here you can see the Hulu PWA installed in Chrome OS on tablet mode it looked good so they launched it within three months 96% nearly all of their legacy app users had switched to using this instead so far so good even better compared with the website Hulu saw the users who installed the PWA we're coming back to it more and they were watching more videos a whole lot more in fact it's still early in our experience here with PW A's but this does fit the pattern that we're seeing because it's in the launcher it's easier to remember and more natural to return to this experience it's also an immersive fullscreen experience so if you're engaged in the activity you're more likely to keep doing it so if you have dedicated repeat users on your website this same pattern might hold for you thanks Paul just some amazing numbers therefore for Hulu so it's really impressive what the app like web can do today cross-platform cross browser from one code base now I was talking to some folks around IO this week and some of them were really surprised to learn that the web could already do a lot of these things access camera and microphone API is use USB and Bluetooth devices or run cross-compiled performance critical code in webassembly we've come such a long way in the last decade but we're not stopping here we know we've got a lot of work to do to continue to expand the capabilities of the web and further improve our OS integration I'm super excited to share some of our upcoming roadmap all of which is being developed out in the open in close collaboration with partners developers and other browsers we are hard at work on a native file system API that will let the web mediated by user consent directly read and write to files on the user's disk not a virtual file system but the real file system and we know that this access is one of the biggest remaining holes in our integration story it's particularly vital for porting existing creative applications to the web and for enabling web native creative applications like Sketchup which we showed earlier to become even more useful alongside we're working on new web app manifest declarations and api's that will let PWS associate themselves with files and mime types that means that when you double-click a file it can open in an installed PWA this will further empower creative applications that are shipped on the web we're also working on new AP is for PW a launch management right now we do some basic link capturing on Android wear URLs within the scope of your PW a will open in your app now that works well there because there's only ever one instance of the app on Android and changing state in response to a link is expected behavior but on desktop that doesn't quite make as much sense you might want different behavior based on the content of that link we're creating a new launch event that will be fired into a PW a as a service worker upon an incoming navigation allowing you fine-grained control to open new windows focus existing windows or post message the incoming data into an existing window but that's not nearly all I picked out several more of our top priority API is that are currently under development in Chrome of course the dates up on the slide a tentative and subject to slipping if we need more time to get things exactly right but with luck we're planning for all of these api's to ship in chrome this year first to origin trials for your feedback before making it too stable a few versions later those three api's that I mentioned native file system PW a file handling and launch event should all make it to you by the end of the year it's incredibly exciting how many new capabilities we're bringing and we really want to hear from you to make sure that your needs are being met or how we can do more to meet those importantly with all of this new API work we don't want to break the web and Lou the existing advantages of our platform our universality our security and our privacy guarantees we're working carefully to close the functionality gaps in the right way collaborating with other browser vendors and working out in the open to solicit and act upon feedback from partners and developers we're working incredibly closely with security and privacy teams to make sure we don't lose those guarantees we've worked so hard to build into the web platform to keep users in control and aware of what is happening our capabilities work is really pushing the boundaries of the web adding much much more native functionality but we're focused on doing this in the right way in a way that doesn't create fragmentation or prevent other browsers from following us PWA is Mary whet the web with native experiences we want to let you show off the best of the web platform and build products that delight users no matter where they are in the world or what device they use empowering the open web empowers you granting the widest reach from a single codebase so how can you get started you can make web apps you can make them offline first turn them into pwace leverage installation and system integrations and take advantage of the best of the web and native worlds hopefully we've shown you just how compelling progressive web apps are as an Universal app platform and how much more compelling they're going to get over the next year so thank you for coming to the talk [Music]

Channel: Coding Tech

Views: 8,946

Rating: 4.8021202 out of 5

Keywords: pwa, progressive web apps, desktop, chrome

Id: ei7WD3jBiRU

Length: 34min 21sec (2061 seconds)

Published: Sat Jul 27 2019