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

Progressive Web Apps- Future of Web Apps(2).png

data.tar.gz

liveapp

new_spa

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.

Building Progressive Web Applications

# Background synchronization

**Background synchronization** is a powerful feature that allows developers to schedule network requests to be retried automatically in the background, even if the users close the browser or navigate away from the page. This can be particularly useful when a web application needs to perform critical network operations, such as sending messages or uploading files, but network connectivity is unreliable or intermittent.


For example, a messaging application can use background synchronization to queue up messages to be sent when network connectivity is available again. This will ensure that users can send and receive messages reliably, even if they are in an area with poor network coverage.

# The Background Sync API

The Background Sync API is implemented as part of the service worker API, which provides a way for web developers to run scripts in the background, independent of the main page. This API is particularly useful for applications that need to perform operations that require a network connection but can be deferred until the user has an internet connection, such as uploading images, sending messages, or syncing data.

When a service worker is registered for a web application, it can intercept network requests made by the application and respond to them in a customized way. This enables the implementing of powerful offline capabilities, such as caching and background synchronization.

# The working of the Background Sync API

To use the Background Sync API, the service worker needs to register a `sync` event—a special event triggered when the browser detects that the device has network connectivity again. When the `sync` event is triggered, the service worker can perform necessary network operations, such as sending queued messages or uploading files that previously failed due to network errors.

In other words, we store network requests if the users are offline. Then, once connectivity is reestablished, we automatically send those stored network requests in the background, even if the app is closed.

This allows the web application to maintain a seamless user experience without relying on network availability.


Learn how the Background Sync API can help perform critical network operations in situations where network connectivity is intermittent or unreliable.

Introduction

Understanding the App Manifest

The Service Workers

Caching Using Service Workers

Cache Strategies

Offline Image Viewer

IndexedDB

Note-Taking App

Creating App-Like UI and UX

Offline Experience with Background Sync API

Web Push Notifications (Notification API, Push API)

Native Device Features

The Photo-Sharing App

Wrapping Up

Learn to Localize a React Web App Using React Intl

Introducing the Background Sync API

Background synchronization