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

In-Person Training
Mastering progressive web apps: Creating offline app experiences with service workers, web performance, and push notifications

Maximiliano Firtman (ITMaster Professional Training)
Monday, June 19 & Tuesday, June 20, 9:00am – 5:00pm
Cross-Platform and Mobile
Location: 212 A/B
See pricing & packages

This course will sell out—sign up today!

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 (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.

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

  • 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

This training is for you because...

  • You are 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 are a mobile developer with some basic experience in HTML and JavaScript who needs to understand what PWAs can offer beyond native solutions.
  • You are a web designer doing responsive websites who needs modern solutions to increase conversion.
  • You are 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 are a web developer who wants to understand how to increase conversion and reengagement for your services using PWAs.

Prerequisites:

  • A working knowledge of HTML, CSS, and JavaScript

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: Trying 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

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 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.

Twitter for firt

Conference registration

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

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)

Comments

Picture of Maximiliano Firtman
Maximiliano Firtman | SPEAKER
04/27/2017 6:54am PDT

Joel, Mac or PC is fine, the only requirement is latest version of Google Chrome, a code editor (such as the free Visual Studio Code) and Node.js (optional, but recommended).

See you there! Looking forward to the training!

Joel Davis | PRINCIPLE DEVELOPER
04/27/2017 1:05am PDT

Is there particular hardware/software needed for this class (i.e., Mac vs PC)