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

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 Maximiliano Firtman for a hands-on, in-depth exploration of Progressive Web Apps. In this course, you’ll get a full insight on 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

  • How to create a Progressive Web App (PWA) with modern technologies
  • Make a 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
  • Understand what APIs you have available today on PWA

This training course is for you because

  • I am a web developer with more than 2 years of experience doing web development and I want to increase the experience on mobile devices for my users using PWA techniques
  • I am a mobile developer with some basic experience in HTML and JavaScript and I need to understand what Progressive Web Apps can offer to me so I can use them instead of native solutions
  • I am a web designer doing responsive websites and I need to understand what can I offer for my customers for a modern solution that will increase conversion
  • I am a web professional doing apps and websites for my company and I need to understand when PWAs are useful and how to make the move into the new architecture.
  • I am a web developer and I need to understand how can I increase conversion and reengagement for my services using Progressive Web Apps

Prerequisites:

HTML, CSS and JavaScript experience

Hardware and/or installation requirements:

  • Google Chrome
  • Web Server or Node.js

Schedule

DAY 1

Introducing Progressive Web Apps
The instructor will introduce all the technologies involved in PWAs, what they are with live examples with real devices of PWAs and what they can offer to us, including the APIs available and the whole architecture. Participants will be able to try PWAs on their own devices and they will understand why PWAs are a big deal for delivering content and services for mobile and desktop devices when native apps make no sense. They will also understand the responsibility of all the technologies involved in their creation, such as Service Workers, Web App Manifest and Web Push specs.

The basic PWA template
The instructor will start a basic PWA template from scratch, identifying all the necessary steps, including the Web App Manifest basics, iOS meta tag support and icon sizes and resources needed. We will also start adding the pieces for the PWA that we will be doing during the training. Participants will be able to code their first PWA in this segment and use all the tools available to verify and test it.

The offline web
The instructor will introduce Service Worker’s technology to the audience, including their abilities and current support. He will code the first service worker from scratch, explaining all the steps involved and using debugging tools to understand its lifecycle, abilities, and limitations. We will discuss the storage options available while we are offline. Participants will understand Service Workers, how to detect current connection status and how to offer an offline experience using Service Workers.

Finishing the first PWA
The instructor will finish the PWA basics during this segment. Participants will add offline detection and support to our PWA, and they will be able to test it on their devices. They will understand how and where to publish the PWA to test on mobile devices.
Q&A & off-topic discussion:

DAY 2

Advanced Techniques
The instructor will introduce some advanced techniques that we will apply to our PWA, including Background Sync, WebAPK and dealing with display mode detection.
Participants will be able to code an optimistic save using the Background Sync API, they will understand how to detect if the PWA is being used in browser mode or fullscreen mode and more ideas to apply on Service Workers and PWA code.

Web Push Notifications
The instructor will introduce 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. The instructor will do live demos using Google Firebase services and a Node.js local solution. Participants will be able to add to their PWA, push notifications that will be received by users even if they are not using the PWA or the browser, as any other native app. They will understand how to implement it using the free Google Firebase service and they will get an open source node-js local solution as well

Web Performance for PWA
The instructor will introduce Web Performance Optimization basics, including how to measure performance, tools available and the checklist that must be covered for a PWA, including server configuration, client-side tips, new compression algorithms and image formats and tips to improve responsiveness.
Participants will be able to understand charts and measures on Web Performance and they will understand how to improve the performance of their PWAs, including the RAIL goals, new APIs to measure and improve performance, and extreme techniques that we can apply.

All the power to PWAs
The instructor will explain in this section all the power that we can add to our PWA, including an introduction to modern APIs, such as Share, web payments, WebVR and WebBluetooth, hardware and sensors APIs and new distribution mechanisms such as the Physical Web.
Participants will be able to understand the full power of PWAs when we compare them to native apps, they will be able to test on their own devices most of the APIs that will be introduced quickly during this session. Participants will also understand how the Physical Web with Bluetooth beacons can help physical places and objects to promote their PWAs.

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. Best Price ends March 30.

Leave a Comment or Question

Help us make this conference the best it can be for you. Have questions you'd like this speaker to address? Suggestions for issues that deserve extra attention? Feedback that you'd like to share with the speaker and other attendees?

Join the conversation here (requires login)