Building a Better Web
June 19–20, 2017: Training
June 20–22, 2017: Tutorials & Conference
San Jose, CA

Mastering progressive web apps: Creating offline app experiences with service workers, web performance and push notifications (Day 2)

Max Firtman (ITMaster Professional Training)
Location: 212 A/B
Average rating: *****
(5.00, 1 rating)

Who is this presentation for?

  • You're a web developer with more than two years of experience doing web development who wants to improve the user experience for mobile devices using PWA techniques.
  • You're a mobile developer with some basic experience in HTML and JavaScript who needs to understand what PWAs can offer beyond native solutions.
  • You're a web designer doing responsive websites who needs modern solutions to increase conversion.
  • You're a web professional doing apps and websites who wants to understand when PWAs are useful and how to make the move into the new architecture.
  • You're a web developer who wants to understand how to increase conversion and reengagement for your services using PWAs.

Prerequisite knowledge

  • A working knowledge of HTML, CSS, and JavaScript

What you'll learn

  • Learn how to create a PWA with modern technologies and transition from a modern website to an app-like experience
  • Create an offline-capable PWA using service workers
  • Understand how to measure and improve performance to meet PWA goals
  • Increase conversion and reengagement using web push notifications
  • Learn how to distribute your PWA
  • Explore available APIs for PWAs

Description

Join expert Maximiliano Firtman for a hands-on, in-depth exploration of progressive web apps (PWAs). You’ll gain insight into creating PWAs with the modern APIs for mobile and desktop platforms, including app installation and distribution, offline access, push notifications, web performance, and hardware access.

Take the best benefits of the web and the native app space and increase your conversions through reengagement and an app user experience

Outline

Day 1:
Introducing progressive web apps (90 minutes)

  • Introduction to all the technologies involved in PWAs, such as service workers, the web app manifest, and web push specs, with live examples
  • Hands-on: Try PWAs on your own device
  • Why PWAs are a big deal for delivering content and services for mobile and desktop devices when native apps make no sense

Break (30 minutes)

The basic PWA template (90 minutes)

  • Hands-on: Building a basic PWA template from scratch to identify all the necessary steps, including web app manifest basics, iOS metatag support and icon sizes, and resources needed, and adding the pieces for the example PWA
  • Use available tools to verify and test your PWA

Break (60 minutes)

The offline web (90 minutes)

  • Introduction to service worker technology, including abilities and current support
  • Coding a service worker from scratch and using debugging tools to understand its lifecycle, abilities, and limitations, as well as available offline storage options
  • How to detect current connection status and how to offer an offline experience using service workers

Break (30 minutes)

Finishing your first PWA (60 minutes)

  • Completing PWA basics
  • Adding offline detection and support to your PWA and testing it on your device
  • How and where to publish the PWA to test on mobile devices.

Q&A and wrap-up (30 minutes)

Day 2:
Advanced techniques (90 minutes)

  • An introduction to advanced techniques, including background sync, WebAPK, and dealing with display mode detection
  • Hands-on: Coding an optimistic save using the Background Sync API
  • How to detect if the PWA is being used in browser mode or full-screen mode

Break (30 minutes)

Web push notifications (90 minutes)

  • An introduction to the Web Push Notification API and specs, including how to subscribe the user, how to save the data server-side, and how to deliver the messages
    *Live demos: Google Firebase services and a Node.js local solution
  • Hands-on: Adding push notifications that will be received by users even if they are not using the PWA or the browser as any other native app
  • How to implement push notifications using the free Google Firebase service and an open source node.js local solution

Break (60 minutes)

Web performance for PWAs (90 minutes)

  • An introduction to web performance optimization basics, including how to measure performance, available tools, and a checklist covering server configuration, client-side tips, new compression algorithms and image formats, and tips to improve responsiveness
  • Charts and measures on web performance
  • How to improve PWA performance, including the RAIL goals, new APIs to measure and improve performance, and more extreme techniques

Break (30 minutes)

All the power you can add to PWAs (60 minutes)

  • An overview of all the power that you can add to your PWA, including an introduction to modern APIs such as Share, WebPayments, WebVR, and WebBluetooth, hardware and sensor APIs, and new distribution mechanisms such as the physical web
  • A comparison of PWAs to native apps
  • Hands-on: Testing the APIs
  • How the physical web with Bluetooth beacons to enable physical places and objects to promote your PWAs
Photo of Max Firtman

Max Firtman

ITMaster Professional Training

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 ITMaster, an IT-training company, Max is a well-known professional in the mobile-web community, blogging about mobile-web platforms on Mobilexweb.com and keeping compatibility tables updated at Mobilehtml5.org. He 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 by Adobe Community Professional, Microsoft IE User Agent, Nokia Developer Champion, BlackBerry Elite, and more.