Free Course Image PWA Progressive Web Apps for Beginners

Free online coursePWA Progressive Web Apps for Beginners

Duration of the online course: 4 hours and 12 minutes

New

Build installable web apps that work offline. Take this free PWA course to master service workers, caching and deployment—boost your web dev career fast.

In this free course, learn about

  • What PWAs are and the core features that differentiate them from standard web apps
  • How offline support works via service workers, caching strategies, and fetch interception
  • How to set up a PWA project and why you must use a local dev server (not file://)
  • How to create a web app manifest and use display=standalone for native-like launch
  • How to test PWAs on Android emulator (10.0.2.2) and use DevTools port forwarding
  • How to support iOS install experience, including setting a custom home screen icon
  • Service worker lifecycle: install, waiting, activate; when new SW becomes active
  • How SW scope is determined and how to correctly register a service worker
  • Precache app-shell assets in install using event.waitUntil and Cache API
  • Serve cached assets with network fallback; use cache versioning to update stale files
  • Dynamic caching of pages, offline fallback pages, and conditional fallbacks for HTML only
  • How to limit cache size to prevent unbounded growth of dynamic caches
  • How Lighthouse PWA audits work: installability, HTTPS, and offline 200 responses
  • Offline-capable Firestore usage: realtime onSnapshot, persistence, and offline sync flows

Course Description

Progressive Web Apps let you deliver an app-like experience using the web stack you already know. In this free beginner-friendly course, you will learn how to transform a regular website into an installable, reliable PWA that loads fast, works offline, and feels at home on mobile and desktop. If you are a web developer who wants better performance, stronger engagement, and practical skills that map directly to real projects, this course is a clear starting point.

You will build a solid mental model of what makes a PWA different and why it matters for users on unstable connections. Step by step, you will understand the roles of the web app manifest, HTTPS, and modern browser capabilities that enable add-to-home-screen, native-style launching, and a polished standalone experience. You will also learn how to test across environments, including Android emulation and iOS-specific considerations, so your work behaves consistently where people actually use it.

The core of the learning experience focuses on service workers: what they are, how their lifecycle works, and how they intercept network requests to deliver offline support. You will practice designing caching strategies for an app shell, handle updates safely with cache versioning, and introduce offline fallback behavior that keeps the app usable when a page is unavailable. Along the way, you will learn to control cache growth so performance stays predictable rather than degrading over time.

To bridge the gap between static assets and real applications, the course introduces working with dynamic data using a modern backend workflow and realtime updates. You will explore approaches that keep the interface responsive, support offline usage responsibly, and sync changes when connectivity returns. Finally, you will deploy your PWA to production hosting and validate quality using auditing tools, ensuring the project meets key installability and reliability requirements. By the end, you will be ready to apply these techniques to your own web development work and ship PWAs with confidence.

Course content

  • Video class: PWA Tutorial for Beginners #1 - What Are PWA's? 07m
  • Exercise: What enables offline functionality in a Progressive Web App?
  • Video class: PWA Tutorial for Beginners #2- Setting up a Project 23m
  • Exercise: In PWA development, why should you use a local dev server instead of opening index.html via the file protocol
  • Video class: PWA Tutorial for Beginners #3 - The Web App Manifest 10m
  • Exercise: Which web app manifest property controls launching the app in a native style window without browser UI?
  • Video class: PWA Tutorial for Beginners #4 - Android Emulator 07m
  • Exercise: Which address should you use in the Android emulator to access your computer local server running on port 5500?
  • Video class: PWA Tutorial for Beginners #5 - iOS Support 02m
  • Exercise: Ensuring a custom iOS home screen icon for a PWA
  • Video class: PWA Tutorial for Beginners #6 - Intro to Service Workers 03m
  • Exercise: What best describes a service worker in a PWA?
  • Video class: PWA Tutorial for Beginners #7 - Service Worker Life-cycle 06m
  • Exercise: When a new Service Worker is found after reloading, what does it do while an older one is still controlling pages?
  • Video class: PWA Tutorial for Beginners #8 - Registering a Service Worker 09m
  • Exercise: What determines the scope of a service worker in a PWA?
  • Video class: PWA Tutorial for Beginners #9 - The Install Event 03m
  • Exercise: Which service worker lifecycle event is best for pre-caching common assets for offline use?
  • Video class: PWA Tutorial for Beginners #10 - The 'Activate' Event 07m
  • Exercise: After editing a Service Worker in a PWA, when does the new version normally become active?
  • Video class: PWA Tutorial for Beginners #11 - Lighthouse Audit 05m
  • Exercise: Which condition is required for the automatic PWA install banner to appear in Chrome?
  • Video class: PWA Tutorial for Beginners #12 - Fetch Events 05m
  • Exercise: What does listening to the fetch event in a service worker enable?
  • Video class: PWA Tutorial for Beginners #13 - The Install Banner 05m
  • Exercise: Why use Chrome DevTools port forwarding when testing a PWA on an Android emulator?
  • Video class: PWA Tutorial for Beginners #14 - Offline Mode Explained 05m
  • Exercise: How does a PWA load content when the network is unavailable?
  • Video class: PWA Tutorial for Beginners #15 - Pre-Caching Assets 12m
  • Exercise: In a service worker, which method ensures the install event waits until app shell precaching completes?
  • Video class: PWA Tutorial for Beginners #16 - Getting Cached Assets 12m
  • Exercise: How should a Service Worker serve cached shell assets while allowing a network fallback?
  • Video class: PWA Tutorial for Beginners #17 - Cache Versioning 14m
  • Exercise: After updating a static file in a PWA, the page still shows old content. What should the service worker do to ensure the updated asset is used?
  • Video class: PWA Tutorial for Beginners #18 - Dynamic Caching 10m
  • Exercise: How should a PWA cache navigated pages to enable offline browsing without pre-caching everything?
  • Video class: PWA Tutorial for Beginners #19 - Offline Fallback Page 07m
  • Exercise: How should a PWA handle offline navigation to a page the user has never visited
  • Video class: PWA Tutorial for Beginners #20 - Conditional Fallbacks 04m
  • Exercise: Ensure fallback page is used only for HTML requests in a service worker
  • Video class: PWA Tutorial for Beginners #21 - Limiting Cache Size 07m
  • Exercise: How do you prevent a dynamic cache in a service worker from exceeding a set size?
  • Video class: PWA Tutorial for Beginners #22 - Site Audit Refresh 03m
  • Exercise: What enabled the PWA audit to show 200 responses when offline for the current page and start URL?
  • Video class: PWA Tutorial for Beginners #23 - Firestore Database 08m
  • Exercise: In a PWA, what is the recommended way to handle dynamic backend data for offline use?
  • Video class: PWA Tutorial for Beginners #24 - Realtime Data 13m
  • Exercise: In a PWA using Firestore, what is the main benefit of using onSnapshot on a collection?
  • Video class: PWA Tutorial for Beginners #25 - Updating the UI 08m
  • Exercise: What must be restored to ensure the app shell loads offline?
  • Video class: PWA Tutorial for Beginners #26 - Offline Data 10m
  • Exercise: What is the recommended way to enable safe offline data in a PWA that uses Firestore?
  • Video class: PWA Tutorial for Beginners #27 - Adding Recipes 10m
  • Exercise: How does a PWA using Firestore show newly added recipes while offline and then sync them when back online?
  • Video class: PWA Tutorial for Beginners #28 - Deleting Recipes 11m
  • Exercise: Best way to handle delete clicks for dynamic recipe items in a PWA list
  • Video class: PWA Tutorial for Beginners #29 - Deploying to Firebase 05m
  • Exercise: Deploying a PWA to Firebase Hosting: which CLI command publishes your app?
  • Video class: PWA Tutorial for Beginners #30 - Testing the App 04m
  • Exercise: Which PWA capability enables viewing cached pages offline and syncing recipe changes once the device reconnects?
  • Video class: PWA Tutorial for Beginners #31 - Next Steps 03m
  • Exercise: Which change allowed the app to pass the HTTPS requirement in the PWA audit after deployment?

This free course includes:

4 hours and 12 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

More free courses at Web Development

Free Ebook + Audiobooks! Learn by listening or reading!

Download the App now to have access to + 5000 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 60 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate