Progressive Web Apps (Chrome Dev Summit 2015)

Key Takeaways

welcome uh I'm Alex Russell I'm a software engineer on the web platform team and today I'm here to tell you a little bit more about the progressive web apps that Darren mentioned earlier in the keynote if you were here last year you might have seen me talk about a nebulous future in which we might someday be able to install web applications I attempted some demo Gods with early service worker and push notification demos which kind of sort of almost worked um and you'll be glad to know that I have no live demos for you today so rest easy so uh we made all these promises and what happened right that was all pre-released software nothing kind of really worked and in the last year we have shipped everything I talked about service workers push notifications add to home screen it's all real today and I think if you're a web developer this is amazing because in Chrome and in Opera and soon in other browsers you'll be able to use all this stuff you'll able to take advantage of it and we ship the tech that's really what matters isn't it is it I think it's an interesting question because if you look at other attempts to take web content web applications take them offline make them usable on mobile devices you'll see that they kind of sort of worked out I mean from wijs applications to Palm OS applications web OS sorry uh react native Firefox so packaged apps Chrome packaged apps uh Cordova apps from Android and iOS we've had a lot of attempts of taking web content putting it in a different container and making it run offline giving it the same capabilities that I was up here talking to you about last year so why is this different is there any reason why we should think that this is going to work when those didn't and I think that the difference at least to me is something that Darren highlighted earlier it's the power of friction the other systems that you may have used to take your web application offline embody an essential tradeoff they give you these capabilities but they force you to change your deployment and usage model you can't just click on a link anymore you have to go wrap up your application put it in the store and as a user you have to go to that store to download it while the technology inside those runtimes is web- based the end products aren't and fundamentally if you can't link to something it isn't part of the web so workers and the features that build on them I think are important because they keep URLs and they keep that low friction usage experience at the center of everything we saw earlier that users spend a lot of time in very few native applications but they visit many sites every month URLs are the web's superpower combined with a security model that puts users in control at every moment the web reduces friction to use like no other platform in the world ever has and a surprisingly consistent theme that we hear from user studies about mobile is that users don't really feel comfortable installing a lot of applications some of them worry about the kind of over broad permission demands that some apps request UPF front some users are very worried about space like to was highlighting earlier some users are concerned about privacy we don't really know what the application is doing all the time the web is earned a significantly better reputation in all of these areas and when combined with the low friction to build and use a website it means that the web is how users most frequently discover and interact with new Services as we talk with developers who are trying to get users to use their native applications we find that over and over again they tell us that it's both hard and expensive to take a user of their service on the web and get them to use their native app fxu is a company that tracks native application ecosystems and this index shows that the cost to getting a user toy out a native application using application ad uh ranges from $1 to $2 it goes up it goes down but it's still in that range and has been for the last year it goes up from there though they track a separate metric that they call cost per loyal user and that number has gone from $2 a year ago to over $4 today okay so let's say we had an air horn application I don't know why you'd want an air horn application to annoy your friends but let's just say you wanted to get somebody use one and what we see repeatedly is that it costs about 20% of the users who enter your funnel for every single action that they have to take so let's say I got a thousand of you uh intrigued in Annoying your friends relatives and co-workers okay uh first if I told you about this application you want to go try it out you'd have to go load the store and you'd have to go find it and you'd have to click install and then you'd have to accept the permissions of course because you know you can't just install it uh you have to download and wait and then at the end you get to use it that leaves about 262 of us who are now freshly able to annoy our co-workers friends and families so if you lose only 20% at each step it's pretty much a disaster and this is when we talk to developers sometimes an optimistic estimate okay you say sure sure uh but what if I was able to reduce that number of steps Say by prompting users when they land on my website or getting them to go directly to the App Store as opposed to finding it someplace else okay sure sure sure um let's look at it you get users to click install from wherever they land they have to accept the permissions download wait and then find and use it we're still below 50% for total conversion rates the web reduces the number of actions to experiencing your application to a single click low friction is the web's secret weapon and this Dynamic is playing out in real time over the past year we've seen a drum beat of companies starting to do the math and coming to the conclusion that building only native applications isn't working you heard you heard earlier today about flip word's growth since they dropped the app only strategy and in some areas like publishing Forward Thinking companies like Vox and the atavist are even shutting down their native apps entirely and just betting on the web okay so how many of you have landed on a site for the first time that puts up a motal dialogue box asking you to take a survey about how your experience is going for right okay yeah it's not just me this is exactly the experience that many sites are giving users when they first land on their mobile sites the message you get is roughly you're not welcome here even though the content is here please go use this other version of our service in fact it's gotten so bad that earlier this year the search team and announced that sites that put up these sorts of full page interatial to encourage users to download their applications would no longer qualify as badged mobile friendly in mobile search results and that policy went into effect recently while it's easy to be upset about this sort of frustrating frustrating user experience it's perhaps more constructive to get to the root of the issue and ask if it's so annoying expensive and ineffective why are so many sites still doing it as we talk to developers and businesses we find mind that the root of the issue is the Mason capabilities that I was talking about earlier the items that have come up over and over and over again among a long list though are the ability for an app to work offline to appear on the home screen and to send push notifications even when the app is closed taken together these capabilities are so powerful that it's rational as a business decision to spend the time money effort and even annoyance to get users to use native applications develop ERS who are trying to provide a compelling user experience on mobile have told us the same things that users have which are that they expect access to a certain set of capabilities before they'll consider something appy and being appy is now what it means to be competitive so what if the web could compete what if we could combine low friction the incredible reach that we've just seen and add re-engagement the features we've been developing as Open Standards over the past few years manifests service workers and push notifications address these con turns head on they finally let us deliver an air horn app in the way that starts in a tab and if I want to keep it then becomes more integrated with my user experience in the OS earlier this year Francis bman and I were talking about the process of taking something that's just a web page and upgrading it to feel more like a native application over time these things are on the web they're part of the web they run at URLs you can link to them you can navigate to them you can find them in search but they can become more than that and if they aren't just web pages and they aren't apps in the sense that they don't require you to build your site a totally different way or go to a store to get this thing what are they I mean web animal vegetable mineral which which are they our answer was to call these things Progressive web apps they start out as tabs but then they stage a jailbreak with users help that breaks them out of the tab experience and gets them onto your home screen they get them into the launcher they give you a splash screen they become more than just a tab but they do it based on our user consent so going back to the airh horn.com upgrade process which by the way you can try it right now uh Paul killan built this thing it's great uh you can annoy your friends relatives and co-workers The Prompt that comes up at the bottom of the screen is browser UI it's something that Chrome is showing on your behalf and it shows up if and only if the user has come to the app enough to let us think that it's probably valuable to you we want to have reasonable confidence that it's both going to be appy that it's going to actually do the things that an app should and that the user might get value from it so when it's launched from the home screen you'll note that it's relatively indistinguishable from a native application it shows up in the task list without extra UI it doesn't have a URL bar necessarily and they even have Splash screens so you might wonder why we would build Special UI to prompt users after all it's sort of been possible for a long time to manually add sites to your home screen you could for instance start by tapping on the three dot icon menu open that up click add to home screen manually click uh add and then okay it's been added and yeah okay it's a lot of steps is kind of the takeaway I think it does show up it does work but then the next question becomes why isn't this just bookmarking what's different about this process and bookmarking after all they're just actions that save a URL to different things in one case my bookmark list and in another case my home screen why didn't we just add an option in the bookmarking flow to let you add a shortcut to your desktop as well the key difference here is what separates apps from Pages you can book airh horn.com or you could book bookmark a specific location at airh horn.com that lets you get to a fog horn it's a different thing and we use URLs to name many different kinds of things in fact on the one hand a Blog is what you might think of logically as an application example.com for instance you might navigate individual items with inside the blog and that's a separate entity it's a smaller bit of the overall whole the same blog hosts many articles all of which get their own URL from the browser's perspective though these things are equivalent URLs don't give us any hint about what the application is versus what the item is we don't really know they're universes under themselves we start the process a new every single time that you load cont content as users it makes sense to bookmark individual items right but it makes a lot more sense to add the application to our home screen one way we resolve the tension in our existing single page applications is to create common UI we build these application shells that host all the different sorts of things that we're going to navigate around conceptually this is the UI that will always load basically no matter what you do inside your application it's the application logic and the stuff that you need to load in order to be able to show any content at all Jeff posnik is going to be helping us understand how to build and cash application shells in a few minutes but the important thing to understand right now is that your appell is the stuff that should always load no matter what an appell should at least boot up enough to be able to say sorry mate I'm offline I don't know what to do here as we survey end users they frequently tell us that what makes an app and app is the ability to work offline and yes many Native applications do a terrible job of this but at least you know what's the apps not the platforms focusing on the user experience like this is very clarifying the overall criteria for something to be appy are clear-cut when you talk to users apps should always start up they should always have distinct home screen icons and apps are things that you want to invest in they're not one-off experiences that you'll never come back to as a result to get the banner that I was just showing you your application needs to me meet some very specific user requirements first your site needs to have a service worker and when it specifies to start URL in the web apps manifest the URL must be something that would load using the service worker all the time even when you're offline next because you have a service worker your site has to be served at a secure origin luckily for debugging that also happens to include Local Host and there are flags that you can send to Chrome at the command line that will let you whitelist other sites but in general that means that you have to have TLS it's 2015 Edward Snowden happened TLS is now the Baseline if your isn't on TLS now is the time to start in order to avoid the spammy behavior we also that we all shook our heads at earlier chrome doesn't show the prompts until the second time you visit an application the required time be between the visits of those navigations changed recently to be much shorter but expect us to keep tweaking this her istic our goal here is to strike a good balance between helping you optimize adoption of your application while avoiding the spaming that I think we all cringe at a little bit okay so to get a great home screen icon and to have a splash screen that really works to be in a task switcher with High Fidelity you're also going to have to tell us a lot about your application and to do that we're going to use the web manifest format and to tell you all about web manifests I'd like to hand it over to my colleague Andreas Boven from Opera thank you hi everyone um my name is Andreas bvin I work for Opera software where I'm a developer relations lead and also product manager of Opera for Android now you may be surprised uh you're at the Chrome Dev Summit and suddenly there's an opera employee talking to you uh but sort of the the context a little bit for that is that Opera has been working closely with Chrome on uh various engine and standardization related topics so since our engine switch uh three about three years ago uh Opera has been very active chromium and blink contributor and just to give you some numbers I know these are commits and you know commits can be small and and big uh but just it gives you a sort a sort of feel uh so we've done thus far four more than 4,000 Upstream commits to uh chromium and more than 3,000 upstreams commit to Blink um so we collaborate a lot with Google on various things uh and this is so and so I'm very happy to be here thank you Alex for for and the organizers for having me so uh Opera as well is super excited about progress Progressive web apps potential uh to lift up uh the web's capabilities so we're really excited about that and we've been working hard uh on supporting them um we are excited because of a number of reasons uh they're live apps and they're part of the real open web they're not being done somewhere in a secluded corner where something happens with JavaScript and sty sheets or so but it's really it's real URLs that being used uh and and it's it's the real open web As We Know know it it's an extra on top of that to enhance that experience there's an ongoing standardization effort which I think is very important so that other browser vendors can also uh start using them implementing them and so on and then we see wide adoption and uh they're also a great match for Budget phones uh these installable web apps they take less space on the device uh and especially in Emerging Markets where Opera has a lot of users uh this is this is an important concern uh people are concerned about you know the the large amount of gabt uh app stake and so uh Progressive web apps are really good match uh for this kind of use case so um in back in September uh we shipped Opera 32 uh for Opera for Android so for for Android with uh support for manifest and this may seem easy uh but it was actually quite complex it was not just a chromium intake and you know there we were we had to do quite a bit of uh of work on it there was a lot of uh interaction required also with with uh the Android and sort of the top layers um and uh we also had to rework our startup sequence uh which had to be Rewritten for uh for making this uh um Progressive web apps uh work well in Opera so uh a little bit about the web manifest um so web manifest store metadata for a progressive web app what this means uh so what this refers to are icons description uh colors and related info that lets browsers create high quality experiences for the launcher icon uh that TK switcher splash screen and so on so what I would like to uh do is have a little closer look at some of the code uh for these manifests to work so first of all we have uh to the pages of our site we have to add this uh or something like this to the Head uh so a link element uh that points to manifest Json file uh that is typically hosted in the root of your site uh and this is what what such a manifest can look like uh and on the right here I will have uh little demo app that I just made for the for the purpose uh of the stock you can also check it out uh and look a bit at the peek at the source code and so we're going to look which parts of the Manifest uh relate to parts of the interface um uh on on the right hand side so when I add something uh to the home screen right now you still have to uh do this manually but we're also working on adding this uh screen prompt so you click on at the home screen you see here this uh this word um is referring to the short name in the Manifest we use a short name because on when the icon is placed on the home screen there's of course not too much space so if your if your app name is too long it will be truncated uh so that's why we refer there to the to the short name so think about using a good short name for your app that looks nice on the home screen uh of course also we use the uh one of the icons of the icons array that you've specified um when you this is another view so when you uh go to the task or to the application Switcher uh there you also see uh uh you know you see it just listed as a standalone app a progressive web app is just listed next to the native apps so in this particular view it's actually really hard to see which is uh the native app and which is a progressive web app which is uh very exciting it really shows you how these applications are lifted up um from the browser uh up to the level of native apps and so in this particular case the the bar on top um shows uh uses the short name again uses icon from our icon array and also the a theme color so in this case I've specified a hue a slightly darker Hue of purple just to uh to go well with the site um then something else uh Splash screens um Opera has added Splash screens you can try them out right now in the latest version it's oppra 33 uh and chrome also has them in the beta Channel um and so how this works is so when you launch the application the moment between clicking the icon and until the full uh page the first view is loaded of your web application there's some time there and so we use this time to show uh a splash screen uh automatically generated uh for this splash screen we use the name so the full name of the web application uh an icon again of the icons array and a background color that sort of uh indicates maybe you want to ma make it match with the color the background color of your web application that you launch later on so um this being said there is also another uh uh coming soon splash screen member in the Manifest and then you will be able to uh Define a custom image but for now uh you can use this one and rely on this one already uh as a splash screen for your application um also word pointing out here uh is that you for the icon and this is just a gotcha here Alex uh stressed this specifically when we were preparing this presentation the size of the icon should be 192 by 192 um to to work well um in the splash screen so then let's look at those last three uh parts of the Manifest I haven't talked about yet uh the display memory is quite interesting display property so you can choose uh between uh Standalone stand alone sort of hides the browser UI and only shows uh the the bar on top uh of the of the OS with the clock and Wi-Fi status symbol maybe notifications and so on and the bottom navigation bar uh so this is what most apps use you can also go full screen this is a more immersive experience uh maybe for for a reader or maybe for a game and so on we'll see another example of that later on and there's also a browser mode you can choose this just will open uh the web application in in the web browser as you would normally do the advantage of that is is that you can uh rely on the browsers built in navigation buttons and so on maybe that's what you want to do for your application and you don't want to create your own uh navigation around your application um then uh uh we go back to the Standalone example for a second and what is interesting here is that the display uh Standalone part of the Manifest corresponds you can use this with display modes uh in C in CSS so you can use a media make a media query that says here at media display mode Standalone and then specify conditional styles that will only be applied in Standalone mode in full screen mode and so on so like this you can make small uh design tweaks uh to give an optimal experience uh for the user once they have added your site to the home screen then uh another uh interesting feature here is orientation you can lock the orientation and this normally you don't have to set this but for instance in case of air Horner uh it's locked to portrait mode because you don't really there's no point in it changing orientation when you turn the phone around so it just stays like this this button will work in all directions don't try it out during my talk because otherwise it's hear a lot of sound uh and then this is another example um you can also try it out uh it's it's on GitHub um it's a little game that we made um and it uh it uses landscape orientation and I've also combine it with full screen and so you get a little game that you can play uh and that uses uh this uh this special full screen and lscape uh mode of the Manifest and then the last part here is the start URL this is the URL that you want to you want users to go to or uh when when they open the app from the home screen um what I've added here is uh question mark home equals true this can be home equals one or home screen equals one or you can just leave it away the point of it is uh that you can it allows you to track where users come from if they've opened your app from the home screen or not so this is just a little tip you can use or not use depending on uh what you need it for um then uh a little something about these app installation banners uh that Alex talked about currently supported in Chrome coming soon in Oprah as well um for this uh ation Banner you uh need your manifest needs to have a name short name an icons array as well with 192 by 192 icon and uh the start URL must match the service worker what this basically means is that you need to make sure that your start URL um must some content must be surfed there even if the application is offline or something like that you the user must always see something they must not get a blank page or an offline page um if all this sounds complicated and you just want to get quickly started with uh with creating manifest there is a manifest generator made by Bruce Lawson you can add URL of your current site and uh immediately it will generate a manifest based on the metadata that are currently in your website you probably want to tweak it a little bit later on and uh deploy it and start using it on your htps enabled site so um to round up opo support in a nutshell is uh we have service workers uh we landed earlier this year we've got manifest support at at to home screen prompts are coming real soon and uh push notifications are also on the radar the the general story is we're really excited about this this will come also to other browsers Firefox is also working on service workers and push notifications and so on and uh we hope to get everybody on board uh and this is uh really exciting for us so thank you very much back to Alex thanks Andreas so Andreas mentioned that there are a lot of options to think through as you build your Progressive web app and put together its manifest and I want to highlight a few tools and techniques that you can use to ease development as you go Andreas mentioned Bruce Lawson's excellent manifest generator but I also want to highlight manura laur's manifest validator uh it saves tons of time and trouble specifically the sorts of things where you leave an extra comment in your Json as we found out to our shagrin earlier this week uh and spend an hour trying to debug it so um yes use this this is great next you are going to find yourself wanting to totally nuke the world clear all the cache data blow away the service workers when you're working with the physical device and the easiest way to do that in Chrome today is to step into the lock icon on Chrome for Android go to site settings click through hit clear and reset and then hit clear and reset and then you're done uh and so that is super helpful when when you refresh the page you should get the new world started all over again while you're working with a physical device um and by the way it's absolutely essential to understand the performance properties of your application on a physical device because they aren't the same as they are on your four core i7 MacBook Pro I promise you specifically JavaScript so get a physical device uh but when you're working with a physical device it's sometimes a hassle to go and try and debug on the device itself so Chrome inspect is probably your best friend hook your device into USB go to Chrome inspect and then you can hit the inspect button which will bring up the full Suite of Dev tools and the forwarding for the screen is the coolest thing in the world because you can actually use your mouse and keyboard to navigate around the application on the device you'll see the Taps show up on the device if you turn on tap highlighting as well and you'll be able to get to De the debugging console you'll be able to step into your service worker inspect the resources on the device all that kind of good stuff um and it's worth specifically highlighting that if you using Chrome Dev today soon beta you'll be able to go to the resources Tab and see on the left hand side the service workers button at the bottom this is invaluable because as jeffy's going to describe service workers in a minute when you're getting through the service workers installation flow you need to know that your service Rec is activated and that there wasn't an issue when it installed and so this is the easiest place to get at this information super helpful next a major challenge when you're developing Progressive web apps in the recent past has been that you don't really know when that set of four criteria are all met right each one's a little bit different you have to have TLS we have to think that you have TLS you have to have uh a manifest that meets all the criteria you have to have a service worker that matches all this stuff and so getting those all lined up can be a little bit of a pain the easiest way that I know to try to understand whether or not your site is going to trigger the banner is to see if you get the banner but that has the user engagement check as well so there's a flag in Chrome flags that lets you bypass the user engagement check so that every single time you go to your Progressive web app that Banner will show up at the bottom it's the easiest way to verify that you've actually hit the mark give it a shot similarly on desktop because we haven't shipped Progressive web app support there yet you're going to need to flip a couple of flags if you don't happen to have an Android device handy on your person and so to do that you can go and disable the user engagement check again and then enable add to shelf both of these flags are available in deving beta versions of chrome today and and what you'll see if you do this is you go to an Progressive web app that would meet all the criteria and you'll get this little button at the top that lets you say add don't worry about what it does right now it's not the final thing we're still iterating we might not even do it but this is the easiest way to debug that you've actually hit the mark okay lastly a few things to consider while you're building your Progressive web app first if you go ahead and hide the URL bar you're going to need to provide a lot of your own UI having a refresh bar or a way to get fresh fresh content is essential because you won't have the browser's back and forward navigation you'll also have to provide High Fidelity navigation throughout your entire application so keep that in mind when you're constructing your app um one last point on that as Andreas mentioned earlier the media query to help you hide and show that navigation is essential it's it's a great way to not double up on that UI surface area when the browser URL bar is there the first time you load it okay next another piece of UI will be the share thing the share intent the share button in the browser's case the URL bar you normally just highlight the URL copy it to your clipboard and paste it wherever you wanted but that's not an option that's available to you necessarily you'll have to think about rebuilding that UI in your own full screen application or check out Paul kin's latest blog post about how to do this on Android using the intent system it's great next we send an event every time we're about to show that Banner at the bottom the on before install event lets you know that we show the banner so that's great helps you log it out but also it lets you cancel it let's say you're at an inopportune time maybe inside of a checkout flow it's not a good time necessarily to be asking the user to keep the thing to their home screen so using the on before install event and canceling it lets you choose when to show it later because you can rethrow the event if you cancel it on one page navigate to another page we'll send the event again we'll keep trying until you either tell us yes it's fine to show it or the user clicks away great and and lastly we've heard you about deep linking we understand that the progressive web app experience in Chrome today isn't brilliant for deep linking but we're working on it changes in Chrome in the near future will allow you to focus existing tabs from the service worker when a user navigates to a page and we're trying to figure out better ways to let you control deep linking and which version to launch in the future we've only just started supporting Progressive web apps in Chrome and we're excited that they represent a new way way for you to keep your users engaged and deliver the sort of high quality experiences without having to take your content off of the web we think that the URL is the web superpower and we're excited to help bring that superpower back to your applications without forcing users to go through stores the rest of today includes a ton of talks that are going to help you understand how to implement this stuff well there's a talk on implementing TLS by Emily Stark and again that's the Baseline for 2015 so give it it give it your all and talk about service workers how to do all the stuff with polymer push notifications and application shells so stay tuned or find these Talks on YouTube in a bit and thanks again for your attention [Applause]