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

The essential building blocks of a PWA include a web app manifest file and a service worker. However, some other features are used to enhance a classic web application. Let's have a closer look at them. 

# PWA Building Blocks

## Web App Manifest

## Service Worker 

- Cache API
- WebPush API
- BackgroundSync API

## HTTPS Server

## IndexedDB

## Responsive Design

## Native APIs

- Geolocation API
- Media API

# Application manifest

A **web app manifest** provides information to the browser about the web application and is required to make a PWA installable on the user's device. Most native apps have a manifest file attached to them. A manifest file contains the details of an app, such as the following: 
- Name
- Description
- Theme and colors
- Icons for different places like the home screen, splash screen, etc. 
- Starting activity (or screen)

Therefore, the operating systems require the relevant manifest file to install an app. That's why a PWA to be installed on devices needs a manifest file (the web manifest file in this case) to be attached.

# HTTPS server

An **HTTPS server** secures the users’ data via bidirectional encryption and the communication between the users and the website from intruders.

PWAs should be served via an HTTPS server. Many core PWA technologies, such as service workers requiring HTTPS, work only in a secure context.


# Service workers

A **service worker** is a JavaScript file running as a background process even when the application is closed. Some service worker features that work as the technical building blocks of progressive web apps are described below:

- **The Cache API**: It can provide offline support in web applications. The service worker caches and serves the required files when the user is offline.

- **The Background Sync API**: It stores user data when the user is offline. When the internet connection is reestablished, it automatically syncs the stored data in the background.

- **The Web Push API**: It allows developers to send push notifications to users who have subscribed to a service site. This can increase user engagement by prompting users to reengage with a site even when they don't have an active browser page or tab open.


# Responsive web design

A **responsive web design** means using modern web technologies to design pages that look well on all devices. Responsive layouts adjust automatically for different screen sizes. 

A responsive web design includes the following usages:
- Media queries to apply different CSS styles based on screen sizes. 
- Flexible grids to adjust the layouts based on the required and available space.
- Responsive images to prevent users from horizontal scrolling on small devices.
- Responsive typography so the text is readable independent of screen size. 

A nonresponsive design can damage the user experience, even if an app is full of functionalities. PWAs should have a responsive web design because they're meant to provide a fast and engaging user experience.

# IndexedDB

**IndexedDB** is client-side storage that allows persistently storing structured data, including files/blobs. 

It allows storing up to 50MB of data (depending on the browser and the space available on the user's device). We can store blobs bigger than 50MB after getting permission from the user.

IndexedDB helps PWAs to work offline by:  
- Storing the data previously fetched by the user to serve in case of no internet connection. 
- Storing the data added or modified by the user, which can be synced with the server when the internet connection is restored.

# Native APIs

If PWAs have to be installed on the user's device, they should also function like native apps, and for that, using native APIs can help. Today, the Web has access to many native APIs like:
- The Geolocation API to access user location after getting permission from the user.
- The Media API to access the camera and microphone on the user's device.

Other native APIs include the Battery API, Clipboard API, Contact Picker API, Fullscreen API, Web Share API, Web Speech API, and many more.





Learn to break down the building blocks of progressive web apps.

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

PWA Core Building Blocks

Application manifest