Progressive Web Application Codelab
FreeBuild offline-capable web apps with service workers
FreeFree tier
About Progressive Web Application Codelab
This codelab guides learners through transforming an existing web application into a Progressive Web App (PWA) that works offline. Participants write a service worker by hand, register it in the application, and use the Cache Storage API to precache and serve resources offline. The tutorial is hands-on, starting with an existing codebase that requires Node.js 14+, and covers testing offline behavior using Chrome DevTools. It is the first in a series of companion codelabs for Google's Progressive Web App workshop.
Key Features
Write a service worker from scratch
Register a service worker in an existing web application
Use Cache Storage API to precache resources
Test offline functionality with Chrome DevTools
Step-by-step instructions with starter code on GitHub
Part of a progressive web app workshop series
Pros & Cons
Pros
- Free and open-source from Google Developers
- Practical, hands-on approach with starter code provided
- Clear prerequisites and setup instructions
- Covers real-world techniques used in production PWAs
- Great for beginners with basic HTML and JavaScript knowledge
Cons
- Only covers offline capabilities; does not cover other PWA features like install prompts or push notifications
- Requires Node.js 14 or higher and Chrome for testing
- Limited to introductory level; advanced developers may find it basic
Best For
Learning how to enable offline functionality in web appsUnderstanding service worker lifecycle and caching strategiesBuilding progressive web apps with basic offline supportStep-by-step training for web developers new to PWAs
FAQ
What will I learn in this codelab?
You will learn how to write a service worker by hand, add it to an existing web application, and use the Cache Storage API to make resources available offline.
What prerequisites are needed?
Basic knowledge of HTML and JavaScript, a browser that supports service workers, and Node.js 14 or higher to run the starter code.
Is this codelab free?
Yes, it is completely free and provided by Google for Developers.