Home>Courses>Building Progressive Web Applications

Building Progressive Web Applications

Discover how to build Progressive Web Apps with offline support, push notifications, responsive design, and native-like experiences. Gain insights into service workers, caching strategies, and app optimization.

Intermediate

61 Lessons

11h

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

3 Projects

33 Playgrounds

10 Quizzes

Course Overview

What You'll Learn

Course Content

Apply Your Skills

Recommendations

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

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

Course Content

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

10.

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

11.

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

12.

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

14.

Wrapping Up

1 Lessons

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

Conclusion

Course Author

Rahul Mittal

Project

Build a Toast Notification System With Svelte

intermediate

2 hour

Project

Build a Toast Notification System With Svelte

Learn to build a toast notification system in Svelte, managing messages and user interactions through a responsive application.

intermediate

2 hours

Trusted by 2.5 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."

Carlos Matias La Borde

Software Developer

"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

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

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!

Recommended before starting this course

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.

beginner

20 hours

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.

beginner

6 hours

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.

intermediate

12 hours

Course

Complete JavaScript Course: Build a Real World App from Scratch

beginner

20 hour

Course

The Complete Guide to Modern JavaScript

Related Courses and Skill Paths

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.

intermediate

13 hours

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.

beginner

4 hours

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.

beginner

20 hours

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