On legacy browsers, progressive web apps work like any other app, but on a modern browser, they start to exhibit superhero characteristics that go beyond what traditional web offers. Let's look at what those superpowers are, and study a few examples in the wild.

One of the most important metrics used to judge PWA performance is "time to first meaningful paint". We'll take advantage of the fact that CSS goes to work as soon as it lands, to get something "meaningful" rendered on the screen before we're even done downloading JavaScript. This is only possible thanks to Ember's server-side rendering technology: Fastboot

You'll be provided with a mobile experience that currently uses client-side rendering. Using some of the tools we've introduced, come up with a baseline measurement for PWA suitability. Then, let's enable fast boot and measure the magnitude of improvement.

Superhero apps don't need to live as mere bookmarks in a mobile browser, the blur the line between web app and native app. We'll look at some things we can do with metadata files and HTML head tags to take steps to transcend the browser.

We've discussed several ways we can give mobile devices hints that allow us to have a "Browser Plus" experience, including home screen icons, splash screens, removal of browser chrome and more. Using this newfound knowledge, enhance your project app to provide a rich experience to your users.

One clear distinction between a traditional web app and a native app is that one is only usable while online, and the other lives on the device in a more permanent (offline friendly) way. We'll look at two technologies that allow us to function -- at least to a limited degree -- with no network connection: Appcache and Service Workers.

While we can't get any new data when offline, at least we can avoid hitting a 404 page. Using appcache, create a fallback experience for your project, where the user sees a clear "you are offline" state rather than a blank screen or 404 page.

Service workers provide some opportunity for several things, but in the context of supporting offline, we're primarily interested in how it can handle fetch requests. Using the Mozilla service worker cookbook, implement two of the caching strategies. Use the debugging techniques and development workflow we've outlined in the workshop.