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

# Overview

The **Geolocation API** allows webpages to detect the physical location of the user's device. However, we must prompt the user for permission before accessing their location. The browser will show a permission dialogue, which users can allow or block.


With the user's permission, a webpage can get the user's location, display it on a map, or use it in other ways. This is useful for showing nearby points of interest, location-based searches, or tracking a user's current location.

# How it works

The Geolocation API works by detecting the IP address of the user's device or using GPS/location services on mobile devices or Wi-Fi access points. The browser uses the most accurate method available to determine the physical location.


To use the API, we first need to get user permission. We do this by calling `navigator.geolocation.getCurrentPosition()` and passing a callback function. The browser will prompt the user to allow or deny location access. After getting the permission, this callback function passes the user's current position.

Once the user allows access, we can make subsequent calls to `navigator.geolocation.watchPosition()` to continuously track the user's location. Both the `getCurrentPosition()` and `watchPosition()` methods accept `options` (a configuration object) as their third parameter. Using the `options.timeout` property, we can specify how often we want the callback function to be called to provide the location updates.

# Demo app

Steps to use this app:
* Run the below app and open it in another tab.
* Click on the "Get Location" button and give permission when the browser prompts it.

 After getting permission, the app will show the location.



Learn how to get the location of users with the web Geolocation API.

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 Geolocation API

Overview

How it works