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

Web push notifications have become essential for web apps and sites to reengage users and provide timely updates. Push notifications allow sending messages from the server directly to users' browsers without them needing to visit the site. This increases engagement by alerting subscribers of new content, sales, or other timely updates.  

## Benefits of push notifications

The main benefit of using push notifications is that they engage users even when they are not actively using your site. This leads to various advantages, such as:

- **Increased engagement**: Notifications reach users when new content is available, driving higher engagement because users click through to see the updates.

- **Improved conversion**: Timely notifications about sales, discounts, or deals can improve conversion rates by reminding users of opportunities.

- **Sense of urgency**: Web push notifications create a sense of urgency that can encourage immediate action from users.

- **Reach inactive subscribers**: Push notifications can reengage subscribers who haven't visited your site in a while.

- **Quick updates**: Push notifications quickly notify users of breaking news or urgent updates.

## Overview of push notifications

Let's discuss the following aspects of push notifications to get an overview of the feature:

- **Support**: Push notifications are supported by all major browsers, including Chrome, Firefox, and Edge. However, browser support varies, and some features may differ. Safari, for example,  has partial support for push notifications.

- **Limitations**: There are limitations on notification length and size of the data payload to optimize performance. 

- **Delivery**: The delivery of push notifications is best-effort. This implies that the browser handles queuing and displaying the notifications. Therefore, there are no guarantees that all the messages will be delivered immediately. 

- **Channels**: Multiple channels can be established to send different types of notifications to the same user. For example, an application can have separate channels for alerts, updates, and deals.

- **User control**: Users have full control over accepting notifications, can disable them at any time, and usually have options to modify the notification settings.

## The APIs used by push notifications

Push notifications mainly use the Notification and Push API. 

### The Notification API


The Notification API allows us to create and show notifications in the web app. We can customize the notification with many options, including the `title` and the `body`. The Notification API can be used via the JavaScript page and the service worker.

Here is a simple code to show notifications from the JavaScript page:


Explore web push notifications to engage users with timely messages.


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

Introduction to Web Push Notifications

Background

Benefits of push notifications