Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)

Key Takeaways

today I'm going to be talking about building Progressive web apps with polymer um before I go into that though I just want to back up and I'll tell you a little story so a few months ago I was on vacation this was right after the polymer Summit so I was in the Netherlands lovely place if you ever get a chance to go there and I was kind of off you know just doing my own thing and meanwhile back home I noticed in Mountain View all my buddies all my co-workers they started emailing back and forth and they were all talking about Progressive weather s get really excited about this this notion and I was on vacation and I was like huh what what is everybody talking about you know I felt like I was kind of out of the loop over there and like maybe I was missing out on something really really big and that there's all these new technologies that I was going to need to learn and to be honest I was kind of like approaching this whole thing with a sense of dread at first so I went and I I dug up Alex Russell's blog post and I was like all right what is the criteria for a progressive web app and I was going through there and it's like Progressive web is responsive all right it's a connectivity independent because it uses service workers cool it's got applike interactions all right so as I was going through I realized you know Progressive web app is really using all of the same cool features and and things that we've been working with and and have been talking about at Chrome Dev Sumit for the past few years but now we have this sort of umbrella term to bring them all together and kind of a set of criteria to aim for there's a line in that same blog post where Alex says that a progressive web app is just a website that took all the right vitamins and I think that's a really good way to think about things so what I wanted to do today was just build a polymer app to try and hit all those guidelines and demonstrate the areas where I think polymer can really give you a leg up if you're building a progressive web experience so this is the little app that I built it's called super cool blog um I built this with a some members of the polymer team the idea is that it's just kind of like a little news site the kind of thing you might want to pop up in on your phone and you know read when you're waiting on a bus or on Subway or something like that maybe your connection's a little spotty and what I want to do in this talk is just kind of jump around and highlight some of the areas in here where I think polymer can really help you build that Progressive web app experience so these are the areas that we're going to be covering in this talk I want to look at ways that polymer can help you make a responsive app I want to look at ways to make it load fast and make sure that we're really hitting that that l in Rail and getting a good fast first paint I want to look at ways to make it work offline because you know our user connection might be spotty I want to figure out how the user can take it with them anywhere they go by putting it on their home screen and lastly I want to talk about how we can re-engage with our users using push notifications but let's lead off with that first point which is making the application responsive and this is one of those areas where I think web components and polymer in general just really Excel because we can take complex layouts and then compartmentalize them into these elements so you can reuse those you can mash them up and you can get the kind of scaffolding that you want for your app and it's nice and responsive now last year here at Chrome dep Summit I built an app using our paper element set for material design which I thought was cool then but uh I thought for this chrome Dev summon it would be cool to use the app layout elements a little bit and as Taylor mentioned these are still like really experimental but I just wanted to play around with them a little bit show you kind of like a preview of them here at Chrome dep Summit and as Taylor mentioned the whole deal with app layout elements is that we want to provide some elements that are a little bit more fible a little more General use so that they're not just for material design but they're for any layout that you might want to put together so walking through this example here I'm going to start by just building a toolbar if you've ever seen me Demo stuff before I always start with toolbars and uh I've got a little app toolbar element and then I've thrown a paper icon button inside of there and automatically this is kind of one of the cool beautiful things web components I've got elements from two different sets and I'm just like mashing them together and it's okay their Styles play nice together now the next thing I want to add to this is the title for my site and you know the title is going to be a bit bigger and kind of want my toolbar to stretch and this is actually one of those areas where paper toolbar could be a little inflexible because paper toolbar relies very heavily on Shadow Dom distribution to project content into different layers in this hierarchy so you have to go read the docs of paper toolbar figure out the special class you need to put on your content to get it to show up in the right place with the app uh layout elements if I just want to extend my toolbar I can actually just tack on another toolbar and now I'm just building like another hierarchy in inside of this thing so they just stack and kind of fit together like Legos and when I'm happy with this little hierarchy that I've constructed I can wrap them all up in an app header layout or an app header element excuse me and an app header is going to allow me to differentiate all of this content that I'm building here from the rest of the content in my application and it's going to let me add special effects to this header and so the last thing I want to do is wrap it in an app header layout I can throw in a little main tag down there at the bottom for my site content and now that I'm contained within that header layout I can add attributes to my app header to give it you know special behaviors I can say that I want it to be fixed all the time I can say that I want it to cast like a waterfall Shadow as the user is scrolling around if you've worked with paper elements before this should feel familiar to you except for these elements just are a little bit more flexible they're a little bit easier to style a little bit easier to snap together they kind of rely a little bit less on Shadow Dom and more on just you know what you would expect to work there so it's kind of an evolutionary step it's how I like to think of these um one thing that I really want to highlight is just a difference between the paper elements and the app uh layout elements that that always bugged me the paper elements you'll notice here as I'm scrolling my little URL bar is not actually scrolling away which I feel like kind of detracts from the appy feel of this thing and that has to do with the way that the paper elements implemented their scrolling Behavior with the app layout it Scrolls away and I get this nice you know it feels more like an like a real application that you would have on your phone so I just want to highlight that difference it's one of those quirks that's always really bugged me especially if you have to bring up a keyboard that's not a lot of real estate for someone to see the content of your page so it's nice that that's been improved with those new elements now if you want to play around with these they are actually up on GitHub at polymer labs. GitHub iapp layout uh there is a version of the site that I'm showing today it's kind of a strip down version it doesn't include all the service worker stuff and things like that that I'm going to be showing but it does show off how to use the app layout elements and there's also other sites that are up there as well including the polymer Summit site so you can go through and you can see some different temp splits and demos to play around with all the sources available and as we are adding new patterns and uh and new templates we'll be putting them up there as well so using those app layout elements I feel like I have good tools to make a nice responsive layout the next thing that I want to do is make sure that this loads really fast right I want to make sure that the user of my application has kind of like a good instant feeling experience and to do this I want to explore some async design patterns that you can use with polymer to kind of optimize for fast Pur paint so I'm going to show you this video here and this is my site totally unoptimized right now um running in like an incognito window in Chrome so it's not bad but we kind of have that little like white screen at the beginning right we're just like I don't know is anything happening and if the user was on like a 2G connection or 3G you could imagine that white screen is going to be there for even longer they're going to be scratching their head like you know is the site working I don't know so this isn't necessarily a polymer problem this is just kind of like a web platform problem in general if you're you know loading a bunch of content up front you're going to be blocking your first paint the user is going to be sitting around staring at a white screen so I want to look at some ways that I can improve that for this app now this is the index file for my application and if you've ever built a polymer app this is pretty typical boiler plate that you see here uh we've got our web components polyfills up there at the top in the head and then we've got a link tag to import all of our elements and the reason that we put those in the head is because we want to prevent a flash of unstyled content we want to make sure that our elements are there they're registered in the document before we try and paint them otherwise they're just going to kind of upgrade in place and the page will look a little weird but these are also render blocking right as most of you know if you put a script tag in the head it's just going to hold things up while it's doing its thing and if you put an import in the head of your document it's also going to hold things up it's going to prevent rendering because it behaves basically just like a stylesheet it's trying to prevent a flash of unstyled cont by being up there but for my app I really really really want to optimize for first paint so the first rule that I kind of adopted here was making sure that I'm not blocking the renderer waiting on polyfills or elements to load in so how do we fix that well back in my application instead of just having these tags right in there as is I'm going to add async attributes to both of those and that's going to free up the renderer to move past them head down to the body and do its thing but looking at at this I'm also kind of wondering like right now I'm always loading the web components poly fills you know and should I always load the web components polyfills how many of you think I should always load the web components polyfills good okay good no you should not always load the web components poly fills there are browsers out there which already have support for web components Chrome and Opera and so for those browsers for the users that you know uh are under data caps or are bandwidth constrained it's kind of wasteful to just force them to download these polyfills so instead what we should do is we should conditionally load those polyfills using feature detection so what I'm going to do is instead of just you know having that script tag for web components JS and pull that out and I'll add a little script to the bottom that's going to be a little feature detect script and inside of that script I can check to see if web components are supported so I'm checking hey is custom element there Imports template right if not then I can go ahead and lazy load the polyils with a little Dynamic script element okay so now we're not holding anything up in the head of our document the renderer is free to move down to the body which is awesome now looking at the body tag you might notice this unresolved attribute right here and wonder what's up with that so this is a feature that polymer adds it's another feature to prevent flash of unstyled content it's basically going to hide the body until all of the elements have loaded in and then it just kind of reveals the whole thing and it's a really convenient feature but again in our CL since we are CH chasing that fast first paint it's also kind of a bottleneck because it's hiding the body until all of our elements have loaded so I'm going to remove that right now at this point there really is nothing holding up the paint of my page and now we enter some interesting territory which is you know depending on how you've structured your application there are a few different ways that you can get a fast first paint out of it so if you've just got custom elements in the body tag just sitting there one option is to use the unresolved pseudo class to style those unupgraded elements now at the moment uh the unresolved pseudo class only works in browsers that have custom elements support so you're limited to the browsers where this will work uh but I believe that in the future this will be you know a more common technique that we can take advantage of so I do want to show how this works today and basically what I'm doing here is I have an inline style tag for my critical CSS because I do want to paint these components fast as possible and I'm styling that Apper layout element using that unresolved pseudo class and what I want to do is paint the element so that it matches its final version as close as I can get it and then let the element just sort of upgrade in place now you can simulate the unresolved pseudo class using attributes so you could do this today and this will totally work this is kind of like what polymer was trying to do with the unresolved attribute on the body except for in this case you've got to sort of manage it yourself so this would work right I could paint my element I would need to go in afterwards with JavaScript and remove those unresolved attributes but this is another approach that you could take to sort of paint the individual elements as they're loading in another alternative to this which might be easier is to just create a skeleton that mimics the look of your final app shell paint that skeleton with inline Styles and then hide it when all of your elements upgrade so what I'm doing here is I literally just have a div with like some dummy markup that's going to represent my skeleton and then I've got styles that are in line to paint that skeleton as fast as I possibly can and then once my elements load in right maybe I have my whole app contained in a single element right once that upgrades I hide that skeleton everything reveals itself at the same time now I realized that this is kind of coloring outside the lines like people don't like the idea of adding dummy markup just to paint something but I feel like the Improvement for user experience is well worth it right this is coming from a good place there's some good intention here and I want to show you kind of a side-by-side comparison so we got the original version and then the async version using that skeleton approach right so as these run you see immediately there's something on screen with the async version now it's just the toolbar right but that sends a signal to the user that like hey something's happening the site is not dead things are working we've got content coming to you soon right so I haven't gone crazy with the skeleton I didn't write like Reams and rs of CSS or anything like that just enough to to build a quick shell and let the user know that stuff's coming all right so now I feel like I've got a good fast first paint with that shell approach uh now the next thing that I want to do is tackle offline because as the user is browsing the site I don't actually have a guarantee that they're going to have really solid connectivity and so to tackle offline what I want to do is add a service worker to this application and I know that we've covered service workers a lot today but for anyone who maybe is like just tuning in to the live stream or is watching this video later on YouTube I'll just give you a brief summary service worker is a script that's run by your browser in the background separate from your web page and it enables a lot of really cool things like caching and push notifications but a service worker and building it is not necessarily A trivial process it is by design a lowlevel API so it is very powerful but there can be a fair bit of code involved now we've been building libraries on top of service worker to try and improve this experience so as je mentioned we have libraries like service worker toolbox and service worker pre-cache which abstract those complexities away and make it easier for developers to work with it but on the Palmer team we wanted to take that even a step further and see if we could build some elements on top of those libraries to make the entire process declarative so a developer of really any skill level can just get in and add a service worker to their app now these elements live in our Platinum element uh product line and as it says on the 10 these are elements to turn your web page into a true web app and I would add Progressive to that statement by adding things like push offline Bluetooth and a lot more and again our goal here is just to make it really really easy for you to leverage these powerful features in your app so if you want to add a service worker to your polymer app it just as easy as dropping a tag in the page so this is the Platinum service worker register element and it's going to go ahead and handle all the things that I need it to do to create and register a service worker for me and I can configure it the same way that I configure any other HTML element just using attributes so these attributes here what they do is uh Auto register tells it to go ahead and immediately register my service worker versus waiting on me to call a method and kick it off skip waiting tells the service worker to skip its waiting phase and immediately go active and client's claim tells the service worker to start handling all the requests on the page and take over the page and start serving responses for it now I've got my service worker in place which is really cool the next thing I want to do is take advantage of some of those cool features that service worker affords me so I can add caching right and again I'm just dropping in more elements now this uh Platinum service worker cach tag actually Builds on top of the service worker toolbox library but it just makes it nice and declarative so what we're doing by adding this element is we're telling the application to start dynamically caching requests as they go through it and there are a few different caching strategies that we can take advantage of the fastest strategy is going to tell the service worker to race the cash in the network and return whichever one comes first Network first is going to hit the network and if that fails it'll try the cach and network only is just going to hit the network if that fails it's just going to fail the whole request so from my app I'm going to opt for the fastest approach because I think it's okay if the user is getting slightly stale content so long as they're getting something and they're getting it really fast and I can use the default cach strategy to just configure my cache to use that but I'm not limited to Dynamic caching I can actually also have this element be proactive and go out and start prefetching and pre-caching things for me as well and kind of a general rule of thumb is prefetch all the things that are required for your app shell to render really quick for the user now we can do that by configuring the element with a prefetch attribute I can give it an array of file pads that I want it to prefetch and pre-cache for me but you know some people might not like the idea of having an array of file pads and their HTML that might feel a little wonky uh in which case you could instead use a cache config Json file this is just a Json file full of file paths so that actually looks like this I can give my cach an ID tell it in that array what to pre-cache and I can also give it a pre-cache fingerprint which is just a little identifier to show the uh the uniqueness of the cache itself so if I want to I can change that pre-cache fingerprint in any point and that'll tell my service worker to go out and pre-cache the things from the array over again now in this case the preash fingerprint is just a a hash that I generated if you're curious how to do that at build time you can check out our polymer starter kit project we actually have a little cache config task in the gulp file for it there you can go and uh check out that task it'll actually generate that whole file for you including the fingerprint just at build time so you don't have to manage it yourself by hand okay so adding service worker adding the uh the pre-caching features let's see what our app looks like now so my user's using it and you know reading an article meanwhile it's dynamically caching all these things let's say they go offline for whatever reason they go into a tunnel or something like that and let's say for whatever reason they refresh the page Maybe by accident or think they need to so they refresh the page well everything loaded even though they're still offline they can actually go back to that article they were reading and just continue the experience as far as they're concerned they don't know if they're online or offline they don't know if they have a spotty connection or what they just have this nice continuity to their experience which is awesome and one of the really powerful things that you get from service worker okay so my app is now working offline which is awesome but admittedly most of us when we know we're already offine line we don't like go and open Chrome and expect to find a bunch of content inside of there right we're kind of trained to if if you know you're offline just trained to expect the offline dinosaur if you open Chrome instead we've been trained to look to home screen apps for content if we know that we're offline and this is interesting because the app that we've built at this point it basically meets all the same criteria as those home screen apps so why don't we just see about getting it on the user's home screen and to do this I'm going to use web app install banners and if you haven't seen those before it's basically a little prompt coming from the browser which ask the user if they would like to save the application to their home screen now I'm curious um how many of you know about the add to home screen button show hands I keep them up keep them up how many of you used the add to home screen button I would say have used it more than three times in the past month okay all right all the hands go down yeah okay why is that well one I mean the UI is a little buried and a little hard to find but two you don't really know if that thing that you're adding to home screen is going to be a good experience right like is it going to work offline I don't know like I can't tell just by looking at it and so one of the things that's cool about web app install banners is there's a set of criteria that your application needs to meet before the browser will actually prompt the user and ask them if they would like to save it so to trigger a web app install Banner your app must have a web app manifest which we'll talk about in just a bit it's got to have a registered service worker and we're that basically for free using those Platinum Elements which is awesome it's got to be served over https and lastly it's got to be visited twice by the user with at least five minutes in between and I put a little Aster there because that last hero stick might change we're still sort of like dialing it to figure out what is the what is the sweet spot for user engagement but there is at least some degree of user engagement uh that needs to happen before it'll trigger that Banner so most of these are self-explanatory but let's look at the webat manifest because that might be new for folks so webat manifest is really just a simple Json file it's got fields for your application's name the icons that it should use when it's added to the home screen uh background color which will actually show off in just a sec again many these are sort of self-explanatory one that I do want to highlight is the start URL down here so what the start URL does is it tells your application uh what URL to boot to when it's open from the home screen and as a signal to your app that it's being loaded from the home screen you can do this kind of clever little trick where you put a query string on the end of your root URL and say oh yeah home screen one and that that way your your application JavaScript if it sees that it knows that maybe it should you know behave a little different because it's in home screen mode or something like that right it could choose to uh show something different to the user so that's just a little Pro tip if you're if you're launching something from a home screen you want to have a slightly different experience there that's one way you could do it with that signal so when you're happy with your manifest file including it in your application is is pretty straightforward you have a link tag uh with real manifest and you point it at your manifest Json but there are browsers out there which actually don't support webat manifest yet and for those browsers you need to include some fallback meta tags and those look like this and I'm sure you're looking at all these and you're like but I don't want to remember any of that like and yeah like it's kind of annoying to have to like remember all these things and copy and paste and so I I gave a little plug to our polymer starter kit project earlier and I'll give it another one here um if you go check out polymer starter kit which is just you can just Google polymer starter kit or go to developers.google.com webtools polymer starter kit includes already a working web app manifest it includes all those meta tags for you it includes all the different icons that you need at all the right sizes and all you have to do is take that and start adding your own content so if you're lazy like me you don't remember all that stuff you can just go there and do that now once you got that squared away it kind of brings up this other interesting question which is figuring out if the thing is even working because I mentioned there's this user engagement heris to web app install banners right like the user got to visit the page a few number of times over a few minutes and as a developer it's super annoying to have to like sit there and just stare at my website and like a clock and be like ah yes try it again did that work I don't know so one of the things that I found as I was building this app is this sweet little flag that's that's hidden in your Chrome Flags uh called bypass user engagement checks so if you want to go add a web app manifest to your application you want to try and get an install Banner running you can go to this little flag you can enable the bypass and then you don't have to wait around for the user engagement bits it's just going to verify all the other items from that checklist it's going to verify https is looking good your manifest is looking good your service worker is looking good Etc so that's a little helpful Pro tip there another thing to watch out for which is a little gotcha that I ran into into is make sure that you don't accidentally send the user to a screen that you have not cached yet what I'm talking about is remember this little line that I just showed you and I was like oh this is like a really cool trick that you can use to signal to your application that it's being booted from the home screen well if the user is offline and you have not cached that URL with your service worker they're just going to see an offline D now and the reason is because by default uh service worker request URLs must exactly match and this includes query parameters okay so if you're if you're using that trick you want to make sure that you've either prefetched that URL or that in your service worker you're handling that and you're you're serving a proper response otherwise your user might see an offline dinosaur and that would kind of like violate the whole expectation of this thing being an awesome offline app so another thing to watch out for uh but once we got all that squared away let's check out the whole experience so the user is going to go to our website right they visit it a few times they dig it it says hey do you want to say this your home screen and they're like yeah sure I like this site so they close it hey there's an icon now when they click on it it's actually going to give them this awesome splash screen and that icon generated from our web app manifest and now they're right back in the experience right where they left off so now we've got a web app manifest we got a service worker this app is installable which is awesome and actually because we have a we manifest in a service worker now we're able to unlock even more interesting features like this is our app entering Pokemon mode where it's just like evolving and getting more powerful because we can add things like push notifications because we have service worker and app manifest which is awesome and push notifications are a wonderful way to re-engage with your users so there's a lot of websites out there which have newsletters right you've probably seen this where you go to a website and it's like sign up for the newsletter and we'll email you when we post some new content but it'd be really rad if they could just send me a notification I could just click on that and go right back into the experience so that's what I want to add to my app but as I'm sure many of you have heard today the thing about push notifications is great power great responsibility right and the main takeaway is just like don't spam people you know seriously uh you definitely don't want to get blocked that would not be fun and it would just annoy the crap out of your users so this don't spam policy applies both to asking for permission to send push notifications and to you know the number of notifications that you're sending the content of those notifications as well so if you're asking for permission to uh send push notifications let the user decide when they want to opt into that make it very clear how they can opt out and make sure there's like a clear value associated with the ask for permission so in the case of super cool blog I added this little uh thing here where it says Hey notify me of new content and they're like yeah sure right so I'm telling the user exactly what they're going to get when they click that switch it's not like they just hit the website and I'm just like yo can I send you push notifications because that would be super weird okay now how did I do that well in my application I've got a paper toggle button I've got another one of our Platinum elements called Platinum Push Messaging and I'm just linking the state of these two using a data binding so the check state of the paper toggle button affects the enabled state of my Push Messaging element next I give my Push Messaging element a message URL this is the URL that it should go look to for notification data when the service recer gets woken up and told hey there's a notification go display it to the user so to give you an example of what that uh response looks like this is the actual response from my little node server so I'm sending back a response for that Json file and I'm just sending back basically a little object with a title a message to display to the user in the notification a URL which when they click to they're going to end up there I can show them an icon in the notification a lot of cool stuff so let's take a look at that experience let's say I'm web fundamentals really really awesome website which you should all be checking out and as I'm cruising around up in my little tray I see hey I got a notification I open it I see it's from super cool blog I click on it right back into the experience I'm checking out that awesome new article that they just posted pretty sweet right now if you're interested in this and you want to add push notifications to your own site you're curious how to set up the server and set up you know the the database to manage subscriptions and all those other things uh we have a project we which has been created by a couple of our team members Monica nescu and Matt scales it's called a cater Day post it uh shows you how to use push notifications through the form of cat hius um it's very serious example uh an example Hau right ponder that in your Infinite Wisdom okay so uh so you can go check out that project on GitHub it's really awesome so now I built that uh user engagement mechanism into my application right feels good app experience feels really complete I'm pretty happy with things in closing before I go I just want to wrap up and say this is you right this is you plus the web okay things are getting super awesome right now if you're a web developer Progressive web apps give us this really really cool model for successful applications and libraries like polymer give us the tools to build those experien es now if you're interested in you know the the content that we're talking about today and everything and you're not already a subscriber to our YouTube channel you should absolutely go to Chrome developers on YouTube and subscribe many of the speakers here today have like reoccurring shows on there where we talk in Greater detail about service worker and push notifications and all these awesome things if you're interested to learn more about polymer uh we just completely redid All the material for our academic uh Polytechnic events so these are a series of events which we run all over over the world you can go to that website it's academic. comom there's a little map there which will show you nearby Polytechnic events which you can go to and do like a boot camp or a workshop you can also just download all the material and do it yourself if you you know want to do it from home or if you want to run your own event you can grab the material and do that as well uh so that is it for me today uh thank you all for having me here hope you all enjoy the rest of chrome Dev Summit thanks [Applause]