O'Reilly logo
live online training icon Live Online training

Progressive Web Apps

Beyond the Basics

Maximiliano Firtman

Everyone is talking about progressive web apps (PWAs). You’ve likely already taken some initial first steps into the world of PWAs, and you might be wondering if you should you go all in.

Join expert Maximiliano Firtman for a hands-on, in-depth exploration of progressive web apps that takes you beyond the basics. In just three hours, you’ll learn how PWAs can unlock the full potential of mobile devices, how to integrate PWAs with the Android, iOS, and Windows operating systems, and how to implement PWAs on platforms like iOS that don’t fully support PWA specs. Along the way, Max will show you how to improve your progressive web app through tighter integration with social networks and enhanced UI/UX, and he’ll share tips and tricks to better promote and distribute your PWA to users. If you’re already working with PWAs, this course will take you to the next level.

What you'll learn-and how you can apply it

By the end of this live, online course, you’ll understand:

  • How to take advantage of mobile device capabilities like sensors to enhance and create new types of interactivity
  • How to increase app installations for your PWA and grow your user base

And you’ll be able to:

  • Build iOS-compatible PWAs that interact with other apps, such as Uber, Maps, Waze, and WhatsApp
  • Improve your app’s user experience by addressing mobile- and platform-specific challenges

This training course is for you because...

  • You’re a web developer who wants to better understand how to integrate progressive web apps with the OS and other apps, share your PWA content on social networks, and further enhance your app with hardware.
  • You’re a web developer who wants to create the best experience for users across all platforms, including those like iOS that don’t fully support PWAs.
  • You’re a web designer who needs to improve the usability and installation rate of your progressive web app so you can increase your conversions.

Prerequisites

  • General progressive web app experience (i.e., familiarity with service workers and web app manifest)
  • A working knowledge of JavaScript

Recommended preparation:

Developing Progressive Web Applications [video course]

Head First JavaScript Programming (video)

Developing Progressive Web Applications (video)

Materials and downloads needed:

  • A desktop, laptop, or other connected machine with an up-to-date copy of Google Chrome and the code editor of your choice installed
  • An Android device (recommended but not required)

About your instructor

  • Max Firtman is a mobile and web developer, trainer, speaker, and writer. Max teaches mobile HTML5 and performance trainings for top companies around the world. The founder of IT training company ITMaster, Max is a well-known professional in the mobile web community. He blogs about mobile web platforms on Mobilexweb.com, keeps compatibility tables updated at Mobilehtml5.org, and has written many books, including Programming the Mobile Web (available in a second edition) and the recent High Performance Mobile Web, published by O’Reilly Media. He is a frequent speaker at conferences, including QCon, Mobilism, OSCON, Velocity, Fluent, Google Developer Day, JSConf, GOTO, AdobeCamp, and many other events around the world. Max has been widely recognized for his work in the mobile web community. He is an Adobe Community Professional, Microsoft IE User Agent, Nokia Developer Champion, and BlackBerry Elite, among other distinctions.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Day 1

Use the full potential of your mobile devices (50 minutes)

  • Lecture: Overview with live examples of available APIs for PWAs that unlock the full potential of mobile devices, including sensor and hardware access, Bluetooth, VR, and more
  • Hands-on exercise: Demo PWA APIs on your own device while following along

Break (10 minutes)

Build progressive web apps on iOS (50 minutes)

  • Lecture: The current limitations of PWAs on iOS and how to deal with them, including how to emulate installation, web app manifest, and offline access
  • Hands-on exercise: Build PWAs that take advantage of iOS’s custom abilities that don’t follow PWA specs

Break (10 minutes)

Interact with the operating system (50 minutes)

  • Lecture: How PWAs interact with the operating system and other apps, including the new WebAPK system on Android, dealing with intents, and opening and sending data to other installed apps, such as Maps, Uber, Calendar, and Email
  • Hands-on exercise: Make your PWA interact with the operating system (Android, iOS, and Windows); discover available APIs and hacks that blur the limits between native apps and PWAs

Wrap-up and Q&A (10 minutes)

Day 2

Work with social networks (50 minutes)

  • Lecture: How to deal with social networks in a PWA, including the Share API, how to let the user get the current URL while using the PWA in standalone mode, how to communicate with WhatsApp and other messaging systems, and what happens when a user accesses the PWA from a social network’s in-app browser
  • Hands-on exercise: Integrate your PWA with social networks; build a solution to enable users to share and viralize content from the PWA

Break (10 minutes)

Address user interface challenges (50 minutes)

  • Lecture: UI and UX challenges, including mobile-specific CSS styles, how to deal with different styles of icons for each OS, and new APIs and abilities available that improve user experience
  • Hands-on exercise: Enhance your PWA's user interface with CSS, JavaScript, and HTML5; explore hacks to improve user experience

Break (10 minutes)

Promote and distribute your PWA (50 minutes)

  • Lecture: How to boost your PWA's distribution through different channels, including stores, SEO, and the physical web; how to enhance the web app banner to motivate users to install the app
  • Hands-on exercise: Increase user installation using web app banner APIs and UI tricks; improve user acquisition through the physical web for the IoT and geolocation-based PWAs

Wrap-up and Q&A (10 minutes)