Web developers
You already build for the browser and want to be ready for where modern web development is headed. This course shows you how to deliver app-like experiences without abandoning the web.
Progressive Web Apps (PWA) - The Complete Guide
Build a Progressive Web App (PWA) that feels like an iOS & Android App, using Device Camera, Push Notifications and more
Course Overview
About This Course
You can build solid websites—but when you compare them to native apps, something feels missing: installability, offline behavior, and those “this belongs on my phone” touches. You don’t want to ship a second codebase or force users through an app store just to get a modern experience.
In this course, you’ll take a plain HTML/CSS/JavaScript web app and progressively add the capabilities that define a Progressive Web App. You’ll work with the browser features that make PWAs fast, engaging, and reliable, and you’ll see how to validate your work with Google’s auditing approach.
By the end, you’ll be able to ship a web app that behaves like a mobile app on iOS and Android: installable from the browser, resilient when the connection drops, and able to interact with real device capabilities. You’ll also know how to apply the same upgrade path to your next single-page app so it can deliver a PWA experience too.
What You'll Learn
You’ll implement the specific building blocks that make a PWA installable, offline-ready, and engagement-focused—then tune it to hit a top score in Google’s Lighthouse PWA audit.
Make apps installable
Create and configure an app manifest so your web app can be added to a device home screen and launched like an app, with the right metadata and app-like presentation.
Offline-first with caching
Use service workers to cache assets and keep your app usable without an internet connection, then apply more advanced caching strategies for better reliability and performance.
Workbox-powered service workers
Integrate Workbox to simplify service worker management, so you can maintain caching behavior more easily as your app grows without hand-writing every low-level detail.
Push notification engagement
Add web push notifications to re-engage users and improve retention, understanding the key steps required to deliver notifications from the web in a PWA context.
Background data sync
Implement background synchronization so data can be sent even if the connection is lost, allowing your app to recover gracefully and complete work once the network returns.
Use device capabilities
Access native-like features such as the camera and geolocation from your web app, so your PWA can do more than display content and can interact with the device.
Ready to get started?
See enrollment optionsPrerequisites
Basic knowledge of HTML, CSS, and JavaScript.
No experience with JavaScript frameworks (like Angular or React) is required.
Who Is This Course For?
HTML/CSS/JS builders
You enjoy working close to the platform and want to push browser capabilities further than “just a website.” You’ll get a clear path to turning your existing skills into PWA-ready skills.
Experience-focused creators
You care about giving users the best possible experience—especially when connectivity is unreliable or attention is hard to keep. This course helps you make your web app feel reliable and engaging across browsers, including older ones.
Curriculum Overview
Start NowPreview the structure and pacing of this course before you begin.
Getting Started47m
- 01About this Course2:06 min
- 02What are Progressive Web Apps?3:24 min
- 03PWAs vs Native Mobile Apps6:07 min
- 04Join our Online Learning Community0:00 min
- 05A Demo PWA & What We'll Build in this Course6:24 min
- 06Our First Progressive Web App6:27 min
- 07PWA Core Building Blocks3:19 min
- 08Comparing PWAs and SPAs3:17 min
- 09What is "Progressive Enhancement"?3:23 min
- 10Course Outline4:24 min
- 11Course Project Setup6:09 min
- 12How to get the Most out of this Course2:11 min
- 13The Academind Pro Referral Program0:00 min
Understanding the App Manifest45m
- 01Module Introduction1:01 min
- 02Using an App Manifest to Make your App Installable1:36 min
- 03Adding the Manifest3:40 min
- 04Understanding App Manifest Properties9:43 min
- 05Adding Properties to the App Manifest9:44 min
- 06PWAs and Browser Support2:16 min
- 07Using the Chrome Developer Tools1:35 min
- 08Simulating the Web App on an Emulator4:36 min
- 09Installing the Web App - Prerequisites2:30 min
- 10Quiz: Understanding manifest.json0:00 min
- 11Adding Properties for Safari5:50 min
- 12Adding Properties for the Internet Explorer2:30 min
- 13Wrap Up0:28 min
- 14Useful Resources & Links0:00 min
The Service Workers55m
- 01Module Introduction0:40 min
- 02Why Service Workers Are Amazing!4:40 min
- 03Understanding Service Worker Events6:18 min
- 04The Service Worker Lifecycle5:19 min
- 05Service Worker Browser Support1:24 min
- 06Registering a Service Worker9:26 min
- 07Reacting to Incoming Events (in SW)5:39 min
- 08Updating & Activating Service Workers3:00 min
- 09Non-Lifecycle Events4:49 min
- 10Getting that "App Install Banner"2:40 min
- 11Testing the App on Real Device (and Installing the App!)3:42 min
- 12Deferring the App Install Banner6:43 min
- 13Wrap Up1:20 min
- 14Service Worker - FAQ0:00 min
- 15Useful Resources & Links0:00 min
Promise and Fetch51m
- 01Module Introduction0:49 min
- 02Async Code in JavaScript3:54 min
- 03Promises - Basics4:40 min
- 04Rejecting Promises4:05 min
- 05Where we Use Promises in our Project2:25 min
- 06Fetch - Basics6:11 min
- 07Sending Post Requests via Fetch4:22 min
- 08Fetch and CORS3:12 min
- 09Comparing Fetch and Ajax3:04 min
- 10Adding Polyfills (for Legacy Browser Support)3:29 min
- 11Fetch & Service Workers2:05 min
- 12Assignment: Fetch & Promises (Problem)4:44 min
- 13Assignment: Fetch & Promises (Solution)8:03 min
- 14Wrap Up0:56 min
- 15Useful Resources & Links0:00 min
Service Workers - Caching1h 40m
- 01Module Introduction0:43 min
- 02Why Caching?3:06 min
- 03Understanding the Cache API4:00 min
- 04Browser Support1:49 min
- 05Adjusting the Course Project2:53 min
- 06Identifying (Pre-)Cacheable Items3:07 min
- 07Static Caching/ Precaching11:04 min
- 08Retrieving Items from the Cache4:55 min
- 09Adding & Retrieving Multiple Files (to/ from Cache)3:05 min
- 10Cache Multiple Files with addAll9:10 min
- 11Dynamic Caching - The Basics1:54 min
- 12Implementing Dynamic Caching7:19 min
- 13Handling Errors2:13 min
- 14Adding Cache Versioning6:56 min
- 15Different Cache Versions & Cleanup6:37 min
- 16Optimizing Cache Management2:42 min
- 17Assignment: Service Workers & Caching (Problem)6:05 min
- 18Assignment: Service Workers & Caching (Solution)21:51 min
- 19Wrap Up0:35 min
- 20Useful Resources & Links0:00 min
Service Workers - Advanced Caching1h 50m
- 01Module Introduction1:12 min
- 02Module Preparation: Adding a Button4:04 min
- 03Offering "Cache on Demand"6:51 min
- 04Providing an Offline Fallback Page6:21 min
- 05Strategy: Cache with Network Fallback1:43 min
- 06Strategy: Cache Only3:06 min
- 07Strategy: Network Only1:57 min
- 08Strategy: Network with Cache Fallback6:21 min
- 09Strategy: Cache then Network9:04 min
- 10Cache then Network & Dynamic Caching5:11 min
- 11Cache then Network with Offline Support5:59 min
- 12Cache Strategies & "Routing"3:09 min
- 13Applying Cache Only5:45 min
- 14Assignment: Advanced Caching (Problem)3:54 min
- 15Assignment: Advanced Caching (Solution)25:52 min
- 16A Better Way Of Parsing Static Cache URLs2:40 min
- 17Making Route Matching More Precise0:00 min
- 18A Better Way Of Serving Fallback Files2:57 min
- 19Post Request and Cache API3:18 min
- 20Cleaning/ Trimming the Cache6:06 min
- 21Getting Rid of a Service Worker3:49 min
- 22Preparing the Project for the Next Steps0:28 min
- 23Wrap Up0:57 min
- 24Useful Resources & Links0:00 min
IndexedDB and Dynamic Data1h 7m
- 01Module Introduction1:01 min
- 02Understanding the Basics1:12 min
- 03Setting Up Firebase7:19 min
- 04Connecting Frontend to Backend8:31 min
- 05Dynamic Caching vs. Caching Dynamic Content4:51 min
- 06Introducing IndexedDB3:34 min
- 07IndexedDB Browser Support0:38 min
- 08Adding the IDB File2:31 min
- 09Storing Fetched Posts in IndexedDB13:11 min
- 10Using IndexedDB in the Service Worker3:56 min
- 11Reading Data from IDB6:40 min
- 12Clearing IDB & Handling Server-Client Mismatch3:40 min
- 13Implementing the Clear Database Method3:58 min
- 14Deleting Single Items from the Database4:05 min
- 15IndexedDB and Caching Strategies1:33 min
- 16Wrap Up0:45 min
- 17Useful Resources & Links0:00 min
Creating a Responsive User Interface (UI)37m
- 01Module Introduction1:18 min
- 02Responsive Design in this Course2:51 min
- 03Understanding Responsive Design in our Project3:30 min
- 04CSS and Media Queries9:46 min
- 05Want to see more of your Images?0:00 min
- 06Using Images in a Responsive Way8:52 min
- 07Adding Animations8:29 min
- 08The Viewport & Scaling1:46 min
- 09Wrap Up0:46 min
- 10Useful Resources & Links0:00 min
And 6 more sections in the full course.
Ready to Get Started?
Choose the option that works best for you.
Single Course
Progressive Web Apps (PWA) - The Complete Guide
One Payment. Lifetime Access.
$69one-time
- One-time payment
- All future updates for this course
- Downloadable resources & code
- Certificate of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Lifetime access
Most Popular
All-Access Membership
Everything we teach. One subscription.
$25/mo
$4,729+ worth of courses
- Full access to all courses
- All future courses included
- Downloadable resources & code
- Certificates of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Cancel anytime