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

# Introduction

The modern web has brought new technologies and APIs that can improve user experience. One such API is the Web Share API. This API allows web developers to integrate native sharing capabilities into their web applications, which makes it easier for users to share content with their friends and followers on social media platforms.

# The Web Share API

The Web Share API is a JavaScript API that enables web applications to invoke the native sharing capabilities of the user's device. Users can share content from our web application directly to their preferred social media platforms, messaging apps, or email clients without relying on third-party sharing widgets. Since the web share API does not rely on third-party services, it reduces the risk of user data being shared with external entities.

This API allows the sharing of data like text, links, and files to the shared targets selected by the user. The share targets typically include the system clipboard, email, contacts or messaging applications, and Bluetooth or Wi-Fi channels. This API provides the sharing UI used by the operating system. 

# Browser support for the Web Share API

As of May 2023, the Web Share API has varying levels of support across different browsers for the following browsers:
- Google Chrome has supported the Web Share API since version 61 on Android and version 89 on desktop platforms (Windows, Chrome OS).
- Microsoft Edge has supported the Web Share API since version 93 on all desktop platforms.
- Apple Safari has supported the Web Share API since iOS 12.2 on mobile devices and macOS 10.14.4 on desktop platforms.
- Mozilla Firefox currently supports the Web Share API only on Android since version 79.

> **Note:** To get the latest browser support for Web Share API, check [caniuse.com](https://caniuse.com/web-share).

# The Web Share API in action

Here's a simple web application that demonstrates the use of the Web Share API. It has a basic HTML page with a button that, when clicked, shares a predefined message and URL.

Explore the Web Share API to enhance social sharing functionality on the web.


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

The Web Share API

Introduction

The Web Share API