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 process of sending push notifications can be divided into the following procedural steps.

# Requesting user permission

We must obtain the user's consent before sending push notifications. Without the user's permission, we cannot display notifications. The Notifications API allows us to request permission from the user via a prompt. This is a one-time task.

The user can decline permission from the browser settings even if they had previously accepted it. If the user enables notifications, we can then begin displaying notifications.

Although the browser may automatically prompt the user for notification permission, it's preferable to request it manually. This allows us to handle the user's response and gives us control over when to display the consent prompt (such as in response to a button click). Requesting permission this way can increase the likelihood that the user will consent.

# Generating and storing subscriptions

Subscriptions contain information like an endpoint URL and the user's public key. These are required for the browser and the web app to establish a push notification channel. This allows the app server to send messages to the user's browser. Each browser vendor has its own push server, which refers to the browser-device combination (a browser on a given device).

The subscription object is created once the user grants permission for notifications. This subscription object is then sent to the app server and stored. It's important to correctly store a user's subscription information to target the push messages to the right endpoint. 

> **Note:** Unregistering a service worker will revoke all existing push notification subscriptions associated with that service worker.


Understand the various steps involved in the working of push notifications.

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

How Push Notifications Work