Building a Better Web
June 11–12, 2018: Training
June 12–14, 2018: Tutorials & Conference
San Jose, CA

In-Person Training
Mastering progressive web apps

Maximiliano Firtman (ITMaster Professional Training)
Monday, June 11 & Tuesday, June 12, 9:00am - 5:00pm
Location: 211 A/211 B
Average rating: ****.
(4.83, 6 ratings)

Participants should plan to attend both days of this 2-day training course. Platinum and Training passes do not include access to tutorials on Tuesday.

Join expert Max Firtman for a hands-on, in-depth exploration of progressive web apps (PWAs). You'll learn how to create PWAs with the modern APIs for mobile and desktop platforms, including app installation and distribution, offline access, push notifications, web performance, and hardware access.

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

By the end of this two-day training, you’ll understand:

  • How to distribute your progressive web app (PWA)
  • What APIs are currently available for PWAs
  • How to measure and improve performance to meet PWA goals

And you’ll be able to:

  • Create a PWA with modern technologies
  • Transition from a modern website to an app-like experience
  • Create an offline-capable PWA using service workers
  • Increase conversion and reengagement using web push notifications

This training is for you because...

  • You're a web developer with more than two years of experience doing web development, and you want to improve the user experience on mobile devices using PWA techniques.
  • You're a mobile developer with some basic experience in HTML and JavaScript, and you want to understand the benefts progressive web apps offer over native solutions.
  • You're a web designer doing responsive websites, and you want a modern solution that will increase conversion.
  • You're a web professional who creates apps and websites, and you need to understand when PWAs are useful and how to make the move into the new architecture.

Prerequisites:

  • A working knowledge of HTML, CSS, and JavaScript

Hardware and/or installation requirements:

  • A machine with Google Chrome and either Web Server or Node.js installed

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

Outline

Day 1

Introducing progressive web apps

  • The technologies involved in PWAs (with live examples): Service workers, the web app manifest, and web push specs
  • What PWAs can offer
  • Available APIs and architecture
  • Why PWAs are a big deal for delivering content and services for mobile and desktop devices when native apps make no sense

The basic PWA template

  • Starting a basic PWA template from scratch
  • Web app manifest basics
  • iOS meta tag support
  • Icon sizes and resources needed
  • Verifying and testing the example PWA

The offline web

  • Service workers (lifecycle, abilities, and limitations)
  • Storage options available offline
  • How to detect current connection status

Finishing the first PWA

  • Adding offline detection and support to your PWA
  • Testing it on your device
  • How and where to publish the PWA to test on mobile devices

Wrap-up and Q&A


Day 2

Advanced techniques

  • Advanced techniques, including background sync, WebAPKs, and dealing with display mode detection
  • Coding an optimistic save using the background sync API
  • How to detect if your PWA is being used in browser mode or full-screen mode
  • More ideas to apply on service workers and PWA code

Web push notifications

  • The web push notification APIs and specs, including how to subscribe the user, how to save the data server-side, and how to deliver the messages
  • Live demos using Google Firebase services and a Node.js local solution

Web performance for PWAs

  • Web performance optimization basics, including how to measure performance, available tools, and a performance checklist that includes server configuration, client-side tips, new compression algorithms and image formats, and tips to improve responsiveness
  • How to improve the performance of your PWAs with RAIL goals, new APIs to measure and improve performance, and extreme techniques

All the power to PWAs

  • An introduction to modern APIs, such as share, web payments, WebVR, and WebBluetooth
  • Hardware and sensors APIs
  • New distribution mechanisms such as the Physical Web

About your instructor

Photo of Maximiliano Firtman

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.

Twitter for firt

Conference registration

Get the Platinum pass or the Training pass to add this course to your package.

Comments on this page are now closed.

Comments

Picture of Maximiliano Firtman
Maximiliano Firtman | SPEAKER
06/08/2018 5:06am PDT

Hi Kerry, thanks for your question. I definitely think we have different ideas of what a basic feature is :) I think >99.9% of PWAs won’t need to sample raw audio on iPhone with 32768 bin FFT analyzer node :-D

WebAudio is the API that will let you use low-level audio APIs, but audio is not my expertise so I can’t guarantee that you can or can’t do that in a PWA. It’s not my field and we won’t be covering that in this training.

Just to let you know that if you decide to create PWAs and you need to access some hardware or native API not available for the Web Platform you can still package it to the store using new PWA-compatible solutions, that will be covered in the training.

In the training, we will create a fully functional PWA covering the new techniques and APIs you need to use from your web experience but we don’t cover all the available APIs in the Web Platform because of lack of time. Hope to see you around!

Kerry Davis |
06/08/2018 1:11am PDT

do you have any real samples demonstrating what you will be teaching? My issue is that I just don’t believe even basic PWA features are possible for mobile IOS/Safari (which is the only way to save to home screen). I need ability to sample raw audio on iphone with 32768 bin FFT analyzer node (which should be a basic feature) and it just isn’t possible yet (on IOS) as best I can tell.