Ember for Mobile
We'll explore the latest in PWA technology, server-side rendering, benchmarking tools, and device support for mobile-specific metadata.
Ember for MobileProgressive Web Principles
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.
Ember for MobileSpeedy Startup
Ember for MobileEXERCISE: Measuring PWA Metrics - Fastboot vs. Client-Side Rendering
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.
Ember for MobileMobile Metadata
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.
Ember for MobileEXERCISE: A Rich Mobile Experience
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.
Ember for MobileNo Network
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.
Ember for MobileEXERCISE: Appcache MVP
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.
Ember for MobileEXERCISE: Service Workers
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.