Where should the sw.js service worker file be placed for a PWA to control the entire app?

Place sw.js in the app's root directory so its scope can cover all pages and assets.

How can a Progressive Web App show updated files after a service worker update?

Use versioned cache names, delete outdated caches during activation, and refresh or claim clients after the new worker activates.

Why should a PWA contacts app enable Firestore offline persistence?

It caches Firestore data locally, allowing the app to read and update contact data during unreliable or offline connections.

Free Course Image Progressive Web Application PWA for Beginners

Free online course Progressive Web Application PWA for Beginners

Duration of the online course: 3 hours and 24 minutes

(3)

Build installable, offline-ready web apps with a free PWA course—learn service workers, caching, manifests, and real app workflows in your browser.

In this free course, learn about

PWA fundamentals: benefits, requirements, and core capabilities like offline-first behavior
Building a simple contacts list PWA UI and app structure
Web App Manifest basics, including display: 'standalone' for app-like installed behavior
Service worker registration with feature detection for broad browser support
Service worker scope rules: placing sw.js at the site root to control the entire app
Service worker lifecycle: install, activate, fetch, and how updates are applied
Using skipWaiting and clients.claim to immediately activate and control pages with a new SW
Offline readiness: precaching the app shell and serving cached responses when offline
Using event.waitUntil in install to complete caching work before the SW is considered installed
Fixing stale content after updates by versioning caches and deleting old caches on activate
Dynamic caching in fetch handlers, including enforcing a cache size limit
Offline fallback strategy: redirecting to index.html (app shell) when navigation is offline
Keeping UI in sync with Firebase/Firestore data and handling deletes efficiently
Enabling Firestore persistence to support offline access and resilient syncing

About the free online course

Turn a regular website into an app-like experience users can install, launch from the home screen, and keep using even when the connection drops. This free online course is designed for beginners who want practical, job-relevant Progressive Web App skills without getting lost in theory. You will build confidence by creating a simple contact list application and then progressively enhancing it with the core features that make PWAs feel fast, reliable, and engaging.

You will learn how the web app manifest influences the installed experience, including the display modes that help your project behave like an independent application. From there, you will work with service workers—the engine behind offline support and performance. You will understand where the service worker file must live to control the right scope, how the lifecycle works, and how installation and activation affect what users see. This helps you avoid common headaches, such as updating a page but still seeing old content because a previous cache is being served.

As you move forward, you will practice caching strategies that keep the app responsive while ensuring updates are delivered correctly. You will explore how to cache app shell files, enable offline readiness, handle fetch events, and implement dynamic caching with practical limits so storage does not grow without control. You will also understand how to provide an offline fallback page that keeps the experience clear and consistent when a user navigates without connectivity.

Finally, you will connect the app to a real-time backend workflow with Firebase, learning patterns for keeping the UI synced efficiently and handling deletes without leaving stale entries behind. You will also see why offline persistence matters for a PWA, making your application more resilient and user-friendly. By the end, you will have a strong foundation in building, debugging, and shipping beginner-friendly PWAs that feel like true apps—ideal for web development learners and anyone looking to strengthen their modern JavaScript project portfolio.

Course content

Video class: PWA Tutorial for Beginners 1 - Getting Started with Progressive Web Apps 20m
Exercise: Which feature best demonstrates a core PWA capability in the contact organizer app
Video class: PWA Tutorial for Beginners 2 - Creating A Contact List App 15m
Exercise: In a PWA web app manifest, which display value makes the app behave like an independent installed application?

Video class: PWA Tutorial for Beginners 3 - Service worker installation 15m
Exercise: Where should the service worker file be placed to control the entire PWA?
Video class: PWA Tutorial for Beginners 4 - Service worker lifecycle 12m
Exercise: In a PWA, where should the service worker file sw.js be placed to ensure global scope
Video class: PWA Tutorial for Beginners 5 - Service worker lifecycle events 13m
Exercise: How to immediately activate a new service worker version

Video class: PWA Tutorial for Beginners 6 12m
Exercise: What is essential to enable offline support and pass the PWA offline readiness audit?
Video class: PWA Tutorial for Beginners 7 12m
Exercise: How do you enable offline capability in a beginner PWA using a service worker
Video class: PWA Tutorial for Beginners 8 11m
Exercise: What does event.waitUntil do in the install event of a service worker?
Video class: PWA Tutorial for Beginners 9 10m
Exercise: After updating index.html, your PWA still shows the old content. What is the most likely cause and the correct fix?
Video class: PWA Tutorial for Beginners 10 11m
Exercise: How do you ensure a PWA uses the latest cached files after updating the service worker?
Video class: PWA Tutorial for Beginners 11 17m
Exercise: How do you implement dynamic caching with a size limit in a PWA service worker fetch handler?
Video class: PWA Tutorial for Beginners 12 13m
Exercise: When configuring an offline fallback for a static PWA whose home page is index.html, which file should users be redirected to when offline?

Video class: PWA Tutorial for Beginners 13 11m
Exercise: How should a PWA register its service worker to ensure browser support?
Video class: PWA Tutorial for Beginners 14 13m
Exercise: How should a PWA contacts app keep the UI synced with Firebase and handle deletes efficiently?
Video class: PWA Tutorial for Beginners 15 13m
Exercise: Why enable Firestore persistence in a PWA?

Free online courses on Progressive Web Apps

Learn aboutProgressive Web Apps

Explore free online Progressive Web Apps courses and learn to build fast, reliable, installable web experiences that work across devices. Master service workers, offline functionality, caching, responsive design, push notifications, and app performance. Enroll today, grow your web development skills, and earn a certificate with every course.

Learn aboutJavaScript

Explore the best free online JavaScript courses with certificates and build in-demand web development skills at your own pace. Learn JavaScript fundamentals, DOM manipulation, ES6, APIs, frameworks, and more through beginner-friendly and advanced classes. Enroll today, earn a certificate, and strengthen your resume for developer career opportunities.

Learn aboutService Workers

Explore the best free online Service Workers courses and learn to build fast, reliable, offline-ready web apps. Master caching strategies, background sync, push notifications, lifecycle events, and Progressive Web App performance through flexible lessons. Enroll for free, develop job-ready skills, and earn a certificate to showcase your expertise.