Building Progressive Web Applications - AI-Powered Learning for Developers

Learn how to build progressive web apps by understanding and implementing their building blocks.

Intermediate

61 Lessons

11h

Certificate of Completion

Learn how to build progressive web apps by understanding and implementing their building blocks.

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

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

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

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

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

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

Note-Taking App

Project

Creating App-like UI & UX

5 Lessons

Offline Experience with Background Sync API

4 Lessons

Web Push Notifications (Notification API, Push API)

5 Lessons

10.

Native Device Features

5 Lessons

The Photo-Sharing App

Project

11.

Wrapping Up

1 Lesson

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!