Progressive Web Fundamentals

Progressive Web App technologies let you delight your users with the best modern browsers have to offer, without sacrificing compatibility for legacy environments.

Progressive Web Fundamentals

App-Like Characteristics

In many ways, Progressive Web Apps provide features and a user experience that users expect from native apps. We'll dive deep into the concept of a Web App Manifest, and add more metadata to our project to allow it to feel like a native app when launched from a mobile device home screen. We'll also look at how we can use web push notifications with our service worker!

  • App-Like CharacteristicsWelcome and Recap

    We'll go through today's agenda, and recap what we've learned so far.

  • App-Like CharacteristicsMobile and Social Metadata

    There are some easy ways that our app can become a "superhero", related to use on mobile devices and in "social situations" (social networks, sharing links on messaging apps, etc…). We'll dip into the topics of structured data, web application manifests, and mobile-specific meta tags to provide as rich and "app-like" an experience as possible.

  • App-Like CharacteristicsEXERCISE: Mobile Web, as an App!

    Add a web app manifest, some meta tags and the add-to-homescreen Javascript library to our web app, so that it appears as close as possible to a native app. We should see our Lighthouse score jump up considerably as a result of this enhancement!

  • App-Like CharacteristicsPush Notifications

    Unfortunately, the world of web push notifications is still quite fragmented. We'll look at the Apple, Google and Firefox notification APIs, and present some examples of unified services that can be used to deliver messages to users regardless of their chosen browser. We'll look at both "local" and "push" notifications, providing some optional exercises that developers of various developer programs can complete, to get some hands-on experience with the pertinent APIs.

  • App-Like CharacteristicsPayment Processing

    The ability to accept secure one-touch payments via Apple Pay and Google Wallet is one of the most exciting new capabilities of progressive web applications. We'll look at the setup process required to get up and running, and provide some optional exercises that members of Apple and Google's respective developer programs can practice with using these payment APIs.

  • App-Like CharacteristicsBackground Tasks

    Web Workers are available in all modern browsers and provide a foundation for doing some work in a separate thread. We'll explore the great potential that this capability offers, and outline some real-world use cases.

  • App-Like CharacteristicsEXERCISE: Background Processes

    We'll use background processes in order to add a QR code reader to our app, where the heavy lifting is NOT done on the UI thread.

  • App-Like CharacteristicsLunch

    Break for Lunch

Profoundly Practical

We have an unapologetic bias for the pragmatic and will make sure you leave with skills you can actually use. We've carefully crafted examples that reflect real world problems developers encounter daily.

Challenging by Choice

Toy problems are fun, but we want to make sure you leave with skills and not just another pointless tutorial app. Prepare to tackle some serious snags, in a non-trivial context!

Approachable and Advanced

We pride ourselves in making web technology as approachable as possible. By the end of this training, you'll be the one explaining these topics to your peers!