HomeCoursesBuilding Progressive Web Applications

4.5

Intermediate

11h

Updated 2 months ago

Building Progressive Web Applications

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

Join 2.7 million developers at

Overview

Content

Reviews

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 improved performance, IndexedDB for storing data locally, and background syncing for unstable networks. Finally, you’ll cover responsive web design and native-device APIs to make your PWA feel and look like a native app. After completing this course, you can build progressive apps with engaging and responsive experiences. You’ll also be prepared to optimize your existing web apps as PWAs, extending their reach and improving performance.

Web development is challenging, but progressive web applications provide a significant advantage over traditional web applicatio...Show More

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

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

TAKEAWAY SKILLS

Web API

Content

61 Lessons3 Projects10 Quizzes

Introduction

5 Lessons

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

4 Lessons

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

8 Lessons

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

11 Lessons

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

8 Lessons

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.

Introducing the IndexedDB API

The IndexedDB Interfaces

Creating Databases and Object Stores

CRUD Operations Using IndexedDB

Quiz on IndexedDB

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.

Quiz on Responsive Design

Offline Experience with Background Sync API

4 Lessons

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

Introducing the Background Sync API

The Working of the Background Sync API

The Periodic Background Synchronization API

Quiz on Background Sync APIs

Web Push Notifications (Notification API, Push API)

5 Lessons

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

Introduction to Web Push Notifications

How Push Notifications Work

Implementing Notifications

Implementing Push Messages

Quiz on Web Push Notifications

10.

Native Device Features

5 Lessons

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

Introduction to Native Device Features

The Photo-Sharing App

Project

11.

Wrapping Up

1 Lessons

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

Conclusion

Learn to Localize a React Web App Using React Intl

Project

Premium

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Rahul Mittal

Developed by MAANG Engineers

Every Educative lesson is designed by a team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

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

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

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.

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!

Course

Rediscovering JavaScript: ES6, ES7 & ES8

Gain insights into ES6, ES7, and ES8 modern JavaScript features. Delve into variables, classes, promises, and metaprogramming. Discover techniques for writing efficient and concise code.

13 h

intermediate

Course

Learn React.js, Redux & Immutable.js while building a weather app

Gain insights into building a weather app with React, Redux, Immutable.js, and Jest. Learn about their problems and solutions, enhancing your app's performance and testing capabilities.

4 h

beginner

Course

Angular: Designing and Architecting Web Applications

Gain insights into designing scalable Angular applications. Learn about components, directives, routing, RXJS, forms, and Firebase authentication to develop rich, interactive web solutions.

20 h

beginner

Course

Complete JavaScript Course: Build a Real World App from Scratch

Gain insights into JavaScript with ES6, DOM traversal, event handling, and animation. Learn about building a Social News web app from scratch using HTML, CSS, and JavaScript.

20 h

beginner

Course

The Complete Guide to Modern JavaScript

Gain insights into JavaScript from basics to ES2021, delve into TypeScript essentials, and test your knowledge through quizzes and coding challenges to reinforce learning.

6 h

beginner

Course

JavaScript Promises

Gain insights into JavaScript Promises to handle asynchronous events, chain multiple promises, utilize built-in methods, and master async functions with await expressions for efficient event handling.

12 h

intermediate

Course

Rediscovering JavaScript: ES6, ES7 & ES8

intermediate

13 hour

Course

Learn React.js, Redux & Immutable.js while building a weather app

beginner

4 hour

Course

Angular: Designing and Architecting Web Applications