June 20–22, 2017: Tutorials & Conference
In-Person Training
Mastering progressive web apps: Creating offline app experiences with service workers, web performance, and push notifications
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'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.
Prerequisites:
- A working knowledge of HTML, CSS, and JavaScript
Hardware and/or installation requirements:
- A laptop with Google Chrome and Web Server or Node.js installed
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.
You’ll leave with an understanding of the best benefits of the web and the native app space and ready to 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
Maximiliano 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.
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
©2017, 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 Max, I attended this training. Can you please share the slides and the google doc where you had the service worker code?
Michael, PWAs on iOS are possible today. In fact, the idea of PWA was inspired on iOS Home Screen Web Apps. Probably you are asking about being 100% compatible with all the specs that are usually under the umbrella of PWAs, such as Web App Manifest and Service Workers. I’m not sure when, but I think it will get there at one point. We’ll see next week in the WWDC if we’ll have news this year. Anyway, you can make a PWA work on iOS with some features. I hope you can join me in the training because we will cover that as well.
Regards
How soon do you think PWAs will be possible on iOS (if ever)?
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!
Is there particular hardware/software needed for this class (i.e., Mac vs PC)