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

A situation arises in providing offline availability to the user with the help of caching when the user is offline, and we don't have the requested asset in the cached form. In this scenario, the user will see the network error, "This site can't be reached," because the network request will fail offline.

A straightforward workaround is to add a `catch()` block to the `fetch` method to handle any errors.

self.addEventListener('fetch', event => {
    event.respondWith(
      // check the cache for the request
      caches.match(event.request)
        .then(response => {
          // if finds the resource in the cache, return it
          if (response) {
            return response;
          } else {
            // else request to the network
            return fetch(event.request)
              .then(res => {
                cache.put(event.request.url, res);
                return res;
              })
              // adding a catch block to handle any network errors
              .catch(err => {
                console.log("Error while making network request!", err);  
              });
          }
        })
    );
  }); 

However, a better solution for this situation is to show a custom fallback page to the offline user. On this page, we can show a user-friendly message about the non-availability of the resource. Also, we can redirect the user to some other available (cached) resource from this fallback page.

# Adding an offline fallback page to the app

We'll add an HTML file to the project directory named `offline.html`. For a better user experience, this fallback page should have a similar styling to the app's theme.

Learn how to show a custom fallback page to the user when the app fails to fetch the requested asset.

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 Offline-Fallback Page