The way we access the Internet has changed. With the growth of mobile devices, millions of people from around the world use the Internet for the first time on a mobile device. Google is supporting Progressive Web Apps (PWAs) to help developers provide native-app qualities in web applications to make them reliable, fast, and engaging.
This course shows you how to convert web pages to PWAs. A PWA is a web development approach using existing tools and technologies to create targeted, ideal user experiences. Students learn how to use service workers, caching, and an application shell architecture. This enables developers to build meaningful offline experiences, fast first load, and easy user re-engagement upon repeat visits.
About the course
The course materials include:
- A complete set of hands-on labs: Progressive Web Apps ILT - Codelabs
- A concepts and terminology reference: Progressive Web Apps ILT - Concepts
- A teaching plan and instructor's guide with recommended scheduling; and links to slide decks, individual codelabs, and individual concept chapters
- Videos of lectures (for reference by instructors and students)
Each lesson contains a slide deck, a concepts chapter, and in most cases, hands-on codelabs. The course is approximately one-third lecture and two-thirds practice (in the three-day form). As students work through the exercises, they create apps to practice and perfect the skills they're learning. Some lessons are purely conceptual and do not have codelabs.
The teaching plan is meant to be shared with the class and provides links to each of the lessons' slides, concepts, and codelabs. The instructor's guide provides recommended schedules, options for two- and three-day courses, and advice on customizing the course.
This course is aimed at:
- Developers who want to build web experiences that work for everyone.
How do I take the course?
The course materials are available for instructors to freely use in classroom settings. Well-motivated learners can also take the course as self-study at developers.google.com/web/ilt/pwa/.
What does the course cover?
Developing Progressive Web Applications includes 21 modules organized into three parts (each part is roughly a day):
- Introduction to Progressive Web Apps
- Building the core of a PWA
- Best practices and advanced features
Part 1: Introduction to Progressive Web Apps
Developers often need to make the case for new approaches such as Progressive Web Apps, then create prototypes.
This part of the course explores the customer behaviors that make PWAs an attractive choice, reviews the foundations of good design, dives into the mechanics of responsive design (and responsive images), and introduces the PWA core technologies. This part ends with a hands-on exercise to convert an existing website into a PWA.
Part 2: Building the core of a PWA
The programming techniques in part 1 are suitable for a mostly static site. Incorporating PWA techniques into interactive web applications requires us to go deeper into the technologies and apply some new practices.
This part of the course examines four web technologies (each with a codelab): Promises, the Fetch API, the Cache API, and IndexedDB. You will use these technologies to build an application shell, audit it with Lighthouse, and understand the trade-offs between different PWA architectures.
Part 3: Best practices and advanced features
Now it's time to put some polish on that app! Workbox makes it easy to integrate production-quality cache management code into a PWA. Adding push notifications or web payments can make for a more compelling app. Since a PWA is still a web application, tuning it for SEO and integrating Google Analytics are smart ideas.
After practicing each technology individually, this part ends with a four-part walk-through (with codelabs) of a complete ecommerce app. This ties all of the information together in a realistic example.
Mobile Web Specialist Certification available
By earning a Mobile Web Specialist Certification, you'll set yourself apart from other web developers and demonstrate that you have the skill to create responsive and flexible web apps for any platform.