Building Progressive Web Applications - AI-Powered Learning for Developers

Build PWAs with offline support, push notifications, and responsive design. Learn service workers, caching, and optimization for native-like experiences.

Intermediate

61 Lessons

11h

Certificate of Completion

Build PWAs with offline support, push notifications, and responsive design. Learn service workers, caching, and optimization for native-like experiences.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

3 Projects

33 Playgrounds

10 Quizzes

This course includes

3 Projects

33 Playgrounds

10 Quizzes

Course Overview

Web development is challenging, but progressive web applications provide a significant advantage over traditional web applications by enabling capabilities such as installation to the device, offline access, and push notifications. You’ll start by learning about PWAs and understanding the core tenets of a PWA. Next, you’ll learn to implement features like offline support, intercepting network requests, and app installation banners using service worker APIs. You’ll then progress to caching strategies for im...Show More

TAKEAWAY SKILLS

Web Api

What You'll Learn

An understanding of the progressive web application architecture and the service worker lifecycle

The ability to implement core PWA capabilities like offline support, caching app shell, and handling network requests offline

Working knowledge of sending push notifications, storing data locally using IndexedDB, and syncing data in the background

Hands-on experience using native-device APIs like geolocation, cameras, and sharing

An understanding of service worker APIs like fetch, cache, and push and learning how to leverage them for building responsive PWAs

What You'll Learn

An understanding of the progressive web application architecture and the service worker lifecycle

Course Content

Introduction

Get familiar with Progressive Web Apps, their benefits, business impact, and core components.

Introduction to Progressive Web Apps PWAs vs. Native Apps

PWAs as Drivers of Business Success PWA Core Building Blocks Quiz: Introduction to PWAs

Understanding the App Manifest

Get started with configuring web app manifests for optimal PWA installation and user experience.

Getting Started with a Web App Manifest Understanding the App Manifest Properties The Add to Home Screen Experience Quiz: Understanding the App Manifest

The Service Workers

Master the steps to utilize service workers for offline functionality and enhanced user engagement.

What are Service Workers?Functional Events of the Service Worker

The Service Worker Life Cycle Registering a Service Worker Reacting to Incoming Events in a Service Worker Updating and Activating Service Workers Listening to Fetch Events Quiz: Do You Know About Service Workers?

Caching Using Service Workers

Grasp the fundamentals of caching using service workers to enhance offline web application performance.

The Need for Caching Introduction to the Cache API Working with the Cache API The Types of Caching Static Caching or Pre-Caching Retrieving Items from the Cache Serve a Web App in Offline Mode Dynamically Caching Static-Content Updating Cached Files Caching Considerations and Best Practices Quiz on Caching

Cache Strategies

Take a closer look at various caching strategies for optimizing Progressive Web Applications.

The Cache-on-Demand Strategy The Offline-Fallback Page The Cache-with-Network-Fallback strategy The Cache-Only Strategy The Network-Only Strategy The Network-with-Cache-Fallback Strategy The Cache-Then-Network Strategy Quiz on Caching Strategies

Offline Image Viewer

Project

IndexedDB

5 Lessons

Simplify complex topics like using IndexedDB for offline storage, data management, and CRUD operations.

Note-Taking App

Project

Creating App-Like UI and UX

5 Lessons

Master the steps to create responsive, accessible, and user-friendly Progressive Web App interfaces.

Offline Experience with Background Sync API

4 Lessons

Learn how to use the Background Sync API for seamless offline experiences in web apps.

Web Push Notifications (Notification API, Push API)

5 Lessons

Get started with web push notifications to enhance engagement and manage user interactions.

10.

Native Device Features

5 Lessons

Examine the use of native features in PWAs to enhance functionality and user experience.

The Photo-Sharing App

Project

11.

Wrapping Up

1 Lesson

Apply your skills to develop and enhance effective progressive web applications.

Learn to Localize a React Web App Using React Intl

Project

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!