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

# Native apps

**Native apps** are software developed for running on a specific device or system—for example, Android apps, iOS apps, Windows apps, etc.
These apps are built using the official programming languages used by a particular OS, like Java/Kotlin for Android apps, Swift for iOS apps, and C#/.NET for Windows apps.

These apps have access to all the libraries, SDKs, and hardware-specific APIs because they're developed for particular systems. The APIs allow these apps to make the best use of the device hardware to provide an excellent experience for the user. 

These apps behave as a part of that OS because of the following reasons: 
- They can be found on the taskbar and home screens.
- They can be downloaded from official stores.
- They can access device hardware like cameras, sensors, microphones, Bluetooth, etc.
- They can communicate with other apps and can share data with them.
- They can read the user's contact list and messages.
- They can run in the background.
- They can show notifications to keep the users updated and engaged.
- They can be opened and used even when we don't have Internet connectivity.
- They have access to the files stored on the user's device.


# Web apps
Now, let's talk about the Web, which is not an operating system but a large-scale distributed system. We can access any web app on any operating system with the help of a browser application. A browser is a native application written for a specific OS (Chrome for Android, Chrome for iOS, and Chrome for Windows)

The helpful thing is that with three languages (HTML, CSS, and JS), we can develop and maintain a single codebase, and our web app will run on every device. 

However, web apps have some limitations when compared with native apps, as shown below.
- They cannot edit the files on the user’s device. 
- They need internet connectivity to load. 
- They cannot access the user’s contact list. 
- They cannot communicate with other native apps.




Learn to distinguish between progressive web apps and native mobile 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

PWAs vs. Native Apps

Native apps