June 12–14, 2018: Tutorials & Conference
In-Person Training
Mastering progressive web apps
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
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.
Conference registration
Get the Platinum pass or the Training pass to add this course to your package.
Comments on this page are now closed.
Sponsorship Opportunities
For exhibition and sponsorship opportunities, email fluent@oreilly.com
Partner Opportunities
For information on trade opportunities with O'Reilly conferences, email partners@oreilly.com
Contact Us
View a complete list of Fluent contacts
©2018, O'Reilly Media, Inc. • (800) 889-8969 or (707) 827-7019 • Monday-Friday 7:30am-5pm PT • All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners. • confreg@oreilly.com
Comments
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!
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.