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

# What is the IndexedDB API?


IndexedDB is a powerful, low-level API for client-side storage of large amounts of structured data. It is a NoSQL database, which means that it doesn't use tables and rows like traditional SQL databases. Instead, it uses an object-oriented model to store and retrieve data. This makes it perfect for applications that require fast and flexible storage on the client side, such as web applications.

The IndexedDB API is a key-value database that runs in the browser. Unlike other storage mechanisms such as the `sessionStorage` or `localStorage` objects, the IndexedDB API is accessed asynchronously, which makes it suitable for service workers with asynchronous nature.

# Uses of the IndexedDB API


The IndexedDB API allows us to store structured data such as JSON, XML, or JavaScript objects, arrays, and significant amounts of unstructured data, including files/blobs. 

The IndexedDB API can store formatted response data, transformed response data, and pieces of response data. Unlike app shell assets, which should be stored in the cache, IndexedDB is designed to store structured and unstructured data.

# Advantages

Here are some advantages of the IndexedDB API.

## Offline accessibility
One of the main advantages of the IndexedDB API is its offline capability. Web applications that use IndexedDB can continue to work even if the user's internet connection is lost. This means that users can continue to use the application, and their data will be saved and synced when the connection is restored. This makes IndexedDB an excellent choice for web applications that need to work both online and offline.

## Scalability

Another advantage of IndexedDB is its scalability. Unlike other client-side storage solutions like the `localStorage`, IndexedDB can handle large amounts of data, making it ideal for applications that store large amounts of structured data. It's also fast and efficient, essential for web applications requiring quick response times.


## Accessibility

We can access the application's IndexedDB from both the page JavaScript and the service worker. It's important to note that the `sessionStorage` or `localStorage` objects cannot be used in a service worker as they are accessed synchronously, making IndexedDB the preferred storage mechanism.


Get a brief introduction to the IndexedDB API along with its use cases and characteristics.

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 IndexedDB API

What is the IndexedDB API?